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');
 }