首页
所有分类
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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
网页中的图片的处理方法与代码
Nov 26 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
jQuery选择器源码解读（二）：select方法
Mar 31 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
vuejs响应用户事件（如点击事件）
Mar 14 Javascript
js常见遍历操作小结
Jun 06 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
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
承诺书(369) 竞聘书(31) 决心书(42) 主持词(345) 聘任书(31) 请假条(31) 建议书(203) 广告词(105) 活动总结(790) 责任书(145)
You might like
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP高级编程实例：编写守护进程
2014/09/02 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
JavaScript和JQuery实用代码片段（一）
2010/04/07 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
python简单实例训练(21~30)
2017/11/15 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
Python如何发布程序的详细教程
2018/10/09 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
python实现交并比IOU教程
2020/04/16 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
远程Wi-Fi宠物监控相机：Petcube
2017/04/26 全球购物
泰国办公用品购物网站：OfficeMate
2018/02/04 全球购物
Lime Crime官网：美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
工厂总经理岗位职责
2014/02/07 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
机电一体化专业求职信
2014/07/22 职场文书
2014年测量员工作总结
2014/12/12 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
2015年教师节活动总结
2015/03/20 职场文书
小学生优秀作文范文（六篇）
2019/07/10 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python