分组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>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值