jqgrid的使用

1.在页面上引入css和js文件


css:


<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />
  
<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/ui.jqgrid.css" />
  
<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.css" />


js：


<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
  
<script src="js/src/grid.loader.js" type="text/javascript"></script>
  
2.在页面上定义一个div用来装jqgrid表格


<table id="jqGrid"></table>     -----这个是表格（和js里的最上方相对应）
<div id="jqGridPager"></div>    -----这个是翻页（和js里的pager相对应）


3.在js中


$(function() {


$("#jqGrid")
.jqGrid(
{
url : '../sys/user/listRole',     -----获取数据的地址
datatype : "json",                -----从服务器端返回的数据类型
colModel : [


{
label : '用户ID',
name : 'userId',
index : 'userId',
hidden : true,
width : 30,
key : true
},

{
label : '操作',
name : 'roleOperation',
sortable:false,
width : 50,
formatter : function(value, options, row) {
return "<button οnclick=cellClcik("
+ row.userId
+ ")>角色维护</button>"

}
},
{
label : '状态',
name : 'status',
index : 'status',
width : 35,
formatter : function(value, options, row) {
return value == 0 ? '<span class="label label-danger">禁用</span>'
: '<span class="label label-success">正常</span>';
}
}, {
label : '创建时间',
name : 'createTime',
index : 'createTime',
width : 100
} ],
viewrecords : true,   -----定义是否要显示总记录数
height : $(window).height()-96,    -------表格高度，可以是数字、像素值、百分比
rowNum : 10,    ----在grid上显示记录条数，要传到后台
rowList : [ 10, 30, 50 ],  ------一个下拉选择框，用来改变显示记录数，当选择时会覆盖runNum传递到后台。
rownumbers : true,   ------会在表格左侧显示一列，用来显示序号
rownumWidth : 25,   ------为真，设置column宽度
width : window.screen.availWidth - 260,
autowidth : false,
shrinkToFit : true,
multiselect : true,
pager : "#jqGridPager",   ----定义翻页用的导航栏，必须是有效地HTML元素；翻页工具栏可以放在页面的任意位置
jsonReader : {   从控制层返回的数据，进行赋值
root : "page.list",
page : "page.currPage",
total : "page.totalPage",
records : "page.totalCount"
},
prmNames : {  ------传送到控制层
page : "page",
rows : "limit",
sort : "sort",// 需要排序的列
order : "order"
},
gridComplete : function() {
var total = $("#jqGrid").jqGrid('getGridParam',
'records');
if (total == 0) {
alert("不存在该条数据，请正确输入查询条件");
}
// 隐藏grid底部滚动条
$("#jqGrid").closest(".ui-jqgrid-bdiv").css({
"overflow-x" : "hidden"
});


}
});
});