JQuery ZTree简单使用

逃离我推掉我的手 2022-07-13 11:14 140阅读 0赞

# JQuery ZTree简单使用 #

@(JavaScript)\[jQuery, ztree, 入门\]

*  JQuery ZTree简单使用
    
     *  基本概述
     *  案例
        
         *  使用标准json数据构造ztree
         *  使用简单json数据构造ztree
         *  发送ajax请求获取动态json数据构造ztree
            
             *  json内容
             *  html片段
         *  为ztree节点绑定事件动态添加选项卡
            
             *  json内容
             *  html文件

## 基本概述 ##

> zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是 树状菜单、树状数据的Web显示、权限管理等等。
> 
> zTree 是开源免费的软件（MIT 许可证）。在开源的作用下，zTree 越来越完善，目前已经拥有了不少粉丝，并且今后还会推出更多的 zTree 扩展功能库，让 zTree 更加强大。
> 
> ——参考《百度百科》

官网：[zTree官网][zTree]

PS：zTree的官方API文档和demo挺详细的，值得一读。

## 案例 ##

### 使用标准json数据构造ztree ###

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
         <head>
              <meta charset="UTF-8">
              <title>ztree测试</title>
              <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
              <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
              <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
              <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
              <link rel="stylesheet" href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css" type="text/css">
              <script type="text/javascript" src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>
    
              <script type="text/javascript"> $(function(){ $("#btn").click(function() { var isExists = $("#et").tabs("exists", "标题"); if(isExists) { $("#et").tabs("select","标题"); } else { $("#et").tabs("add", { title:"标题", closable:true, iconCls:"icon-save", content:"<iframe frameborder='no' height='100%' width='100%' src='3-tabs.jsp'></iframe>" }); } }); }); </script>
              
              <script type="text/javascript"> $(function() { var setting = {}; var zNodes = [ {name:'结点1',children:[ {name:'结点11'}, {name:'结点12'} ]}, {name:'结点2'}, {name:'结点3'} ]; $.fn.zTree.init($("#ztree1"), setting, zNodes); }); </script>
         </head>
         <body class="easyui-layout">
              
              <div style="height: 100px;" data-options="region:'north'">北部区域</div>
              <div style="width: 200px;" data-options="region:'west'">
                  <div class="easyui-accordion" data-options="fit:true">
                       <div data-options="iconCls:'icon-save'" title="系统菜单">
                            <a id="btn" class="easyui-linkbutton">按钮</a>
                       </div>
                       <div data-options="iconCls:'icon-remove'" title="业务菜单">
                            <ul id="ztree1" class="ztree"></ul>
                       </div>
                       <div data-options="iconCls:'icon-remove'" title="功能菜单">内容3</div>
                       <div data-options="iconCls:'icon-remove'" title="非功能菜单">内容4</div>
                  </div>
              </div>
              <div style="" data-options="region:'center'">
                  <div id="et" class="easyui-tabs" data-options="fit:true">
                       <div data-options="iconCls:'icon-save', closable:true" title="系统菜单">内容1</div>
                       <div data-options="iconCls:'icon-remove'" title="业务菜单">内容2</div>
                  </div>
              </div>
              <div style="width: 100px;" data-options="region:'east'">东部区域</div>
              <div style="height: 50px;" data-options="region:'south'">南部区域</div>
         </body>
    </html>

### 使用简单json数据构造ztree ###

<div data-options="iconCls:'icon-remove'" title="功能菜单">
                    <ul id="ztree2" class="ztree"></ul>
               </div>
    
      
      <script type="text/javascript"> $(function() { var setting = { data: { simpleData: { enable: true } } }; var zNodes = [ { "id":1, "pId":0, "name":"test1"}, { "id":11, "pId":1, "name":"test11"}, { "id":12, "pId":1, "name":"test12"}, { "id":111, "pId":11, "name":"test111"}, { "id":2, "pId":0, "name":"test2"}, { "id":3, "pId":0, "name":"test3"}, { "id":31, "pId":2, "name":"test31"} ]; $.fn.zTree.init($("#ztree2"), setting, zNodes); }); </script>

### 发送ajax请求获取动态json数据构造ztree ###

#### json内容 ####

[
            { "id":"11", "pId":"0", "name":"菜单1"},
            { "id":"111", "pId":"11", "name":"菜单11",  "page":"xx.action"},
            { "id":"112", "pId":"11", "name":"菜单12","page":"xx.action"},
            { "id":"113", "pId":"11", "name":"菜单13", "page":"xx.action"},
            { "id":"114", "pId":"11", "name":"菜单14","page":"xx.action"},
            { "id":"12", "pId":"0", "name":"菜单2"},
            { "id":"121", "pId":"12", "name":"菜单21" ,"page":"xx.action"},
            { "id":"122", "pId":"12", "name":"菜单22" ,"page":"xx.action"},
            { "id":"123", "pId":"12", "name":"菜单23" ,"page":"xx.action"},
            { "id":"13", "pId":"0", "name":"菜单3"},
            { "id":"131", "pId":"13", "name":"菜单31","page":"xx.action"},
            { "id":"132", "pId":"13", "name":"菜单32","page":"xx.action"}
    ]

#### html片段 ####

<div data-options="iconCls:'icon-remove'" title="非功能菜单">
                    <ul id="ztree3" class="ztree"></ul>
               </div>
    
      
      <script type="text/javascript"> $(function() { var setting = { data: { simpleData: { enable: true } } }; $.ajax({ url:'${pageContext.request.contextPath}/json/menu.json', type:'get', data:'', dataType:'json', success:function (data) { $.fn.zTree.init($("#ztree3"), setting, data); } }); }); </script>

### 为ztree节点绑定事件动态添加选项卡 ###

#### json内容 ####

#### html文件 ####

<div data-options="iconCls:'icon-save'" title="ztree事件">
                    <ul id="ztree4" class="ztree"></ul>
               </div>
    
      
      <script type="text/javascript"> $(function() { var setting = { data: { simpleData: { enable: true } }, callback: { onClick: function(event, treeId, treeNode) { if(treeNode.page != undefined) { var isExists = $("#et").tabs("exists", treeNode.name); if(isExists) { $("#et").tabs("select", treeNode.name); } else { $("#et").tabs("add", { title:treeNode.name, closable:true, iconCls:"icon-edit", content:"<iframe frameborder='no' height='100%' width='100%' src='"+ treeNode.page +"'></iframe>" }); } } } } }; $.ajax({ url:'${pageContext.request.contextPath}/json/menu.json', type:'get', data:'', dataType:'json', success:function (data) { $.fn.zTree.init($("#ztree4"), setting, data); } }); }); </script>

[zTree]: http://www.treejs.cn/v3/main.php#_zTreeInfo