jqGrid footer 그리고 footer sum 예제

결과 그림:

//jqGrid
		$("#grid").jqGrid({
			sortable: true,
			datatype: "local",
		   	colNames:['종류','출고', '입고', '정산수량', '금액'],
		   	colModel:[
		   		{name:'crateName', index:'crateName', width:160, align:'center', sorttype:'text', sortable:true,},
		   		{name:'outQuantity', index:'outQuantity',width:165, align:"right", sorttype:'int', sortable:true, formatter: 'integer', formatoptions:{thousandsSeparator:","}},
		   		{name:'inQuantity', index:'inQuantity',width:165, align:"right", sorttype:'int', sortable:true, formatter: 'integer', formatoptions:{thousandsSeparator:","}},
		   		{name:'calculationQuantity', index:'calculationQuantity',width:165, align:"right", sorttype:'int', sortable:true, formatter: 'integer', formatoptions:{thousandsSeparator:","}},
		   		{name:'money', index:'money',width:165, align:"right", sorttype:'int', sortable:true, formatter: 'integer', formatoptions:{thousandsSeparator:","}, summaryType:'sum', summaryTpl: 'Totals :'}
		   	],
		    sortname: 'crateName',
		    sortorder: "asc",
		   	viewrecords: true,
		   	caption: 'test',
		   	height: 'auto',
		    loadonce : true,
		    loadui: false,
			footerrow: true,
			userDataOnFooter : true,
		    loadComplete : function(data){
		    	var moneySum = $("#grid").jqGrid('getCol','money', false, 'sum'); 
				$('#grid').jqGrid('footerData', 'set', { crateName:'합계', money:moneySum });	
					
				/* var widthSum = $('#grid tr:first td:eq(0)').width();
					widthSum += $('#grid tr:first td:eq(1)').width();
					widthSum += $('#grid tr:first td:eq(2)').width();
					widthSum += $('#grid tr:first td:eq(3)').width(); */
							
				/* $('table.ui-jqgrid-ftable td:eq(1)').hide();
				$('table.ui-jqgrid-ftable td:eq(2)').hide();
				$('table.ui-jqgrid-ftable td:eq(3)').hide(); */
				var footer = $("table.ui-jqgrid-ftable tr:first td:eq(0)");	
					footer.css("color", "#2e6e9e");
					//footer.css("text-align", "left");
					//footer.css("width", widthSum);
				$('table.ui-jqgrid-ftable tr:first').children("td").css("background-color", "#dfeffc");
				$('table.ui-jqgrid-ftable tr:first td:eq(0), table.ui-jqgrid-ftable tr:first td:eq(4)').css("padding-top","8px");
				$('table.ui-jqgrid-ftable tr:first td:eq(0), table.ui-jqgrid-ftable tr:first td:eq(4)').css("padding-bottom","8px");
				$('table.ui-jqgrid-ftable tr:first td:eq(4)').append(" \u00A0");
				
		    }
		});

- footer 그리기 (위 소스 참조)

1.

footerrow: true, 

userDataOnFooter : true,

추가한다.

2. colModel 에

{name:'money', index:'money',width:165, align:"right", sorttype:'int', sortable:true, formatter: 'integer', formatoptions:{thousandsSeparator:","}, summaryType:'sum', summaryTpl: 'Totals :'}

파란색 부분을 추가한다.

* 참고사항: sorttype 종류
  int/integer - for sorting integer
  float/number/currency - for sorting decimal numbers
  date - for sorting date
  text - for text sorting

3. loadComplete 에
                var moneySum = $("#calculationTable").jqGrid('getCol','money', false, 'sum');
                $('#calculationTable').jqGrid('footerData', 'set', { crateName:'합계', money:moneySum });

   을 추가한다.

4. jqGrid footer 부분을 클릭한 후 요소검사를 해보면, footer가 새로운 table로 이뤄진것을 알 수 있다.

   이 테이블의 class 명은 table.ui-jqgrid-ftable 이다.

5. 이 클래스명으로 접근하여 아래와 같이 css를 적용할 수 있다.

$('table.ui-jqgrid-ftable tr:first').children("td").css("background-color", "#dfeffc");
$('table.ui-jqgrid-ftable tr:first td:eq(0), table.ui-jqgrid-ftable tr:first td:eq(4)').css("padding-top","8px");
$('table.ui-jqgrid-ftable tr:first td:eq(0), table.ui-jqgrid-ftable tr:first td:eq(4)').css("padding-bottom","8px");

6. 아래 그림과 같이 footer를 병합(colspan)하려면

$('table.ui-jqgrid-ftable td:eq(1)').hide();

$('table.ui-jqgrid-ftable td:eq(2)').hide();
$('table.ui-jqgrid-ftable td:eq(3)').hide();

를 쓰면 된다.

참고로, hide() 가 아닌 remove() 를 쓰니 합계 금액부분이 0 으로 나왔다.

가운데 정렬을 하려면, 

$("table.ui-jqgrid-ftable tr).css("text-align", "center");

혹은

$("table.ui-jqgrid-ftable tr:first td:eq(0)").css("text-align", "center");

하면 된다.

7. 합계 금액부분 뒷 부분에 [11,500] → [11,500   ] 이렇게 여백을 주려고

   padding-right:10px 혹은 padding:10px 를 넣으니, 합계 금액 부분이 밀리면서 화면에서 잘리게 되었다;

   그래서 찾아낸 방법이 ↓

$('table.ui-jqgrid-ftable tr:first td:eq(4)').append(" \u00A0");

   이다. 

   " \f"  도 해봤는데 한 번의 공백(한 번 스페이스를 누른 것 같은..)밖에 들어가지 않았다.