jqGrid学习记录

1、需要引入jqGrid相关的css和js

<link rel="stylesheet" type="text/css" href="../pub/script/jquery/jqgrid/css/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" href="../pub/script/jquery/jqgrid/css/ui.jqgrid.css"/>
<script type="text/javascript" src="../pub/script/jqgrid/grid.locale-cn.js"></script><script type="text/javascript" src="../pub/script/jqgrid/jquery.jqGrid.min.js"></script>

2、body里写div来显示

 <div id="tableDiv">
        <table id="jqgridTable"></table>
        <div id="jqgridPager"></div>
 </div>

3、根据后台组装的json数据用jqGrid显示

$("#jqgridTable").jqGrid({
             colModel : [
                 {name : 'userId',label : '会员id',width : '8%',align : 'center',sortable : true,hidden:true},
                 {name : 'name',label : '姓名',width : '8%',align : 'center',sortable : true},
                 {name : 'tel',label : '手机号',width : '10%',align : 'center',sortable : true},
                 {name : 'account',label : '钱包（元）',width : '8%',align : 'center',sortable : true},
                 {name : 'yxqxhh',label : '有期限小红花',width : '10%',align : 'center',sortable : true},
                 {name : 'yxqxhq',label : '有期限小红旗',width : '10%',align : 'center',sortable : true},
                 {name : 'yxqzhx',label : '有期限智慧星',width : '10%',align : 'center',sortable : true},
                 {name : 'rhp',label : '润喉片',width : '10%',align : 'center',sortable : true},
                 {name : 'wxqxhh',label : '无期限小红花',width : '10%',align : 'center',sortable : true},
                 {name : 'wxqxhq',label : '无期限小红旗',width : '10%',align : 'center',sortable : true},
                 {name : 'wxqzhx',label : '无期限智慧星',width : '10%',align : 'center',sortable : true}
            ],
            height : 362,
            altRows : true,
            altclass : 'myClass',
            width : $("#tableDiv").width(),
            multiselect : false,
            datatype : 'json',
            jsonReader : {
                repeatitems : false
            },
            mtype : 'post',
            url : "${ctx}/integral/integralWalletManage/searchInfo.action",
            scroll: false,
            pager : '#jqgridPager',
            rowNum : 12,
            viewrecords : true,
            gridComplete : function(){
                $("input[type=button]").attr("disabled",false);
            }
        });

4、定义表格显示样式

<style type="text/css">
    /*表格显示斑马条纹*/
    .myClass{
        font-weight : bold;
        background-image: url(${wctx}/pub/style/default/image/zt_bg.gif);
    }
    </style>

5、获取点击行的id

//获取单行选择id
var selectId = $("#jqgridTable").getGridParam("selrow");

//获取选中多行的id  （得到的是id数组）
var selectId = $("#jqgridTable").getGridParam("selarrrow");

6、刷新表格

jQuery("#jqgridTable").trigger("reloadGrid");

7、计算一列的和

//列名getWalletno，计算getWalletno一列的和
gridComplete : function(){
      jQuery(this).getCol('getWalletno',false,'sum');
 }