zTree简单配置实例

最新推荐文章于 2023-11-02 10:46:31 发布
最新推荐文章于 2023-11-02 10:46:31 发布
阅读量369 收藏
点赞数
分类专栏： zTree

实现效果如下：

实现代码如下：

[html]  view plain copy
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="utf-8"%>  
  3.         <%  
  4. String path = request.getContextPath();  
  5. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  6. %>  
  7. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  8. <html>  
  9. <head>  
  10. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  11. <title>Insert title here</title>  
  12. </head>  
  13. <script type="text/javascript" src="<%=basePath %>/js/jquery-1.8.1.js"></script>  
  14.     <script type="text/javascript" src="<%=basePath %>/js/jquery.ztree.all-3.5.min.js"></script>  
  15.     <link href="<%=basePath %>/css/zTreeStyle.css" rel="stylesheet" type="text/css"/>  
  16.     <script type="text/javascript">  
  17.     var zTree;  
  18.     var setting = {  
  19.             view:{  
  20.                 selectedMulti:false  
  21.             },  
  22.             edit: {  
  23.                 enable: true,  
  24.                 editNameSelectAll:true,  
  25.                 removeTitle:'删除',  
  26.                 renameTitle:'重命名'  
  27.             },  
  28.             data: {  
  29.                 keep:{  
  30.                     parent:true,  
  31.                     leaf:true  
  32.                 },  
  33.                 simpleData: {  
  34.                     enable: true  
  35.                 }  
  36.             },  
  37.             callback:{  
  38.                 beforeRemove:beforeRemove,//点击删除时触发，用来提示用户是否确定删除  
  39.                 beforeEditName: beforeEditName,//点击编辑时触发，用来判断该节点是否能编辑  
  40.                 beforeRename:beforeRename,//编辑结束时触发，用来验证输入的数据是否符合要求  
  41.                 onRemove:onRemove,//删除节点后触发，用户后台操作  
  42.                 onRename:onRename,//编辑后触发，用于操作后台  
  43.                 beforeDrag:beforeDrag,//用户禁止拖动节点  
  44.                 onClick:clickNode//点击节点触发的事件  
  45.             }  
  46.         };  
  47.     var zNodes =[  
  48.                 { id:1, pId:0, name:"父节点 1", open:true},  
  49.                 { id:11, pId:1, name:"去百度",url:'http://www.baidu.com',target:'_blank'},  
  50.                 { id:12, pId:1, name:"叶子节点 1-2"},  
  51.                 { id:13, pId:1, name:"叶子节点 1-3"},  
  52.                 { id:2, pId:0, name:"父节点 2", open:true},  
  53.                 { id:21, pId:2, name:"叶子节点 2-1"},  
  54.                 { id:22, pId:2, name:"叶子节点 2-2"},  
  55.                 { id:23, pId:2, name:"叶子节点 2-3"},  
  56.                 { id:3, pId:0, name:"父节点 3", open:true},  
  57.                 { id:31, pId:3, name:"叶子节点 3-1"},  
  58.                 { id:32, pId:3, name:"叶子节点 3-2"},  
  59.                 { id:33, pId:3, name:"叶子节点 3-3"}  
  60.             ];  
  61.     $(document).ready(function(){  
  62.         zTree = $.fn.zTree.init($("#tree"), setting, zNodes);  
  63.     });  
  64.     function beforeRemove(e,treeId,treeNode){  
  65.         return confirm("你确定要删除吗？");  
  66.     }  
  67.     function onRemove(e,treeId,treeNode){  
  68.         if(treeNode.isParent){  
  69.             var childNodes = zTree.removeChildNodes(treeNode);  
  70.             var paramsArray = new Array();  
  71.             for(var i = 0; i < childNodes.length; i++){  
  72.                 paramsArray.push(childNodes[i].id);  
  73.             }  
  74.             alert("删除父节点的id为："+treeNode.id+"\r\n他的孩子节点有："+paramsArray.join(","));  
  75.             return;  
  76.         }  
  77.         alert("你点击要删除的节点的名称为："+treeNode.name+"\r\n"+"节点id为："+treeNode.id);  
  78.     }  
  79.     function beforeEditName(treeId,treeNode){  
  80.         if(treeNode.isParent){  
  81.             alert("不准编辑非叶子节点！");  
  82.             return false;  
  83.         }  
  84.         return true;  
  85.     }  
  86.     function beforeRename(treeId,treeNode,newName,isCancel){  
  87.         if(newName.length < 3){  
  88.             alert("名称不能少于3个字符！");  
  89.             return false;  
  90.         }  
  91.         return true;  
  92.     }  
  93.     function onRename(e,treeId,treeNode,isCancel){  
  94.         alert("修改节点的id为："+treeNode.id+"\n修改后的名称为："+treeNode.name);  
  95.     }  
  96.     function clickNode(e,treeId,treeNode){  
  97.         if(treeNode.id == 11){  
  98.             location.href=treeNode.url;  
  99.         }  
  100.     }  
  101.     function beforeDrag(treeId,treeNodes){  
  102.         return false;  
  103.     }  
  104.     </script>  
  105. <body>  
  106.     <ul id="tree" class="ztree"></ul>  
  107. </body>  
  108. </html> 
