首页
所有分类
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 相关文章推荐
JSON辅助格式化处理方法
Mar 26 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
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
继承(1) redis(3) PyAutoGUI(1) 封装(1) 验证表达式(1) gRPC(3) 构造函数(1) promise(2) 百度地图(1) XDM(3)
You might like
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
php的ddos攻击解决方法
2015/01/08 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
浅析jQuery 遍历函数，javascript中的each遍历
2016/05/25 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
Vue精简版风格概述
2018/01/30 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
django的登录注册系统的示例代码
2018/05/14 Python
学习Python列表的基础知识汇总
2020/03/10 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
德国Discount-Apotheke中文官网：DC德式康线上药房
2020/02/18 全球购物
挂科检讨书范文
2014/02/20 职场文书
给公司的建议书范文
2014/05/13 职场文书
中秋手机店促销方案
2014/06/16 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
党的群众路线教育实践活动个人对照检查材料（乡镇）
2014/11/05 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
检讨书范文500字
2015/01/28 职场文书
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript