首页
所有分类
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 相关文章推荐
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
使用jquery实现简单的ajax
Jul 08 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
JS简单数组排序操作示例【sort方法】
May 17 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 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
二维码(2) 延时任务(1) 日志(1) 条码(1) Post(1) Word(2) 目录管理(1) 太阳码(1) 磁盘管理(1) Get(1)
You might like
php接口与接口引用的深入解析
2013/08/09 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
vue中使用极验验证码的方法（附demo）
2019/12/04 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
医学护理毕业生自荐信
2013/11/07 职场文书
历史专业个人求职信范文
2013/12/07 职场文书
夏季奶茶店创业计划书
2014/01/16 职场文书
英语教师岗位职责
2014/03/16 职场文书
家长对孩子的评语
2014/04/18 职场文书
中学生评语大全
2014/04/18 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
一篇合格的广告文案，其主要目的是什么?
2019/07/12 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
用python画城市轮播地图
2021/05/28 Python
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js