详解js树形控件—zTree使用总结

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了详解js树形控件—zTree使用总结，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

0 zTree简介

树形控件的使用是应用开发过程中必不可少的。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

0.0 zTree的特点

  • 最新版的zTree将核心代码按照功能进行了分割，不需要的代码可以不用加载，如普通使用只需要加载核心的jquery.ztree.core-3.5.js，需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js，需要使用编辑功能加载jquery.ztree.exedit-3.5.min.js
  • 采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
  • 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
  • 支持 JSON 数据
  • 支持静态 和 Ajax 异步加载节点数据
  • 支持任意更换皮肤 / 自定义图标（依靠css）
  • 支持极其灵活的 checkBox 或 radio 选择功能
  • 提供多种事件响应回调
  • 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽
  • 在一个页面内可同时生成多个 Tree 实例
  • 简单的参数配置实现，灵活多变的功能

0.1 zTree文件介绍

从zTree官网下载的zTree包括以下组成部分

  • metroStyle文件夹：zTree的metro风格样式相关文件（图片及css样式表）。
  • zTreeStyle文件夹：zTree的标准风格样式文件夹（图片及css样式表）
  • js文件：zTree.all.js是完整的js库，可单纯加载此文件实现所有zTree功能，ztree.core、ztree.excheck、ztree.exedit、ztree.exhide是对ztree按照功能进行的分割，分别对应基本功能、复选功能、编辑功能、显隐功能。

1 zTree的基本使用

1.0 zTree的创建

在页面中添加对zTree的js及css引用，由于zTree基于JQuery，JQuery的引用是必须的。

ZTREE DEMO <Meta http-equiv="content-type" content="text/html; charset=UTF-8">

运行结果如下

1.1 zTree的配置

zTree的配置采用Json格式，按照配置的类型分为view（可视界面相关配置）、data（数据相关配置）、check（复选框相关配置）、callback（各类事件的回调函数配置）、async（zTree异步加载配置），一下是我们经常会使用到的一些配置及说明，其他详细配置可以参考zTree官方API文档的详细介绍。

显示节点图标 showLine: true,//设置是否显示节点与节点之间的连线 showTitle: true,//设置是否显示节点的title提示信息 },data: { simpleData: { enable: false,//设置是否启用简单数据格式（zTree支持标准数据格式跟简单数据格式，上面例子中是标准数据格式） idKey: "id",//设置启用简单数据格式时id对应的属性名称 pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构 } },check:{ enable: true //设置是否显示checkBox复选框 },callback: { onClick: onClick,//定义节点单击事件回调函数 onRightClick: OnRightClick,//定义节点右键单击事件回调函数 beforeRename: beforeRename,//定义节点重新编辑成功前回调函数，一般用于节点编辑时判断输入的节点名称是否合法 onDblClick: onDblClick,//定义节点双击事件回调函数 onCheck: onCheck //定义节点复选框选中或取消选中事件的回调函数 },async: { enable: true,//设置启用异步加载 type: "get",//异步加载类型:post和get contentType: "application/json",//定义ajax提交参数的参数类型，一般为json格式 url: "/Design/Get",//定义数据请求路径 autoParam: ["id=id","name=name"] //定义提交时参数的名称，=号前面标识节点属性，后面标识提交时json数据中参数的名称 } };

需要注意的是，zTree的事件回调部分，基本上每一个事件都对应一个beforeXXX事件，比如onClick事件对应有一个beforeOnClick事件，主要用于控制相关事件是否允许执行，如果before事件返回false，则取消执行对应相关事件。

1.2 zTree的数据格式

zTree的每一个节点都是一个treeNode对象，treeNode对象经常用到的属性和方法如下：

B-->C }

zTree的数据源一般有标准数据格式、简单数据格式两种，标准数据格式通过指定节点的chidren属性构建层级关系，而简单数据格式根据根据id，pid属性构建层级关系，我们在应用开发中使用关系型数据库，一般采用的都是简单数据格式。

