jqGrid的樹形表格：treeGrid
第一個列子
/pages/demo/tree.json
----------------------------------
jsp页面：
/pages/demo/tree.json
----------------------------------
{
"total":11,
"page":1,
"records":11,
"rows":[
{"id":1, "name":"Pandy1", "cell":["第一級1",0,null,false,false]},
{"id":3, "name":"Pandy2", "cell":["第二級1",1,1,true,false]},
{"id":2, "name":"Pandy3", "cell":["第一級2",0,null,true,false]}
]
}
jsp页面：
<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="<c:url value="/pages/org/grid.treegrid.js"/>"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#treegrid").jqGrid({
treeGrid: true,
treeGridModel: 'adjacency',
ExpandColumn: 'name',
ExpandColClick: true,
url: '/pages/demo/tree.json',
datatype: 'json',
colNames: ["管理選項"],
colModel: [
{ name: 'name', index: 'name' }
],
pager: "false",
height: 'auto',
width: '210',
viewrecords: true,
// caption: 'none',
jsonReader: {
root: "rows",
total: "total",
repeatitems: true
}
});
})
;
</script>
</head>
<body>
<table id="treegrid"></table>
<div id="ptreegrid"></div>
</body>
</html>
第二个例子：
<pre class="js" name="code" style="margin-top: 0px; margin-bottom: 1em; padding: 0px; list-style-type: none; font-family: 'Courier New', monospace; font-size: 12px; width: 869.21875px; overflow: auto; color: rgb(51, 51, 51); line-height: 25px; background: rgb(247, 247, 247);">[
{"id":0,"username":"王三1","level":0,"address":"USA","isLeaf":false,"age":20,"expanded":true,"password":"123"},
{"id":1,"username":"王三2","level":1,"address":"USA","isLeaf":false,"age":21,"parent":0,"expanded":true,"password":"123"},
{"id":2,"username":"王三3","level":2,"address":"USA","isLeaf":true,"age":22,"parent":1,"expanded":true,"password":"123"}
]
<pre class="html" name="code" style="margin-top: 0px; margin-bottom: 1em; padding: 0px; list-style-type: none; font-family: 'Courier New', monospace; font-size: 12px; width: 869.21875px; overflow: auto; color: rgb(51, 51, 51); line-height: 25px; background: rgb(247, 247, 247);"><%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="<c:url value="/pages/org/grid.treegrid.js"/>"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery("#treegrid").jqGrid({
treeGrid: true,
treeGridModel: 'adjacency', //treeGrid模式，跟json元數據有關 ,adjacency/nested
ExpandColumn : 'username',
scroll: "true",
url: '/pages/demo/tree1.json',
datatype: 'json',
colNames:['編號','姓名','密碼','年齡','地址','出生日期'],
colModel:[
{name:'id',index:'id', width:90,sorttype:"int"},
{name:'username',index:'username', width:110,sorttype:"int"},
{name:'password',index:'password', width:80},
{name:'age',index:'age', width:80},
{name:'address',index:'address', width:80},
{name:'time',index:'time', width:80,sorttype:"date"}
],
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 // 控制水平滾動條
});
});
</script>
</head>
<body>
<table id="treegrid"></table>
</body>
</html>