jQuery jqgrid

1.写div

<div class="ibox-content">
  <div class="jqGrid_wrapper">
  　<!– jqGrid数据列表    开始–>
　　<table id="table_list_1"></table>
　　　　<!– jqGrid数据列表    结束–>
　　　　<!– jqGrid翻页导航栏    开始–>
　　<div id="pager_list_1"></div>
　　　　<!– jqGrid翻页导航栏    结束–>
  </div>
</div>

2.引用js，css

bootstrap.min.css

ui.jqgrid.css

jquery.min.js

bootstrap.min.js

jquery.jqGrid.min.js

3.写js

$(function() {
$.jgrid.defaults.styleUI = "Bootstrap";
  //指定表格使用样式风格,不可修改
$("#table_list_1").jqGrid({
       url:’${pageContext.request.contextPath}/roleController/list’,//获取数据的地址,需修改  
       mtype : "POST",  
       contentType : "application/json",  
       datatype : "json",
       page : 1,
       auto true,                       //如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度
       shrinkToFit: true,                     //此属性用来说明当初始化列宽度时候的计算类型，如果为ture，则按比例初始化列宽度。如果为false，则列宽度使用colModel指定的宽度
       rownumbers: true,                      //如果为ture则会在表格左边新增一列，显示行顺序号，从1开始递增。此列名为’rn’.
       rowNum: 10,                            //在grid上显示记录条数，这个参数是要被传递到后台
       rowList: [10, 20, 30],              //一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台
       colNames: ["角色名称" , "角色代码"],//列显示名称，是一个数组对象,需修改
       cellEdit : false,                      //启用或者禁用单元格编辑功能,可修改
       colModel: [//常用到的属性：name 列显示的名称；index 传到服务器端用来排序用的列名称；width 列宽度；align 对齐方式；sortable 是否可以排序
  　　　　　　　　{name: "fRoleName",index: "fRoleName",sortable :false},
  　　　　　　　　{name: "fRoleCode",index: "fRoleCode",sortable :false},
       pager: "#pager_list_1",              //定义翻页用的导航栏，必须是有效的html元素。翻页工具栏可以放置在html页面任意位置,可修改
       viewrecords: true,                   //是否要显示总记录数,可修改
       caption: "角色管理",                         //表格名称,可修改
       hidegrid: false,                     //启用或者禁用控制表格显示、隐藏的按钮，只有当caption 属性不为空时起效,可修改
       multiselect: true,                   //定义是否可以多选,可修改
       multiboxonly:true,                   //只有当multiselect = true.起作用，当multiboxonly 为ture时只有选择checkbox才会起作用,可修改
       jsonReader: {                        //描述json 数据格式的数组,需
　　 　　　　　　　　　　root: ‘list’,
    　　　　　　　　　　page: "current",                   // json中代表当前页码的数据
    　　　　　　　　　　total: "pages",    // json中代表页码总数的数据
    　　　　　　　　　　records: "total",// json中代表数据行总数的数据
    　　　　　　　　　　repeatitems: false,             // 如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素（即可以json中元素可以不按顺序）；而所使用的name是来自于colModel中的name设定。
    　　　　　　　　　　cell: "cell",
    　　　　　　　　　　id: "fRoleId",
    　　　　　　　　　　userdata: "userdata",
   　　　　　　　　　　},

　　　　
       }); 
});

4. 获取jqgrid选中的数据行:

var id = $(‘#jqGridList‘).jqGrid(‘getGridParam‘, ‘selrow‘);  
if (id)  
    return $(‘#jqGridList‘).jqGrid("getRowData", id);  
else  
    return null;  

5.获取jqgrid的所有选中的数据

var grid = $(‘#jqGridList‘);  
var rowKey = grid.getGridParam("selrow");  
  
if (rowKey) {  
    var selectedIDs = grid.getGridParam("selarrrow");  
    for (var i = 0; i < selectedIDs.length; i++) {  
        console.log(selectedIDs[i]);  
    }  
}