-
【部分函數和屬性介紹】
- 核心:zTree(setting, [zTreeNodes])
這個函數接受一個JSON格式的數據對象setting和一個JSON格式的數據對象zTreeNodes,從而建立 Tree。
- 核心參數:setting
zTree 的參數配置都在這里完成,簡單的說:樹的樣式、事件、訪問路徑等都在這里配置
setting 舉例:
- var setting = {
- showLine: true,
- checkable: true
- };
核心參數:zTreeNodes
zTree 的全部節點數據集合,采用由JSON對象組成的數據結構,簡單的說:這里使用Json格式保存了樹的所有信息
zTreeNodes的格式分為兩種:利用Json格式嵌套體現父子關系和Array簡單格式
①帶有父子關系的標准 zTreeNodes 舉例:
- var zTreeNodes = [
- {"id":1, "name":"test1", "nodes":[
- {"id":11, "name":"test11", "nodes":[
- {"id":111, "name":"test111"}
- ]},
- {"id":12, "name":"test12"}
- ]},
- ......
- ];
②帶有父子關系的簡單 Array 格式(isSimpleData)的 zTreeNodes 舉例:
- var treeNodes = [
- {"id":1, "pId":0, "name":"test1"},
- {"id":11, "pId":1, "name":"test11"},
- {"id":12, "pId":1, "name":"test12"},
- {"id":111, "pId":11, "name":"test111"},
- ......
- ];
①在頁面引用zTree的js和css:
- <!-- ZTree樹形插件 -->
- <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css" type="text/css">
- <!-- <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css" type="text/css"> -->
- <script type="text/javascript" src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script>
②在script腳本中定義setting和zTreeNodes
- var setting = {
- isSimpleData : true, //數據是否采用簡單 Array 格式,默認false
- treeNodeKey : "id", //在isSimpleData格式下,當前節點id屬性
- treeNodeParentKey : "pId", //在isSimpleData格式下,當前節點的父節點id屬性
- showLine : true, //是否顯示節點間的連線
- checkable : true //每個節點上是否顯示 CheckBox
- };
- var treeNodes = [
- {"id":1, "pId":0, "name":"test1"},
- {"id":11, "pId":1, "name":"test11"},
- {"id":12, "pId":1, "name":"test12"},
- {"id":111, "pId":11, "name":"test111"},
- ];
③在進入頁面時生成樹結構:
- var zTree;
- $(function() {
- zTree = $("#tree").zTree(setting, treeNodes);
- });
④最后查看效果:

【實例二】(從后台獲取簡單格式Json數據)
①后台代碼封裝簡單格式Json數據:
- public void doGetPrivilegeTree() throws IOException{
- String s1 = "{id:1, pId:0, name:\"test1\" , open:true}";
- String s2 = "{id:2, pId:1, name:\"test2\" , open:true}";
- String s3 = "{id:3, pId:1, name:\"test3\" , open:true}";
- String s4 = "{id:4, pId:2, name:\"test4\" , open:true}";
- List<String> lstTree = new ArrayList<String>();
- lstTree.add(s1);
- lstTree.add(s2);
- lstTree.add(s3);
- lstTree.add(s4);
- //利用Json插件將Array轉換成Json格式
- response.getWriter().print(JSONArray.fromObject(lstTree).toString());
- }
②頁面使用Ajax獲取zTreeNodes數據再生成樹
- var setting = {
- isSimpleData : true, //數據是否采用簡單 Array 格式,默認false
- treeNodeKey : "id", //在isSimpleData格式下,當前節點id屬性
- treeNodeParentKey : "pId", //在isSimpleData格式下,當前節點的父節點id屬性
- showLine : true, //是否顯示節點間的連線
- checkable : true //每個節點上是否顯示 CheckBox
- };
- var zTree;
- var treeNodes;
- $(function(){
- $.ajax({
- async : false,
- cache:false,
- type: 'POST',
- dataType : "json",
- url: root+"/ospm/loginInfo/doGetPrivilegeTree.action",//請求的action路徑
- error: function () {//請求失敗處理函數
- alert('請求失敗');
- },
- success:function(data){ //請求成功后處理函數。
- alert(data);
- treeNodes = data; //把后台封裝好的簡單Json格式賦給treeNodes
- }
- });
- zTree = $("#tree").zTree(setting, treeNodes);
- });
③最后顯示效果


