JQuery/JS插件 zTree树,点击当前节点展开,其他节点关闭
好像没找到现成的,就自己写了一个demo。
效果如下:
代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title></title>
- <meta charset="utf-8" />
- <script src="../jquery-2.1.4.js"></script>
- <link href="zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
- <script src="zTree_v3/js/jquery.ztree.core-3.5.js"></script>
- <script type="text/javascript">
- //获取当前父节点 参数:等级
- var getNodeByLevel = function (arr, level) {
- for (var i = ; i < arr.length; i++) {
- var item = arr[i];
- if (item.level == level) {
- return item;
- }
- }
- return null;
- };
- //折叠节点 非当前父节点
- var collapseNodes = function (allTwoNodes, twoNode) {
- for (var i = ; i < allTwoNodes.length; i++) {
- var item = allTwoNodes[i];
- if ((twoNode != null) && (twoNode.id == item.id)) {
- continue;
- }
- treeObj.expandNode(item, false, true, false);
- }
- }
- var zNodes = [
- // 第一层
- { id: , pId: , name: "父节点1 - 展开", open: true },
- // 第二层
- { id: , pId: , name: "父节点11 - 折叠", icon: "zTree_v3/css/zTreeStyle/img/diy/2.png", open: true },
- // 第三层
- { id: , pId: , name: "叶子节点111", click: false, open: true },
- { id: , pId: , name: "叶子节点112", open: true },
- // 第四层
- { id: , pId: , name: "三级1" },
- { id: , pId: , name: "三级2" },
- { id: , pId: , name: "三级3" },
- // 第二层
- { id: , pId: , name: "父节点12", open: true },
- // 第三层
- { id: , pId: , name: "叶子节点121" },
- { id: , pId: , name: "叶子节点122", open: true },
- // 第四层
- { id: , pId: , name: "三级1" },
- { id: , pId: , name: "三级2" },
- { id: , pId: , name: "三级3" },
- ];
- var setting = {
- type: "expandAll",//全部展开
- view: {
- showLine: false,//不显示连接线
- },
- data: {
- simpleData: {
- enable: true
- }
- },
- callback: { //回调函数
- beforeClick: function (treeId, treeNode, clickFlag) {
- },
- onClick: function (vent, treeId, treeNode, clickFlag) {
- //console.log(treeNode);
- //console.log(treeNode.getParentNode());
- //console.log(treeNode.getIndex());
- //console.log(treeNode.getPath());
- var nodes = treeNode.getPath();
- var twoNode = getNodeByLevel(nodes, );
- var oneNode = getNodeByLevel(nodes, );
- var allTwoNodes = oneNode.children;
- collapseNodes(allTwoNodes, twoNode);
- },
- onCollapse: function (event, treeId, treeNode) {
- //alert('onCollapse / 折叠');//折叠
- },
- onExpand: function (event, treeId, treeNode) {
- //alert('onExpand / 展开');//展开
- }
- }
- };
- //树初始化
- var treeObj = null;
- $(document).ready(function () {
- treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
- });
- </script>
- </head>
- <body>
- <div class="content_wrap">
- <div class="zTreeDemoBackground left">
- <!-- ztree的容器 -->
- <ul id="treeDemo" class="ztree"></ul>
- </div>
- </div>
- </body>
- </html>
JQuery/JS插件 zTree树,点击当前节点展开,其他节点关闭的更多相关文章
- js插件---Bootstrap 树控件
js插件---Bootstrap 树控件 一.总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...
- js插件ztree使用
最新给公司后台写了一个配置页面,在网上搜到一个js插件ztree,记录一下使用心得. 首先说一下ztree官网,好多方法我都是从官网api上学习的,官网地址http://www.treejs.cn/v ...
- JQuery/JS插件 jsTree加载树,预先加载,初始化时加载前三级节点,当展开第三级节点时 就加载该节点下的所有子节点
jsTree加载树, 初始化时 加载前三级节点, 当展开第三级节点时 就加载该节点下的所有子节点 html: <!DOCTYPE html> <html> <head&g ...
- JQuery/JS插件 jsTree加载树,普通加载,点一级加载一级
前端: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- jQuery.TreeView插件实现树状导航(十三)
一:jQuery.TreeView插件简介 该插件的特点: 1.支持静态的树,即一次性将全部数据加载到客户端. 2.支持异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据. 3.支持节点级联 ...
- zTree怎么判断树有节点展开或者完全关闭的
树节点有个open属性,引用API: 记录 treeNode 节点的 展开 / 折叠 状态.1.初始化节点数据时,如果设定 treeNode.open = true,则会直接展开此节点2.叶子节点 t ...
- JQuery Tree插件——zTree
Demo:点击下载 zTree 在线操作演示:http://www.ztree.me/v3/demo.php#_101
- 一个功能丰富的 jQuery 树形插件 z-tree
链接 如果你的树 很复杂, 需要拖拽功能, 还可以考虑用这个 另外还有一个目前在用 Dynatree 如果一般的树, 还是自己写一个, 也很轻松, 如果有一两个复杂的点, 可以参考ZTree
- JQuery/JS插件 日期插件
用于日期的计算,功能比较全,我常用的主要是日期的计算(多一天少一天,或者添加几个月等),日期格式化 网址:http://momentjs.cn/ 测试代码: <!DOCTYPE html> ...
随机推荐
- Java 10 - Java Character类
Java Character类 使用字符时,我们通常使用的是内置数据类型char. 实例 char ch = 'a'; // Unicode for uppercase Greek omega cha ...
- phalcon断点调试(phpStorm+xdebug)
1.下载并添加chrome插件xdebug helper,下载地址:http://www.downcc.com/soft/261091.html 2.php添加xdebug扩展 mkdir -p /u ...
- 503 Error: need EHLO and AUTH first
设置OUTLOOK2013使用QQ邮箱,按照QQ邮箱的配置介绍设置好后,收邮件的服务可以了,但是发送邮件的服务失败,报错:503 Error: need EHLO and AUTH first,经查, ...
- jmeter关联Websocket包支持
消息文本发送内容采用的是websocket方式进行消息握手的,一次使用到WEBSOCKET包支持 对于它的介绍和使用如下: 一.首先,我们需要准备Jmeter的WebSocket协议的支持插件:JMe ...
- LInux下的jdk环境置
1.Linux下使用wget下载jdk8: 进入目录/usr/local/software 2.解压 tar -zxvf jdk-8u152-linux-x64.tar.gz 3.配置环境变量 vi ...
- django---单表操作之增删改
首先找到操作的首页面‘ 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- android 开发 碎片Fragment布局例子(用按键切换碎片布局)
实现思路: 1.写一个父类布局,里面写一个按键和一个帧布局(用于给Fragment布局后续替代) 2.写3个子布局,并且在写3个class继承Fragment布局 3.在MainActivity的cl ...
- 使用jQuery编辑删除页面内容,两种方式
第一种,比较少的编辑用这种,直接在那块内容上编辑,失去焦点即完成 前几天做编辑框的时候,需要只修改一个状态 //编辑角色 function editTr($this){ thatTd=$($this) ...
- docekr-image的区别和container;docker run和start,create
copy by: https://www.simapple.com/326.html 容器(container)的定义和镜像(image)几乎一模一样,也是一堆层的统一视角,唯一区别在于容器的最上面那 ...
- 24.纯 CSS 创作出平滑的层叠海浪特效
原文地址:https://segmentfault.com/a/1190000014895634 感想:这里的波浪只是侧面的,利用几个平面一部分弧旋转得到. HTML代码: <div class ...