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,

       autowidth: 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]);

    }

}