首页 > 代码库 > jqGrid表格生成插件

jqGrid表格生成插件

1、head中加入引用
  • css文件引入:
<link type="text/css" rel="stylesheet" href="http://www.mamicode.com/jqGrid/themes/cupertino/jquery-ui-1.9.0.custom.min.css">
<link type="text/css" rel="stylesheet" href="http://www.mamicode.com/jqGrid/themes/ui.jqgrid.css">
  • js文件引入:
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.8.2.min.js" />
<script type="text/javascript" src="http://www.mamicode.com/jqGrid/js/jquery-ui-1.9.0.custom.min.js"/>
<script type="text/javascript" src="http://www.mamicode.com/jqGrid/js/i18n/grid.locale-cn.js"/>
<script type="text/javascript" src="http://www.mamicode.com/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 = http://www.mamicode.com/$(“#list”).jqGrid(‘getRowData’,rowId);

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

      var rowName=rowData.name;

    

jqGrid表格生成插件