首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JQuery ZTree使用方法详解

Posted in Javascript onJanuary 07, 2017

JQuery ZTree简单使用

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

基本概述

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是 树状菜单、树状数据的Web显示、权限管理等等。

zTree 是开源免费的软件（MIT 许可证）。在开源的作用下，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>
   <!-- 使用标准json数据构造ztree -->
   <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>

 <!-- 使用简单json数据构造ztree -->
 <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>

 <!-- 发送ajax请求获取动态json数据构造ztree -->
 <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内容

[
  { "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-save'" title="ztree事件">
    <ul id="ztree4" class="ztree"></ul>
   </div>

 <!-- 为ztree节点绑定事件动态添加选项卡 -->
 <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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JQuery ZTree使用方法详解

- Author -

Switch_vov

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript的数据类型、字面量、变量介绍
May 23 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
vue.js语法及常用指令
Oct 29 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
jquery实现转盘抽奖功能
Jan 06 #Javascript
BootStrap3中模态对话框的使用
Jan 06 #Javascript
如何制作幻灯片（代码分享）
Jan 06 #Javascript
微信小程序 支付简单实例及注意事项
Jan 06 #Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 #Javascript
ajax异步请求详解
Jan 06 #Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 #Javascript
csgo(1) macos(1) sentinel(1) sock(2) xps(1) XPathParser(1) mysqldump(1) protocol(1) ACID(1) Stater(1)
You might like
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
JavaScript操作XML实例代码（获取新闻标题并分页，并分页）
2010/05/25 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
node.js入门教程
2014/06/01 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
vue实现手机号码的校验实例代码（防抖函数的应用场景）
2019/09/05 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
python调用cmd复制文件代码分享
2013/12/27 Python
Python中实现常量（Const）功能
2015/01/28 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
Python基本语法经典教程
2016/03/11 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
Django框架多表查询实例分析
2018/07/04 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
Python 定义只读属性的实现方式
2020/03/05 Python
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
DNA测试：Orig3n
2019/03/01 全球购物
俄罗斯领先的移动和数字设备在线商店：Svyaznoy.ru
2020/12/21 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
幼教简历自我评价
2014/01/28 职场文书
员工考核管理制度
2014/02/02 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
2015年新农合工作总结
2015/03/30 职场文书
公司费用报销管理制度
2015/08/04 职场文书
纪检干部学习心得体会
2016/01/23 职场文书