jqgrid——treegrid动态异步加载数据
jqgrid的treegrid插件，有两种数据结构：
第一种：可以实现动态加载数据
- {
- "total":11,
- "page":1,
- "records":11,
- "rows":[
- {"id":1, "cell":["第一級1",1,"地址1",0,null,false,false]},
- {"id":3, "cell":["第二級1",3,"地址2",1,1,true,false]},
- {"id":2, "cell":["第一級2",2,"地址3",0,null,true,false]}
- ]
- }
仔细观察在cell数组，我们只定义了4列，非treeGrid时我们返回4列就可以了
但是在adjacency方式我们需要在原本的4列数据之后再增加如下字段数据来支持TreeGrid
adjacency方式：
| 列 | 解释 |
| level_field | 节点的级别，默认最高级为0 |
| parent_id_field | 该行数据父节点的id |
| leaf_field | 是否为叶节点，为true时表示该节点下面没有子节点了 |
| expanded_field | 是否默认展开状态 |
| loaded_field | 是否已经加载过子节点（为false时点击节点会自动加载子节点） |
| icon_field | 图标 |
实例：
tree.jsp:
<html>
<head>
<title> ZTREE DEMO </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" media="screen" href="treeGrid/css/jquery-ui-custom.css" />
<link rel="stylesheet" href="<%=basePath%>treeGrid/css/jquery-ui.theme.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="treeGrid/css/ui.jqgrid.css" />
<script src="<%=basePath%>js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="<%=basePath%>treeGrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="<%=basePath%>treeGrid/js/jquery.jqGrid.src.js" type="text/javascript"></script>
<script src="<%=basePath%>treeGrid/src/grid.treegrid.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery("#list3").jqGrid({
treeGrid: true,
treeGridModel: 'adjacency', //treeGrid模式，跟json元數據有關 ,adjacency/nested
ExpandColumn : 'name',
url: '<%=basePath %>ajax/contract/treeJson1.action',
datatype: 'json',
//mtype: "POST",
ExpandColClick: true,
colNames: ["姓名","id","地址"],
colModel: [
{name: 'name', index: 'name',width:110},
{name:'id',index: 'id',hidden:true},
{name: 'address', index: 'address',width:110}
],
jsonReader: {
root: "rows",
total: "total",
repeatitems: true
},
pager: "false",
caption: "jqGrid 动态(异步)树表格",
height: "auto" // 設为具體數值則會根據實際記錄數出現垂直滾動條
});
});
</script>
</head>
<body>
<div>
<table id="list2"></table>
<div id="pager2"></div>
<hr></hr>
<table id="list3"></table>
</div>
</body>
</html>
注：
1、ExpandColumn : 'name',必须是第一列(貌似是jqgrid的bug)；
2、cell中的内容：后四个属性是固定的分别是：level_field、parent_id_field、leaf_field、expanded_field；前面的属性顺序要和columnModule的顺序一致。
action:
public void treeJson1() {
JSONObject jo =null;
Long nodeId = getLongParameter("nodeid");
Long level = getLongParameter("n_level");
try {
jo = getData1(nodeId,level);
} catch (Exception e) {
logger.error("合同查询失败，" + e);
}
super.renderJson(jo);
}
private JSONObject getData1(Long nodeId,Long level) {
JSONObject jo = new JSONObject();
if (nodeId == null) {//首次
JSONArray ja = new JSONArray();
ja.add("{\"id\":1, \"cell\":[\"-第一級1\",1,\"sdf\",0,null,false,false]}");
//ja.add("{\"id\":2, \"cell\":[\"-第一級2\",2,\"sdf\",1,1,true,false]}");
ja.add("{\"id\":3, \"cell\":[\"-第二級1\",3,\"sdf\",0,null,true,false]}");
jo.put("total", 2);
jo.put("page", 1);
jo.put("records", 2);
jo.put("rows", ja);
} else {
if (nodeId == 1) {
JSONArray ja = new JSONArray();
ja.add("{\"id\":4, \"cell\":[\"-第一級2\",4,\"sdf\",1,1,false,false]}");
ja.add("{\"id\":2, \"cell\":[\"-第一級3\",2,\"sdf\",1,1,true,false]}");
jo.put("total", 2);
jo.put("page", 1);
jo.put("records", 2);
jo.put("rows", ja);
} else if (nodeId == 4) {
JSONArray ja = new JSONArray();
ja.add("{\"id\":5, \"cell\":[\"-第一級5\",5,\"sdf\",2,4,true,false]}");
jo.put("total", 1);
jo.put("page", 1);
jo.put("records", 1);
jo.put("rows", ja);
}
}
return jo;
}
第二种：只能实现同步加载数据，无法实现异步动态加载数据
var lastsel;
jQuery("#list2").jqGrid({
treeGrid: true,
treeGridModel: 'adjacency', //treeGrid模式，跟json元數據有關 ,adjacency/nested
ExpandColumn : 'username',
scroll: "true",
url: 'mydata.json',
datatype: 'json',
colNames:['編號','姓名','密碼','年齡','地址','出生日期'],
colModel:[
{name:'id',index:'id', width:90,sorttype:"int",hidden:true},
{name:'username',index:'username', width:110,sorttype:"int",editable: false},
{name:'password',index:'password', width:80,editable: true},
{name:'age',index:'age', width:80,editable: true},
{name:'address',index:'address', width:80,editable: true},
{name:'time',index:'time', width:80,sorttype:"date",editable: true}
],
onSelectRow: function(id){
if(id && id!==lastsel){
jQuery('#list2').jqGrid('restoreRow',lastsel);
jQuery('#list2').jqGrid('editRow',id,true);
lastsel=id;
}
},
pager: "false",
sortname: 'id',
sortorder: "desc",
jsonReader: {
root: "dataRows",
repeatitems : false
},
treeReader : {
level_field: "level",
parent_id_field: "parent",
leaf_field: "isLeaf",
expanded_field: "expanded"
},
caption: "jqGrid test",
mtype: "POST",
height: "auto", // 設为具體數值則會根據實際記錄數出現垂直滾動條
rowNum : "-1", // 顯示全部記錄
shrinkToFit:false // 控制水平滾動條
});
mydata.json:
[
{"id":0,"username":"王三","level":0,"address":"USA","isLeaf":false,"age":20,"expanded":true,"password":"123","time":11111},
{"id":1,"username":"王三","level":1,"address":"USA","isLeaf":false,"age":21,"parent":0,"expanded":true,"password":"123","time":11111},
{"id":2,"username":"王三","level":2,"address":"USA","isLeaf":true,"age":22,"parent":1,"expanded":true,"password":"123","time":11111}
]