最近接触到jqGrid这个插件，自己用了下，感觉还是比较方便，基于配置项来进行操作，下面就简单的记录初次使用的过程.
jqGrid文档：http://www.trirand.com/blog/jqgrid/jqgrid.html
这个文档比较重要，里面也有很大例子，可以参考下，下载好zip包后，然后导入到工程中，如下图所示
然后新建一个页面，来进行测试工作，新建的页面只需要创建一个table就可以了，其他的标签都可以不用写，如：
<table id="grid_id"></table>
这样就可以了，当然如果需要分页，那么还可以添加一个分页的div，如：
<div id="pager"></div>
这下body部分就完工了，就要开始将jqgrid的渲染到刚刚创建的table中，其实就是一些基础的配置信息，如表头啊，字段名称啊，外观显示等等，具体如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="js/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/ui.jqgrid.css" />
<script src="js/grid.locale-cn.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#grid_id").jqGrid({
url:'getUserList',
datatype: 'json',
mtype: 'GET',
colNames:['学号','姓名', '性别','出生日期','年龄','备注'],
colModel :[
{name:'xh', index:'xh',editable:true},
{name:'xm', index:'xm',editable:true},
{name:'xb', index:'xb', align:'right',editable:true},
{name:'csrq', index:'csrq', align:'right',editable:true},
{name:'nl', index:'nl', align:'right',editable:true},
{name:'bz', index:'bz', sortable:false,editable:true}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'xh',
sortorder: 'desc',
viewrecords: true,
caption: 'My first grid',
autowidth:true,
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords",
repeatitems: false,
id: "0"
},
subGrid:true,
onSelectRow: function(ids) {
if(ids != null) {
$("#grid_id").jqGrid("toggleSubGridRow",ids); //这里在选中的时候触发表格扩展
}else{
alert("没有选择行!");
}
},
subGridRowExpanded:function(subgrid_id,row_id){
console.log(subgrid_id + " " + row_id);
createSubGrid(subgrid_id,row_id);
}
});
/**
*
* 创建子表
**/
function createSubGrid(subgrid_id,row_id){
var tableHtml = "<table id="+subgrid_id+"_t></table>";
$("#" + subgrid_id).html(tableHtml);
//根据ID行来获取该行的数据
var rowData=jQuery("#grid_id").jqGrid('getRowData',row_id);
console.log(rowData);
//通过getGridParam方法来获取对应参数信息
var colNames= jQuery("#grid_id").jqGrid('getGridParam','colNames');
console.log("colNames:" + colNames);
var str = "";
for(var i = 0;i<colNames.length;i++){
if(colNames[i] ==""){
continue;
}
str +=colNames[i];
if(i < colNames.length-1){
str += ",";
}
}
console.log("str:" + str );
var colModels = $("#grid_id").jqGrid('getGridParam','colModel');
console.log(colModels);
$("#" + subgrid_id + "_t").jqGrid({
colNames:colNames,
colModel:colModels
});
jQuery("#" + subgrid_id + "_t").jqGrid('addRowData',0,rowData);
}
var parameters = {
caption:'新增',
buttonicon:'ui-icon-plus',
onClickButton:function(){
alert(3);
},
position: "last",
title:"新增",
cursor: "pointer"
};
//jQuery("#grid_id").navGrid("#pager").navButtonAdd("#pager",parameters);
jQuery("#grid_id").jqGrid('navGrid',"#pager").jqGrid('navButtonAdd',"#pager",parameters);
});
</script>
</head>
<body>
<table id="grid_id"></table>
<div id="pager"></div>
</body>
</html>
部分配置说明：
- pager：指定分页控件，采用jquery选择器的形式
- rowList: 一个每页显示多少条的下拉框，可以更改每页显示的记录数
- jsonReader ： 定义读取服务器返回的数据格式，跟extjs类似
- subGrid： 这个比较关键，默认是false，设置为true之后，可以查看子表格数据
- onSelectRow： 鼠标点击行的时候触发的事件，当然也可以双击:ondblClickRow
- $("#grid_id").jqGrid("toggleSubGridRow",ids)： 这个是单击的时候展开子表格的事件，toggle就是来回切换
- subGridRowExpanded： 展开子表格的时候触发的事件，可以在这里创建子表格，包括数据来源，表头等信息，当然也可以通过配置subGridUrl和subGridModel来加载
- jQuery("#grid_id").jqGrid('getGridParam','colNames'); 通过getGridParam这个方法来获取对应的数据，比如colNames，colModel等。
对于表格下面的按钮，jqGrid是帮我们实现了界面，但是需要配置对应的URL，比如editUrl，然后才能进行修改操作。