[jQuery] jqGrid footer 처리

#. jqGrid에 기본적인 사용방법을 알아봤다면 이번엔 풋터에 대해 알아보도록 하겠습니다.

 

#. 자주 사용되진 않겠지만 통계가 필요한 경우 종종 사용됩니다.

 

---

#. footer 추가하기

• 이전에 속성 추가할 때와 같이 그리드 호출 후 속성에 footerrow : true를 추가해 줍니다.
  
  
• 데이터는 myData라는 임의데이터를 생성했습니다.

var myData = [
    { id: 1, name: "John", age: 25, item: 'poteto', price: '25000'},
    { id: 2, name: "Alice", age: 30, item: 'tomato', price : '15200'},
    { id: 3, name: "Bob", age: 22, item : 'apple', price : '18550'},
    { id: 4, name: "King", age: 25, item : 'bread', price : '35010'},
    { id: 5, name: "Henry", age: 21, item : 'soybean', price : '5000'}
];

$("#jqGrid").jqGrid({
    data: myData,
    datatype: "local",
    colNames: [
                '순번', '이름', '나이', '구매물품','금액'
    ],
    colModel: [
        { name: 'id', width: 50, align:'center' },
        { name: 'name', width: 100 },
        { name: 'age', width: 80 },
        { name: 'item', width: 80 },
        { name: 'price', width: 150, formatter:'integer',formatoptions: { defaultValue:'', thousandsSeparator:',' } }
    ],
    viewrecords: true,
    width: 600,
    height: 200,
    rowNum: 5,
    rowList: [5, 10, 20],
    pager: "#gridpager",
    caption: "Sample Grid",
    footerrow: true,
})

 

• 추가 후 그리드를 보면 아래와 같이 아래쪽에 라인이 하나 잡히는 것을 확인할 수 있습니다.
  
  

 

---

#. footer 데이터 처리하기

• 그리드 호출이 완료 됐을 경우 뿌려주는 이벤트인 loadComplete를 사용하여 처리해 줍니다.
  
  
• 해당 부분은 따로 빼서 setGridParam({ })으로 처리도 가능합니다.

    loadComplete: function(data) {
        var grid = $("#jqGrid");
        var $footRow = $("#jqGrid").closest(".ui-jqgrid-bdiv").next(".ui-jqgrid-sdiv").find(".footrow");
        var $css = {"background-color": "gray", "padding-top":"8px", "padding-bottom":"8px"}

        // 열에 대한 합계
        var ageSum = $('#jqGrid').jqGrid('getCol', 'age', false, 'sum');
        var priceSum = $('#jqGrid').jqGrid('getCol', 'price', false, 'sum');

        // 풋터 열에 합계 데이터 매칭
        grid.footerData('set', {
            id: 'Total:',
            age: ageSum,
            price : priceSum
        });

        // 셀 병합 및 css 적용
        $footRow.find('>td[aria-describedby="jqGrid_id"]').attr('colspan', '1').width('200').css("");
        $footRow.find('>td[aria-describedby="jqGrid_name"]').css("display", "none");
        $footRow.find('>td[aria-describedby="jqGrid_age"]').css($css);
        $footRow.find('>td[aria-describedby="jqGrid_item"]').width('90');
    }

---

 

---

#. 컬럼이 많은 경우 for문을 이용

• 컬럼을 배열로 처리하여 for문을 이용해 처리해 줍니다.

// 열에 대한 합계
var sum3 = $("#jqGrid").jqGrid('getCol', 'col3', false, 'sum'); 
var sum4 = $("#jqGrid").jqGrid('getCol', 'col4', false, 'sum'); 
var sum5 = $("#jqGrid").jqGrid('getCol', 'col5', false, 'sum');
var sum6 = $("#jqGrid").jqGrid('getCol', 'col6', false, 'sum');
var sum7 = $("#jqGrid").jqGrid('getCol', 'col7', false, 'sum');
var sum8 = $("#jqGrid").jqGrid('getCol', 'col8', false, 'sum');
var sum9 = $("#jqGrid").jqGrid('getCol', 'col9', false, 'sum');
var sum10 = $("#jqGrid").jqGrid('getCol', 'col10', false, 'sum');
var sum11 = $("#jqGrid").jqGrid('getCol', 'col11', false, 'sum');
var sum12 = $("#jqGrid").jqGrid('getCol', 'col12', false, 'sum');

// 풋터 열에 합계 데이터 매칭
$('#jqGrid').jqGrid('footerData', 'set', {
    col1: 'Total:'
    , col3: Sum3
    , col4: Sum4
    , col5: Sum5
    , col6: Sum6
    , col7: Sum7
    , col8: Sum8
    , col9: Sum9
    , col10: Sum10
    , col11: Sum11
    , col12: Sum12
});

var $footRow = $("#jqGrid").closest(".ui-jqgrid-bdiv").next(".ui-jqgrid-sdiv").find(".footrow");
var $css = {"background-color": "gray", "padding-top":"8px", "padding-bottom":"8px"}                    
var columns = ["col1", "col2", "col3", "col4", "col5", "col6", "col7", "col8", "col9", "col10", "col11", "col12"];

for (var i = 0; i < columns.length; i++) {
    if(columns[i] == "col1"){  // col1과 col2 셀 병합
        $footRow.find('>td[aria-describedby="jqGrid_col1"]').attr("colspan", "1").width("125");
        $footRow.find('>td[aria-describedby="jqGrid_col2"]').css("display", "none");
    }
    $footRow.find('>td[aria-describedby="gridTab3_' + columns[i] + '"]').css($css);
}

 

 

 

 

===========================================================
틀린 내용이 있거나 이견 있으시면 언제든 가감 없이 말씀 부탁드립니다!

===========================================================