第一個列子
/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>