前面已经可以将静态数据展示到表格里了，接下来，将对行处理，使得点击行头第一列的时候， 可以出现二级表格，如
这里主要就是在生成表格的时候给它加个事件定义：
subGridRowExpanded: function(subgrid_id, row_id){}
在事件里面可以再次照着表格定义的内容，生成子级表格，这样打开后就可以出现二级表格了。
同时，鉴于此，这里也可以通过动态获取数据来动态加载控制起来。上面的是静态数据，其实，只要通过异步加载，获取到要加载的数据之后，后面的操作也就一样的了。
参考代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数据展示,分3级，点击展开下一级子表格的demo</title>
<% String base = request.getContextPath(); %>
<link id="uiThemes" rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<!-- 引入jQuery -->
<script src="<%=base %>/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<%-- <script src="<%=base %>/js/jquery-ui-1.10.2.min.js" type="text/javascript"></script> --%>
<script src="<%=base %>/js/grid.locale-cn.js" type="text/javascript"></script>
<script src="<%=base %>/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script>
//定义数据源
var mydata = [
{id:"1",userName:"polaris",gender:"男",email:"fef@163.com",QQ:"33334444",mobilePhone:"13223423424",birthday:"1985-10-01"},
{id:"2",userName:"李四",gender:"女",email:"faf@gmail.com",QQ:"222222222",mobilePhone:"13223423",birthday:"1986-07-01"},
{id:"3",userName:"王五",gender:"男",email:"fae@163.com",QQ:"99999999",mobilePhone:"1322342342",birthday:"1985-10-01"},
{id:"4",userName:"马六",gender:"女",email:"aaaa@gmail.com",QQ:"23333333",mobilePhone:"132234662",birthday:"1987-05-01"},
{id:"5",userName:"赵钱",gender:"男",email:"4fja@gmail.com",QQ:"22222222",mobilePhone:"1343434662",birthday:"1982-10-01"},
{id:"6",userName:"小毛",gender:"男",email:"ahfi@yahoo.com",QQ:"4333333",mobilePhone:"1328884662",birthday:"1987-12-01"},
{id:"7",userName:"小李",gender:"女",email:"note@sina.com",QQ:"21122323",mobilePhone:"13220046620",birthday:"1985-10-01"},
{id:"8",userName:"小三",gender:"男",email:"oefh@sohu.com",QQ:"242424366",mobilePhone:"1327734662",birthday:"1988-12-01"},
{id:"9",userName:"孙先",gender:"男",email:"76454533@qq.com",QQ:"76454533",mobilePhone:"132290062",birthday:"1989-11-21"}
];
var url = "<%=request.getContextPath()%>/GetDataServlet";
var obj = new Object();
var data = new Object();
$.post(
url,
function(result){
obj = strToJson(result);
if(obj!=null){
data =obj.rows;
createJQGrid();
}
}
);
function strToJson(str){
var json = eval('(' + str + ')');
return json;
}
function createJQGrid(){
$("#gridTable").jqGrid({
url:url,
datatype: "json", //数据类型
mtype:"GET",//提交方式
height: 250,
colNames:['编号','用户名', '邮箱', '年龄','昵称','操作'], //相当于展现列表的//显示名称
colModel:[ //列定义，name定义的是对应于数据源的key标示，index对应的则是传到服务器断用来排序用的列名称
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'username',index:'userName', width:90},
{name:'nickname',index:'nickname', width:100} ,
{name:'email',index:'email', width:125,sorttype:"string"},
{name:'age',index:'age', width:100} ,
{name:'actions', index:'actions', width:80, align:'left', sortable:false,
formatter:function(cellvalue,options,rowObject){
if(cellvalue == null ||cellvalue==""){
return "";
}
return "<a href='" + cellvalue + "' target='_blank'>查看</a>";
}
}
],
sortname:'id',//按这个字段排序
sortorder:'asc',//升序
viewrecords:true,//定义是否要显示总记录数
rowNum:10, //在grid上显示记录条数，这个参数会传到后台去
rowList:[10,20,30], //可选的每页多少记录
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
$("#"+subgrid_table_id).jqGrid({
datatype: "local",
colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'userName',index:'userName', width:90},
{name:'gender',index:'gender', width:90},
{name:'email',index:'email', width:125,sorttype:"string"},
{name:'QQ',index:'QQ', width:100},
{name:'mobilePhone',hidden:false,index:'mobilePhone', width:120},
{name:'birthday',index:'birthday', width:100, sorttype:"date"}
],
rownumbers: false,
multiselect: false,
viewrecords: true,
rowNum:100,
height: '100%', // deleteSuspectedItem
width: '100%',
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id){
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
$("#"+subgrid_table_id).jqGrid({
datatype: "local",
colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'userName',index:'userName', width:90},
{name:'gender',index:'gender', width:90},
{name:'email',index:'email', width:125,sorttype:"string"},
{name:'QQ',index:'QQ', width:100},
{name:'mobilePhone',hidden:false,index:'mobilePhone', width:120},
{name:'birthday',index:'birthday', width:100, sorttype:"date"}
],
rownumbers: false,
multiselect: false,
viewrecords: true,
rowNum:100,
height: '100%', // deleteSuspectedItem
width: '100%'
});
for(var i=0;i<=mydata.length;i++)
jQuery("#"+subgrid_table_id).jqGrid('addRowData',i+1,mydata[i]);
}
});
for(var i=0;i<=mydata.length;i++)
jQuery("#"+subgrid_table_id).jqGrid('addRowData',i+1,mydata[i]);
},
subGridRowColapsed: function(subgrid_id, row_id) {
},
pager:"#gridPager", //定义翻页用的导航栏，必须是有效的html元素，翻页工具栏位置可以防止在//任意位置
caption: "第一个jqGrid例子" //表格头的名称
}).navGrid('#gridPager',{edit:false,add:false,del:false});
for(var i=0;i<=data.length;i++)
jQuery("#gridTable").jqGrid('addRowData',i+1,data[i]);
}
</script>
<style>
p{
color:red;
}
</style>
</head>
<body>
<!-- jqGrid的table -->
<table id="gridTable"></table>
<!-- 翻页的div -->
<div id="gridPager"></div>
<br/>
</body>
</html>
经过测试，发现，jqgrid这个最多只能到16级子表格，不过也肯定是够用了
扫一扫
682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
