【SaaS - Export專案】15 - zTree樹形選單入門使用（json格式）-有解無憂

文章目錄

- zTree介紹
- zTree樹形組件入門使用
- - 1. 將下載好的zTree檔案的css、js檔案拷貝到專案的web模塊中去，
  - 2. 選擇自己需要的型別的html進行修改
  - 3. 主要引數介紹**setting、zTree **
  - 4. 一個顯示樹形圖的案例jsp
  - 5. 從后臺controller傳輸資料顯示【***】

zTree介紹

zTree 是一個依靠的核心代碼，實作一套能完成大部分常用功能的 Tree 插件（樹插件），
在使用的時候，先匯入jquery才能匯入zTree
專門適合專案開發，尤其是樹狀選單、樹狀資料的Web顯示、權限管理等待

github地址：https://gitee.com/zTree/zTree_v3
在線檔案學習：http://www.treejs.cn/v3

Ztree的功能特色

優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點，
? 兼容 IE、FireFox、Chrome 等瀏覽器
? 在一個頁面內可同時生成多個 Tree 實體
? 支持 JSON 資料
? 支持一次性靜態生成和 Ajax 異步加載兩種方式
? 支持多種事件回應及反饋
? 支持 Tree 的節點移動、編輯、洗掉
? 支持任意更換皮膚 / 個性化圖示（依靠css）
? 支持極其靈活的 checkbox 或 radio 選擇功能
? 簡單的引數配置實作靈活多變的功能

在這里插入圖片描述

zTree樹形組件入門使用

步驟：
第一步：拷貝zTree的css/js檔案到專案中
第二步：拷貝js匯入到當前頁面
第三步：頁面定義顯示樹的區域

1. 將下載好的zTree檔案的css、js檔案拷貝到專案的web模塊中去，

在這里插入圖片描述

2. 選擇自己需要的型別的html進行修改

這里我用最簡單的ztree.html進行修改
這個ztree.html它的資料格式是json

        var zNodes =[
            { id:1, pId:0, name:"pNode 1", open:true},
            { id:11, pId:1, name:"pNode 11"},
            { id:111, pId:11, name:" sNode 111"},
            { id:112, pId:11, name:"sNode 112"},
            { id:113, pId:11, name:"sNode 113"},
            { id:114, pId:11, name:"sNode 114"},
            { id:12, pId:1, name:"pNode 12"},
            { id:121, pId:12, name:"sNode 121"},
            { id:122, pId:12, name:"sNode 122"},
            { id:123, pId:12, name:"sNode 123"},
            { id:124, pId:12, name:"sNode 124"},
            { id:13, pId:1, name:"pNode 13", isParent:true},
            { id:2, pId:0, name:"pNode 2"},
            { id:21, pId:2, name:"pNode 21", open:true},
            { id:211, pId:21, name:"sNode 211"},
            { id:212, pId:21, name:"sNode 212"},
            { id:213, pId:21, name:"sNode 213"},
            { id:214, pId:21, name:"sNode 214"},
            { id:22, pId:2, name:"pNode 22"},
            { id:221, pId:22, name:"sNode 221"},
            { id:222, pId:22, name:"sNode 222"},
            { id:223, pId:22, name:"sNode 223"},
            { id:224, pId:22, name:"sNode 224"},
            { id:23, pId:2, name:"pNode 23"},
            { id:231, pId:23, name:"sNode 231"},
            { id:232, pId:23, name:"sNode 232"},
            { id:233, pId:23, name:"sNode 233"},
            { id:234, pId:23, name:"sNode 234"},
            { id:3, pId:0, name:"pNode 3", isParent:true}
        ];

效果是這樣的
在這里插入圖片描述

3. 主要引數介紹setting、zTree

setting配置

