下载与配置
官方网站: http://www.jqgrid.com/
官方下载：http://www.trirand.com/blog/?page_id=6
官方文档：http://www.trirand.com/blog/jqgrid/jqgrid.html
中文文档：http://blog.mn886.net/jqGrid/
官方网站下载需要版本的压缩包，解压将关键文件复制到一个新建的jqgrid文件夹，如下图所示：
由于jqgrid是基于jquery-ui的，所以需要在使用的界面引用上图所示三个文件以外，同时还要引用jquery.js、jquery-ui.js和jquery-ui.css。
基本应用
在界面上，需要两个基本元素：
在JS中，需要获取jqGrid对象，并执行jqGrid的方法：
其中options包含了基本参数设置和函数，内容较多可参见官方文档：
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
实例Demo
源代码可参见：region_main.jsp
HTML代码：
<table
id="grid"
width="100%"></table>
<div
id="pager"></div>
JS代码：
$("#grid").jqGrid({
url:basePath +
‘/userregion/querypageview‘,
datatype:"json",
mtype:‘POST‘,
postData:{"regionId": -1},
//
列名（表头）
colNames:[‘人员ID‘,
‘姓名‘,
‘职务‘,
‘域账号名‘,
‘角色‘,
‘入职时间‘,
‘操作‘],
colModel:[//这里会根据index去解析jsonReader中root对象的属性，填充cell
{name:‘userRegionMappingId‘,index:‘userRegionMappingId‘, width:10, align:"left",
sortable:false},
{name:‘userName‘, index:‘userName‘, width:100, align:"left",
sortable:false},
{name:‘domainInfo‘, index:‘domainInfo‘, width:70, align:"center",sortable:false},
{name:‘domainName‘, index:‘domainName‘, width:100,align:"left",sortable:false},
{name:‘postion‘, index:‘postion‘, width:70, align:"center",sortable:false},
{name:‘joinDate‘, index:‘joinDate‘, width:130, align:"center",sortable:false,formatter:"date",formatoptions:{srcformat:‘Y-m-d
H:i:s‘,newformat:‘Y-m-d H:i:s‘}},
{name:‘act‘, index:‘act‘, width:120, align:"center",sortable:false}
],
width:‘auto‘,
// 数字&‘auto‘,‘100%‘
height:‘300‘,
rowNum:10,
// 每页记录数
rowList:[10,20,50],
// 每页记录数可选下拉列表
pager:‘#pager‘,
// 分页标签div的id
//显示记录数信息，若设为false,下面不会显示 recordtext: "第{0}到{1}条,
共{2}条记录",
//默认显示为{0}-{1}
共{2}条 scroll: false, //滚动翻页，设置为true时翻页栏将不显示
viewrecords:true,
/**这里是排序的默认设置，这些值会根据列表header点击排序时覆盖*/
sortable:false,
sortname:‘userRegionMappingId‘,
sortorder:"desc",
rownumbers:true,//设置列表显示序号,需要注意在colModel中不能使用rn作为index
rownumWidth:20,
//设置显示序号的宽度，默认为25
multiselect:true,
// 是否多选，默认false
//在点击表格row时只支持单选，只有当点击checkbox时才多选，需要multiselect=true是有效
multiboxonly:true,
caption:"区域人员列表",
// 列表标题
jsonReader:{ repeatitems :
false},
//server返回Json解析设定
gridComplete: function(){
// 隐藏列
jQuery("#grid").jqGrid(‘hideCol‘,
"userRegionMappingId");
//
自定义列（按钮）
var ids = jQuery("#grid").jqGrid(‘getDataIDs‘);
for (
var i = 0; i <ids.length; i++) {
var rowid = ids[i];
editstr=
"<inputstyle=‘height:25px;width:45px;‘ type=‘button‘ value=‘edit‘ onclick=‘edit(" + rowid +
");‘ />";
movestr=
"<inputstyle=‘height:25px;width:45px;‘ type=‘button‘ value=‘move‘ onclick=‘move(" + rowid +
");‘ />";
jQuery("#grid").jqGrid(‘setRowData‘, ids[i], { act :editstr +
" " + movestr });
}
}
});
常用方法和代码
// 当前页码
var curpagenum = $("#grid").jqGrid(‘getGridParam‘,‘page‘);
// 当前页一共有多少行(当前页实际显示了多少行记录)
var rowListNum = $("#grid").jqGrid(‘getGridParam‘,‘records‘);
// 获取每页可以显示的记录数(即: select框中的10,20,30)
var rowListNum = $("#grid").jqGrid(‘getGridParam‘,‘rowNum‘);
//$("#grid").jqGrid(‘setCaption‘, "XXXX")设置列的标题
//$("#grid").setGridParam({参数名1：参数1，参数名2：参数2，...})
设置参数
//$("#grid").trigger("reloadGrid")重新加载列表（重设之后需要reload才能显示）
$("#grid").jqGrid(‘setCaption‘, regionName +
"人员列表").setGridParam({
postData:{"regionId": regionId,
"userName": userName}
}).trigger("reloadGrid");
// 获取选中行id集合
var ids = $("#grid").jqGrid(‘getGridParam‘,‘selarrrow‘);
var rowDatas =
newArray();
for(vari = 0; i < ids.length; i++){
//
获取指定id行数据
var rowData = jQuery("#grid").jqGrid(‘getRowData‘,
ids[i]);
rowDatas.push(rowData);
}
//隐藏员工列表标题
$("#grid").closest(".ui-jqgrid-view").find("div.ui-jqgrid-titlebar").hide();
//隐藏员工列表表头
$("#grid").closest(".ui-jqgrid-view").find("div.ui-jqgrid-hdiv").remove();
更多资料，请直接访问上文所述相关网站，或直接与作者联系。
版权声明：本文为博主原创文章，未经博主允许不得转载。