标准数据格式

简单数据格式

注意zTree的默认配置是不启用简单数据格式，使用简单数据格式一定要在setting中进行简单数据格式的相关配置。

1.3 zTree的常用方法

zTree的主要操作方法介绍如下

获取zTree对象

增加节点

parentNode:指定的父节点，如果增加根节点，请设置 parentNode 为 null 即可

index:新节点插入的位置（从 0 开始），index = -1 时，插入到最后，此参数可忽略

newNodes：需要增加的节点数据 JSON 对象集合，数据只需要满足 zTree 的节点数据必需的属性即可

isSilent：true 时，添加节点后不展开父节点，其他值或缺省状态都自动展开

勾选或取消勾选全部节点

checked参数为true时全部勾选，为false时全部取消勾选。

勾选或取消勾选单个节点

node：要进行操作的节点

checked：为true勾选，为false取消勾选

checkeTypeFlag:为true表示对当前结点的子节点及父节点进行勾选状态的联动，为false不联动

callbackFlag:为true时表示执行beforeOnCheck和onCheck事件的回调函数，为false不执行

编辑节点

edit(node); 使节点处于编辑状态，必须引用jquery.ztree.exedit 扩展。

展开或折叠全部节点

expand为true是展开所有节点，为false是折叠所有节点。

根据节点属性查找结点

key:属性名

value:属性值

parentNode:是否在指定节点下查找，为null表示整个树查找。

获取被勾选或未被勾选的节点集合

checked为true表示获取所有被勾选的节点集合，为false表示所有未被勾选的节点集合

获取输入框勾选状态被改变的节点集合

2 zTree的常用操作

2.0 ajax请求数据并创建zTree

后台代码如下，可以根据需要返回你想要的任何数据，绑定到zTree上，然后通过treeNode.属性名取到对应的值，实现一些界面逻辑操作。

treeModels = new List(); bool open = false; foreach (var design in result.Designs) { if (design.ParentId == Guid.Empty) open = true; else open = false; treeModels.Add(new ModelTreeviewmodel() { Id = design.Id.ToString(),PId = design.ParentId.ToString(),Name = design.Name,Open = open,Data = design.Remarks ?? "",ViewPoint = design.ViewPoint ?? "",Checked = true }); } return Json(treeModels,JsonRequestBehavior.AllowGet); }

2.1 节点单击操作

节点单击事件会捕获事件对象e，zTree的唯一标识treeId，当前选中的节点对象treeNode三个参数。根据实际需求可获取treeNode中包含的任何属性数据，进行相关操作

获取当前结点上的相关属性数据，执行相关逻辑 };

2.2 节点复选框事件

一般情况下我们会直接使用treeObj.getCheckedNodes(true);获取所有选中的节点，然后遍历所有选中的节点进行相关操作，当面对大数据量时，这种操作方法便不可取，可通过getChangeCheckedNodes()方法获取勾选状态被改变的节点集合，值针对状态改变的节点做相应处理。

获取树对象 var nodes = treeObj.getChangeCheckedNodes(); //获取勾选状态改变的节点 var designIds = []; var status = 0; //定义初始勾选状态为未勾选 if (nodes[0].checked) status = 1; //如果状态改变节点为勾选状态，说明当前操作是从未勾选变为已勾选。 $.each(nodes,function (i,item) { designIds.push(item.id); //将状态改变的节点id输出到数组 item.checkedOld = item.checked; //这句话很关键，将节点的初始状态置为当前状态。否则每次勾选操作获取状态改变节点时只会跟树初始化的状态相比较。 }) $.ajax({ type: "Post",url: "/Design/GetRelationComponentIdsByDesigns",data: { "designIds": designIds },success: function (data) { RealBimOcx.BatchAddSubClrInfoBegin(); $.each(data.result,item) { if (status == 1) //这里根据发生改变的节点是勾选还是为勾选进行相关逻辑操作。 RealBimOcx.AddSubClrInfo(item,255,0); else RealBimOcx.AddSubClrInfo(item,0); if (i % 100 == 0) { RealBimOcx.BatchAddSubClrInfoEnd(); RealBimOcx.BatchAddSubClrInfoBegin(); } 
 })
 RealBimOcx.BatchAddSubClrInfoEnd();

}

})
};