<!-- 這里是一部分配置 -->
var setting = {   
    isSimpleData : true,              //資料是否采用簡單 Array 格式，默認false   
    treeNodeKey : "id",               //在isSimpleData格式下，當前節點id屬性   
    treeNodeParentKey : "pId",        //在isSimpleData格式下，當前節點的父節點id屬性   
    showLine : true,                  //是否顯示節點間的連線   
    checkable : true                  //每個節點上是否顯示 CheckBox   
};

zTreeNodes

zTreeNodes引數，是zTree 的全部節點資料集合，采用由JSON物件組成的資料結構，可以理解為zTreeNodes就是使用Json格式保存了樹的所有資訊，
zTreeNodes的格式分為兩種

利用Json格式嵌套體現父子關系和Array簡單格式，

	var zNodes = [    
		{"id":1, "name":"SasS管理", "nodes":[    
		   {"id":11, "name":"企業管理", "nodes":[    
			 {"id":111, "name":"模塊管理"}    
		   ]},    
		  {"id":12, "name":"系統管理"}    
		]},    
	
	];

帶有父子關系的標準 zTreeNodes【我比較喜歡使用這種方式】

   var zNodes =[
       { id:1, pId:0, name:"Sass管理", open:true},
       { id:11, pId:1, name:"企業管理", open:true,checked:true},
       { id:111, pId:1, name:"模塊管理"},
       { id:112, pId:1, name:"用戶管理"},
       { id:113, pId:1, name:"角色管理"}
   ];

4. 一個顯示樹形圖的案例jsp

在這里插入圖片描述

<%-- 測驗zTree樹形結構 --%>
<%@  page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<html>
<head>
    <title>測驗zTree</title>
    <%--專案地址--%>
    <% pageContext.setAttribute("path",request.getContextPath()); %>
   <%--步驟：
        第一步：拷貝zTree的css/js檔案到專案中
        第二步：拷貝js匯入到當前頁面
        第三步：頁面定義顯示樹的區域
    --%>
    <%--拷貝zTree的js腳本、css樣式匯入到當前頁面--%>
    <link rel="stylesheet" type="text/css" href="${path}/plugins/ztree/css/zTreeStyle/zTreeStyle.css">
    <script type="text/javascript" src="${path}/plugins/ztree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="${path}/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>

    <script type="text/javascript">
        //當前的配置資訊
        var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        //zTree的資料（模擬資料）
        //pId是樹形選單的等級（0最高） open:true，就是選單是打開的（顯示子選單）
        //checked:true 默認選中
        var zNodes =[
            { id:1, pId:0, name:"Sass管理", open:true},
            { id:11, pId:1, name:"企業管理", open:true,checked:true},
            { id:111, pId:1, name:"模塊管理"},
            { id:112, pId:1, name:"用戶管理"},
            { id:113, pId:1, name:"角色管理"}
        ];

        $(document).ready(function(){ 
            //參1 顯示的標簽  參2 設定的引數 比如支持復選 check enable = true  參3 資料
             $.fn.zTree.init($("#treeDemo"), setting, data);
        });

    </script>
</head>
<body>
    <!-- ul標簽顯示樹狀結構 -->
    <ul id="treeDemo" class="ztree"></ul>
</body>
</html>

5. 從后臺controller傳輸資料顯示【***】

TestZtreeDataController

@Controller
@RequestMapping("/testZTree")
public class TestZtreeDataController{