小七的玩偶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ztree 详解
qq_27009517的博客
05-21 5913
官网：http://www.treejs.cn/v3/demo.php#_101 里面有例子和demo，齐全。 zTree是一个基于jQuery的树形列表生成控件。 切换语言，点击下载，里面有各种demo： 里面各种demo，比博客写的好。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp.
zTree简单使用方法
qq_41369312的博客
01-24 4360
一.首先在页面上的标签中： 二.定义ztree的配置参数setting： var setting = { data: { simpleData: { enable:true } }, async: { enable: true, url:"${unionproUser}myTeam/queryChilds.shtml", autoParam:["id=userId"]
zTree的简单使用1.0
一只瓜牛的博客
05-07 3985
ZTree的简单使用
详解js树形控件—zTree使用总结
for__future_的博客
02-27 3779
【代码】详解js树形控件—zTree使用总结。
Jquery树结构组件的zTreeSetting配置
wgx_0504的博客
04-28 1102
以上是zTreeSetting中常用的配置项，不同的项目需求会有不同的配置项需要设置。需要注意的是，如果对zTreeSetting进行修改，需要重新调用$.fn.zTree.init()方法进行树形结构的初始化。async：是否启用异步加载模式，默认为false。如果开启异步加载模式，可以通过设置asyncUrl、dataFilter等属性来配置异步加载的相关参数。zTreeSetting是zTree树形控件的配置项，用于控制树形结构的展示和行为。callback：回调函数配置项，用于绑定各种事件。
jquery zTree异步加载简单实例讲解
11-24
本文实例讲解了jquery zTree异步加载，分享给大家供大家参考，具体内容如下 web.xml中Servlet配置如下： <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns=...
ztree 树插件简单实例-example-01
03-17
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。适合项目开发，尤其是 树状菜单、树状数据的Web显示、权限管理...简单的参数配置实现 灵活多变的功能
多功能jQuery树插件zTree实现权限列表简单实例
11-23
优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 zTree官网 zTreeAPI下载链接  页面主要引入一下几个文件：  <link type="text/css" rel="stylesheet" href="zTree/zTreeStyle.css" /> ...
ztree树的部分js文件
11-28
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 zTree 是开源免费的软件（MIT 许可证）。... 简单的参数配置实现 灵活多变的功能
Z-Tree树状结构，权限管理
qq_45397452的博客
07-29 1700
树形结构在实际开发中很长用到，比如部门管理，权限菜单等。因为用树形结构来展示会显的很清晰明了。 使用 ztree插件，制作树形菜单 zTree 是一个依靠 jQuery实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是zTree 最大优点。 <style> #treeDemo { width: 100%; height: auto; font-size: 2em; }
前端树形结构插件 zTree 使用入门总结
默默的博客
08-16 5170
zTree是一款依靠Jquery实现的多功能的“数插件”，优异的性能、灵活的配置、多种功能的组合是它最大的优点。     zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载；     采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀；     兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器；     支持 JSON...
ZTree基本使用及本人详解
刘大猫
03-30 1万+
文章目录ZTree树简介简介ZTree的特点练习ztree之前的小建议ZTree文件介绍ZTree的配置介绍ZTree使用案例需求1：前端初始化数据（标准json数据）前端代码需求2：后端查询ztree数据（简单JSON数据）+需求3：设置节点默认选中+需求4：【添加/编辑/删除】节点+需求5：自定义图标固定和不固定显示前端代码后端代码需求6：左侧菜单栏前端代码需求7：拖拽节点高级控制前端代吗需求8：2棵树之间的数据交互前端代吗 ZTree树简介 简介 ZTree的特点 练习ztree之前的小建议 如
zTree基本使用
热门推荐
Junit的博客
07-23 7万+
zTree使用 zTree 是一个依靠 jQuery 实现的多功能 “树插件”， 而且拥有较好的浏览器兼容性，有着丰富的功能以及可以自定义样式，足以满足大部分业务的开发。 第一步先导入css及js文件 &lt;link rel="stylesheet" type="text/css" href="zTree/css/zTreeStyle/zTreeStyle.css"&gt; &lt;...
zTree -- jQuery 树插件 使用方法与例子
qq_35286826的博客
09-03 1099
https://segmentfault.com/a/1190000004536774简介 zTree 是一个依靠 jQuery 实现的多功能 “树插件”。网址：http://www.ztree.me/v3/main.php#_zTreeInfo上面的网址里有ztree的详细介绍、Demo 演示、API 文档、入门指南 以及下载。这里不再赘述。使用说明 1、下载ztree文件 将需要使用的 z
前端框架——树形结构Ztree的使用
weixin_30920853的博客
08-29 930
地址 官网：http://ztree.me 码云：https://gitee.com/zTree/zTree_v3 ...
ztree调整节点间距及一般使用
最新发布
haiyangyiba的专栏
11-02 261
距离上次使用ztree的功能已经有许多年了，现在再来看它的效果，总是感觉菜单之间的间距比较的小，所以本次分享一下将它的间距给调大一些，同时也稍微的做一个功能稍微全面的简单示例。
zTree的使用
木元心的博客
03-06 3193
zTree的使用 文章目录zTree的使用zTree方法`init(obj, zSetting, zNodes) ``destory(treeId)``_z:{tools, view, event, data}``zTreeObj.addNodes(parentNode, index, newNodes, isSilent)``copyNode(targetNode, node, moveType, isSilent)``getSelectedNodes()``getNodes()``getNodeByPa
ztree 使用教程
悟世君子的博客
10-12 3万+
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。被广泛应用在系统的权限管理中，本文讲解zTree的一般应用 zTree 官网 http://www.treejs.cn/v3/main.php#_zTreeInfo 1、zTree 官网下载 ztree 下载好后放到项目相关目录下 2、编写相关代码 引入相关js 、 css 文件，代码如下: &lt;!DOC...
angularjs ztree
09-30
可以定义一个指令来处理zTree的初始化和数据加载，并将zTree的实例绑定到$scope中。 5. 处理zTree的事件和交互：通过使用AngularJS的数据绑定，我们可以将zTree的节点选择事件绑定到$scope中的一个函数上，以便在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值