2.3 实现zTree的右键增删改操作

首先定义右键弹出面板

  • 删除节点
  • 升级

    • 实现zTree右键单击事件回调函数

    0)) { rMenu.css({ "visibility": "hidden" }); } }

    新增节点

    增加节点 function addTreeNode() { hideRMenu(); var name = new Date().getTime(); //利用时间戳生成节点名称，保证节点名称唯一 var newNode = { name: name }; if (zTree.getSelectedNodes()[0]) { newNode.checked = zTree.getSelectedNodes()[0].checked; newNode.pid = zTree.getSelectedNodes()[0].id; zTree.addNodes(zTree.getSelectedNodes()[0],newNode); } else { zTree.addNodes(null,newNode); } var node = zTree.getNodeByParam("name",name,null); //得到新增加的节点 zTree.selectNode(node); //选中新增加的节点 zTree.editName(node); //让新增加的节点处于编辑状态 }

    编辑节点

    0) { var parent = nodes[0].getParentNode(); //得到选中节点的父节点 if (parent) { nodes[0].pid = parent.id; //如果选中节点父节点存在，将当前结点的pid属性值设置为父节点的id } zTree.editName(nodes[0]); //让选中节点处于编辑状态 } hideRMenu(); //隐藏右键面板 };

    节点编辑状态离开时触发事件

    名称判断 alert("不能为空。"); return false; } else { $.ajax({ //数据入库 type: "Post",url: "/Design/InsertOrUpdate",data: { "dto": { "Id": treeNode.id,"ParentId": treeNode.pid,"Name": newName } },success: function (data) { if (data.result == "Faild") { layerAlert("保存失败。"); return false; } else { treeNode.id = data.result; //将返回的id赋值给当前结点 return true; } 
     }
});

    }
    };

    删除节点数据

    0) { if (nodes[0].children && nodes[0].children.length > 0) { alert("包含下级，无法删除。"); } else { if (confirm("该操作会将关联数据同步删除，是否确认删除？") == true) { $.ajax({ type: "Post",url: "/Design/Delete",data: { "id": nodes[0].id },success: function (data) { if (data.result == "Success") { zTree.removeNode(nodes[0]); } else { alert("删除失败。"); } } }); }; } } };

    2.4 一些总结

    我们通常使用到树形控件做授权或关联类似的操作，一般会先全部取消勾选，然后根据选中的数据关联对树控件的复选框进行选中操作，在大数据量时，大约几万条数据，全部取消勾选+根据关联数据勾选相关节点这个操作通过js执行会很慢，这种情况建议在后台通过关联关系重新组织zTree需要的数据源，对每条数据（对应树节点）设置checked属性，然后再前台页面重新加载树，这种操作速度要快得多。

    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

    jqueryjquery树形控件ztree控件ztree树形菜单

    猜你在找的JavaScript相关文章

    Javascript中的事件冒泡与捕获
    事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
    搞懂js中小数运算精度问题原因及解决办法
    js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
    搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
    什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
    前端对base64编码的理解，原生js实现字符base64编码
    @ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
    搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
    搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
    js判断浏览器是否支持webGL
    起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
    js判断undefined和null
    js判断undefined js判断null js判断null和undefined
    将文字自动转为banner打印形式的工具
    http://patorjk.com/software/taag/
    聊一聊 bootstrap 的轮播图插件
    今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
    js实现图片无缝循环跑马灯
    html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
    HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
    关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作