对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>
分组grid插件jqgrid研究
最新推荐文章于 2019-05-28 07:22:41 发布