分組grid插件jqgrid研究

對jqgrid最主要的研究：自定義統計函數 和 分頁功能的實現

<script type="text/javascript">
//自定義統計函數
//比如我要統計code值爲2的一共有多少條
function mycount(val, name, record)
{
 if(record[name]==2){
    return parseFloat(val||0) + 1;
 }else{
    return parseFloat(val||0);
 }
}
$(document).ready(function() {
  jQuery("#grid").jqGrid({
            url:'<%=dataUrl%>',    //ajax與後臺交互的地址，如："common!exeQuery.do"。返回的數據必須是json格式
            datatype: "json",
            mtype: "POST",
            colNames:[‘代碼’,'名稱'],
            colModel:[
                              {name:'code',index:'code', width:55, editable:true, sorttype:'int',summaryType:mycount, summaryTpl : '({0}) 條'},    //自定義統計函數不需要加單引號
                              {name:'name',index:'name', width:55, editable:true, sorttype:'int',summaryType:'count', summaryTpl : '({0}) 條'}    //jqgrid支持的統計函數，需加單引號
                              ], 
            rowNum:10,
            rowList:[10,20,30,50,100],
            height: 'auto',
            pager: '#plist',
            pagerpos: 'left',
            pgtext: "第 {0} 頁  共 {1} 頁",                                     //實現中文分頁功能
            recordtext: "顯示{0}到{1},共{2}條數據",
            prmNames:{page:"pageNum",rows:"limit" },
            onPaging:function(){                                                   //分頁事件                   
            var url = $("#grid").getGridParam("url"); 
                if(url.substr(url.length-8)=='&start=1'){
                    url = url.substr(0,url.length-8);                   
                }                          
                $("#grid").setGridParam({url:url,postData : {"start": ($("#grid").getGridParam("rowNum")*($("#grid").getGridParam("page")-1)+1)} }).trigger("reloadGrid"); 
            },            
            sortname: 'sourcenotecode',
            viewrecords: true,
            sortorder: "desc",
            multiselect:"true",
            grouping: true,
            groupingView : {
                groupField : ['sourcenotecode'],
                groupSummary : [true],
                showSummaryOnHide : [true],
                groupColumnShow : [true],
                groupText : ['<b>{0}</b>'],
                groupCollapse : false,
                groupOrder: ['asc'],
                groupDataSorted : true
            },
            jsonReader: {
                repeatitems: false,
                total: function(obj) {                                 //後臺傳過來一個總記錄數“totalCount”，jqgrid根據總記錄數 和 每頁顯示記錄數 統計總頁數
                  if((obj.data.totalCount)%($("#grid").getGridParam("rowNum"))>0){
                 return parseInt((obj.data.totalCount)/($("#grid").getGridParam("rowNum")))+1;
                  }else{
                 return (obj.data.totalCount)/($("#grid").getGridParam("rowNum"));
                  }                  
                }, 
                records: function(obj) {
                  return obj.data.totalCount;
                }, 
                root: function(obj) {
                  return obj.data.listData;
                }               
            },
        });
    });

//集成查詢功能，$('#queryForm').getValue()獲得查詢表單的值，該值格式如：{‘code’:'value','name','value'}
var exeComQuery = function() {
jQuery("#grid").jqGrid('setGridParam', {url: '<%=dataUrl%>', postData : $('#queryForm').getValue(),page:1 }).trigger("reloadGrid"); 
};
</script>