jqGrid表格生成插件

Posted 2020-09-23

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;