    //以json格式向zTree樹形選單放資料
    @RequestMapping(path="/getZtreeData",method ={ RequestMethod.GET, RequestMethod.POST})
    @ResponseBody
    public Object getZtreeData(){

        /*
        頁面資料
        var zNodes =[
            { id:1, pId:0, name:"Sass管理", open:true},
            { id:2, pId:1, name:"企業管理", open:true,checked:true},
            { id:3, pId:1, name:"模塊管理"},
            { id:4, pId:1, name:"用戶管理"},
            { id:5, pId:1, name:"角色管理"}
        ];
         */

        List<Map<String,Object>> list=new ArrayList<>();
        Map<String,Object> node1=new HashMap<String,Object>();
        node1.put("id",1);
        node1.put("pId",0); //選單等級
        node1.put("name","Sass管理");
        node1.put("open",true); //是否展開該選單

        Map<String,Object> node2=new HashMap<String,Object>();
        node2.put("id",11);
        node2.put("pId",1);
        node2.put("name","企業管理");
        node2.put("open",true);
        node2.put("checked",true);  //設定選中狀態

        Map<String,Object> node3=new HashMap<String,Object>();
        node3.put("id",111);
        node3.put("pId",1);
        node3.put("name","模塊管理");

        Map<String,Object> node4=new HashMap<String,Object>();
        node4.put("id",112);
        node4.put("pId",1);
        node4.put("name","用戶管理");

        Map<String,Object> node5=new HashMap<String,Object>();
        node5.put("id",113);
        node5.put("pId",1);
        node5.put("name","角色管理");

        //因為五個元素放在[]中，所以本質上放到集合中的
        list.add(node1);
        list.add(node2);
        list.add(node3);
        list.add(node4);
        list.add(node5);
        return list; //list雖然是物件，但會被 @ResponseBody轉成json
    }
}

驗證json資料

http://localhost:8080/SaaS-Export/testZTree/getZtreeData
在這里插入圖片描述
修改jsp頁面，讓它從后臺獲取資料顯示

<%-- 測驗zTree樹形結構 --%>
<%@  page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<html>
<head>
    <title>測驗zTree</title>
    <%--專案地址--%>
    <% pageContext.setAttribute("path",request.getContextPath()); %>
   <%--步驟：
        第一步：拷貝zTree的css/js檔案到專案中
        第二步：拷貝js匯入到當前頁面
        第三步：頁面定義顯示樹的區域
    --%>
    <%--拷貝zTree的js腳本、css樣式匯入到當前頁面--%>
    <link rel="stylesheet" type="text/css" href="${path}/plugins/ztree/css/zTreeStyle/zTreeStyle.css">
    <script type="text/javascript" src="${path}/plugins/ztree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="${path}/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>

    <script type="text/javascript">
        //當前的配置資訊
        var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        //zTree的資料（模擬資料）
        //pId是樹形選單的等級（0最高） open:true，就是選單是打開的（顯示子選單）
        //checked:true 默認選中
        /*var zNodes =[
            { id:1, pId:0, name:"Sass管理", open:true},
            { id:11, pId:1, name:"企業管理", open:true,checked:true},
            { id:111, pId:1, name:"模塊管理"},
            { id:112, pId:1, name:"用戶管理"},
            { id:113, pId:1, name:"角色管理"}
        ];*/

        $(document).ready(function(){
            var fn =function(data){
                //選單的初始化
                //參1 顯示的標簽  參2 設定的引數 比如支持復選 check enable = true  參3 資料
                $.fn.zTree.init($("#treeDemo"), setting, data);
            }
            //ajax獲取資料
            $.get('${path}/testZTree/getZtreeData',fn,'json')
        });

    </script>
</head>
<body>
    <!-- ul標簽顯示樹狀結構 -->
    <ul id="treeDemo" class="ztree"></ul>
</body>
</html>

效果
在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/206473.html

標籤：其他

上一篇：javeweb之EL

下一篇：saas-export專案-dept記錄串列的每頁顯示條數切換

【SaaS - Export專案】15 - zTree樹形選單入門使用（json格式）

文章目錄

zTree介紹

zTree樹形組件入門使用

1. 將下載好的zTree檔案的css、js檔案拷貝到專案的web模塊中去，

2. 選擇自己需要的型別的html進行修改

3. 主要引數介紹**setting、zTree **

4. 一個顯示樹形圖的案例jsp

5. 從后臺controller傳輸資料顯示【***】

3. 主要引數介紹setting、zTree