RealGrid2 가이드
헤더와 푸터 🆕
합계 및 소계 🆕

합계 및 소계

합계 및 소계를 행과 열에 출력할 수 있습니다.
푸터 영역에 최소, 최대, 평균, 합계 등의 값을 출력할 수 있습니다.

summary영역과 footer영역의 valueCallback을 사용한 필요값 연산 및 최고값 출력.

//summary 영역 최고사용량
var headerSummaryCallback = [{
  numberFormat: "#,##0.0",
  valueCallback: function (grid, column, childIndex, summary, value) {
    if(dataProvider.getRowCount() > 0){
      var fuel = 0;
      for(var i = 0; i < dataProvider.getRowCount(); i++){
        if(dataProvider.getValue(i, "연료명") == "가스/디젤 오일(경유)"){
          if(fuel < dataProvider.getValue(i, summary.column.fieldName)){
            fuel = dataProvider.getValue(i, summary.column.fieldName)
          }
        }
      }
      return fuel;
    }
  }
},{
  numberFormat: "#,##0.0",
  valueCallback: function (grid, column, childIndex, summary, value) {
    if(dataProvider.getRowCount() > 0){
      var fuel = 0;
      for(var i = 0; i < dataProvider.getRowCount(); i++){
        if(dataProvider.getValue(i, "연료명") == "휘발유"){
          if(fuel < dataProvider.getValue(i, summary.column.fieldName)){
            fuel = dataProvider.getValue(i, summary.column.fieldName)
          }
        }
      }
      return fuel;
    }
  }
}];
 
//footerCallback 공통
var footersValueCallback = [
  { 
  valueCallback: function (grid, column, footerIndex, columnFooter, value) {
    var sum = 0;
    for(var i = 0; i < dataProvider.getRowCount(); i++){
      if(dataProvider.getValue(i, "연료명") == "도시가스(LNG)"){
        sum += dataProvider.getValue(i, columnFooter.column.fieldName);
      }
    }
    return sum;
  }, numberFormat: "#,##0.0" },
  { 
    valueCallback: function (grid, column, footerIndex, columnFooter, value) {
      var sum = 0;
    for(var i = 0; i < dataProvider.getRowCount(); i++){
      if(dataProvider.getValue(i, "연료명") == "전기"){
        sum += dataProvider.getValue(i, columnFooter.column.fieldName);
      }
    }
    return sum;
    }, numberFormat: "#,##0.0" 
  },
  { 
    valueCallback: function (grid, column, footerIndex, columnFooter, value) {
      var sum = 0;
      for(var i = 0; i < dataProvider.getRowCount(); i++){
        if(dataProvider.getValue(i, "연료명") == "가스/디젤 오일(경유)"){
          sum += dataProvider.getValue(i, columnFooter.column.fieldName);
        }
      }
      return sum;
      }, numberFormat: "#,##0.0" 
  },
  { 
    valueCallback: function (grid, column, footerIndex, columnFooter, value) {
      var sum = 0;
      for(var i = 0; i < dataProvider.getRowCount(); i++){
        if(dataProvider.getValue(i, "연료명") == "휘발유"){
          sum += dataProvider.getValue(i, columnFooter.column.fieldName);
        }
      }
      return sum;
    }, numberFormat: "#,##0.0" 
  }
]
 
//컬럼 설정
var columns = [{ name: "구분", fieldName: "구분", "width": 85 },
  { name: "조사년도", fieldName: "조사년도", "width": 60 },
  { name: "소속기관명", fieldName: "소속기관명", "width": 85 },
  { name: "시설명", fieldName: "시설명", wdith: 85 },
  { name: "연료명", fieldName: "연료명", "width": 90 },
  {
      name: "colLine", "type": "series", "fieldNames": "A01월..A12월", "width": 120,
      renderer: {
          "type": "sparkcolumn",
          "highFill": "#ff008800",
          "lowFill": "#ffff0000",
          "lastFill": "#ff888888"
      },
      header: { "text": "그래프" },
      headerSummary:[{ text: "경유 최고 사용량"},{text: "휘발유 최고 사용량"}],
      footers: [{text:"도시가스(LNG)"},{text:"전기"},{text:"가스/디젤 오일(경유)"},{text:"휘발유"}]
  },
  { name: "A01월", fieldName: "A01월",  header: { text: "01월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A02월", fieldName: "A02월",  header: { text: "02월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A03월", fieldName: "A03월",  header: { text: "03월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A04월", fieldName: "A04월",  header: { text: "04월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A05월", fieldName: "A05월",  header: { text: "05월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A06월", fieldName: "A06월",  header: { text: "06월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A07월", fieldName: "A07월",  header: { text: "07월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A08월", fieldName: "A08월",  header: { text: "08월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A09월", fieldName: "A09월",  header: { text: "09월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A10월", fieldName: "A10월",  header: { text: "10월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A11월", fieldName: "A11월",  header: { text: "11월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A12월", fieldName: "A12월",  header: { text: "12월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "합계", fieldName: "합계", width: 75, styleName: "right-column", footers: footersValueCallback }
];