1、head中加入引用
  • css文件引入：
<link type="text/css" rel="stylesheet" href="jqGrid/themes/cupertino/jquery-ui-1.9.0.custom.min.css">
<link type="text/css" rel="stylesheet" href="jqGrid/themes/ui.jqgrid.css">
  • js文件引入：
<script type="text/javascript" src="jquery-1.8.2.min.js" />
<script type="text/javascript" src="jqGrid/js/jquery-ui-1.9.0.custom.min.js"/>
<script type="text/javascript" src="jqGrid/js/i18n/grid.locale-cn.js"/>
<script type="text/javascript" src="jqGrid/js/jquery.jqGrid.min.js"/>
2、body中的代码
1 <!-- jqGrid table list -->
2 <table id="list"></table>
3 <!-- jqGrid 分页 div gridPager -->
4 <div id="gridPager"></div>

 

3、js中的代码
 1 复制代码
 2 $(document).ready(function(){
 3     $("#list").jqGrid({
 4         url: "", 　　//表格数据请求url
 5         datatype:"json", //数据格式
 6         mtype:"POST",//提交方式
 7         height:420,//高度，表格高度。可为数值、百分比或\'auto\'
 8         //width:1000,//这个宽度不能为百分比
 9         autowidth:true,//自动宽
10         colNames:[\'添加日期\', \'手机号码\', \'银行卡号\',\'备注\',\'操作\'],　　//表格对应的列
11         colModel:[
12             //{name:\'id\',index:\'id\', width:\'10%\', align:\'center\' },
13             {name:\'createDate\',index:\'createDate\', width:\'20%\',align:\'center\'},
14             {name:\'phoneNo\',index:\'phoneNo\', width:\'15%\',align:\'center\'},
15             {name:\'cardNo\',index:\'cardNo\', width:\'20%\', align:"center"},
16             {name:\'remark\',index:\'remark\', width:\'35%\', align:"left", sortable:false},
17             {name:\'del\',index:\'del\', width:\'10%\',align:"center", sortable:false}
18         ],
19         rownumbers:true,　　//添加左侧行号
20         //altRows:true,　　//设置为交替行表格,默认为false
21         //sortname:\'createDate\',　　//需要排序的列
22         //sortorder:\'asc\',　　　　//升序，降序
23 　　　　　multiselect: true,//定义是否可以多选
24 　　　　　multiboxonly: true,//只有当multiselect = true起作用,当multiboxonly 为ture时选择checkbox才会起作用
25 　　     viewrecords: true,//是否在浏览导航栏显示记录总数 
26         rowNum:15,//每页显示记录数
27         rowList:[15,20,25],//用于改变显示行数的下拉列表框的元素数组。
28         jsonReader:{
29 　　　　　　　　//对应Page实体类里面的属性　　　　　　　　
30 　　　　　　　　root: "entities",　　//数据集合
31 　　　　　　　　page: "page",　　　　//当前页
32 　　　　　　　　total: "total",　　　//总页数
33 　　　　　　　　records: "records",　//总行数
34 　　　　　　　　repeatitems: false
35 　　　　　},
36 　　　　　pager:　$(\'#gridPager\'),
37 　　}); 
38 });

 

4、常用的表格操作

　　1.刷新表格

$("#list").jqGrid(\'setGridParam\', {
                url: "${ctx}/product/list.jhtml",
                postData: {
                    \'proId\': pro_id
                }, //发送数据
                page: 1
}).trigger("reloadGrid"); //重新载入

　　2.获取表格数据

　　　　获取选择一行的id，如果你选择多行，那下面的id是最后选择的行的id：

　　　　　　var id=$(‘#list’).jqGrid(‘getGridParam’,\’selrow’);

　　　　如果想要获取选择多行的id，那这些id便封装成一个id数组，那可以使用以下：

　　　　　　var ids=$(‘#list’).jqGrid(‘getGridParam’,\’selarrrow’);

　　　　如果想获取选择的行的数据，只要传入rowId即可，如下：

　　　　　　var rowData = $(“#list”).jqGrid(‘getRowData’,rowId);

　　　　而这个rowData是一个对象，如果要获取选择的行的这个对象的属性值，如name的值，需如下：当然你这个对象得有name这个属性才行。

　　　　　　var rowName=rowData.name;

　　　　

版权声明：本文为funnyb0y原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/funnyb0y/p/7052807.html