一个神奇的jq插件----zTree
最近在公司做项目中用到了一个树(ztree)的插件,使用起来非常顺手,便写下这篇博客,用来记录一下,以便后续使用
首先先放上ztree官方的地址:http://www.treejs.cn/v3/main.php#_zTreeInfo
开始之前ztree的js和css怎么引用请看这篇博客:https://blog.csdn.net/wangmx1993328/article/details/80075318,我就不再啰嗦,我下面要写的主要是ztree的一些功能
1:实现节点多选
- $scope.SetTimeset = function () {
- workersChanChiServer.getlist().then(function (res) {
- var zNodes = res.result; //数据
- $scope.ztreedata = res.result; //用于展开和关闭
- zTreeObj = $.fn.zTree.init($('#treeDemo'), setting, zNodes); //将数据渲染到页面上
- $scope.liactive();
- })
- }
- var zTreeObj; //数据渲染用的
- var setting = {
- data: {
- key: {
- name: 'nodeName' //要显示文本
- },
- simpleData: {
- enable: true, //是否使用简单数据模式 标准模式:{name:'aa',children:[{name:'bb'},{name:'cc'}]}
- idKey: 'nodeId', //节点
- pIdKey: 'parentId', //父节点
- rootPId: 0
- }
- },
- view: {
- selectedMulti: false, //设置能否同时选择多个节点
- },
- check: {
- enable: true,
- chkStyle: "checkbox",//此处设置为checkbox就可以设置树为多选
- checkboxType: {
- "Y": "s",
- "N": "ps"
- }
- },
- callback: {
- onCheck: function (event, treeId, treeNode, clickFlag) {
- console.log(treeNode)//这里面会打印出点击的某个节点
- }
- }
- }
那么问题来了,既然选择了多选,我们就想拿到我们所有勾选上的值,
2:获取选中节点值
- var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
- var nodes = treeObj.getCheckedNodes(true); //获取所有选中的值
$.fn.zTree.getZTreeObj("treeDemo"),括号里面是ztree树的id,这句话相当于初始化一下树,treeObj.getCheckedNodes(true)会获取到所有勾选上的节点,他返回的是一个数数组,遍历这个数组会得到我们想要的任何数据
那么随之产生额问题来了,很多时候我们只想的到最小节点的数组,也就是根节点的数据,不想得到我们选中节点的父节点,
3:只获取根节点数据
- for (var a = 0; a < nodes.length; a++) {
- // 判断有无下一节点,如果没有就代表是根节点
- if (nodes[a].isParent) {
//这里面代表他是父节点;
return;
}else{
//这里代表不是父节点
//你的代码
}
}
对的,就是代码的这样,遍历我们获取到的所有选中节点数据,然后用ztree的isParent方法,他的返回值时布尔类型,为true就代表是父节点,因此在else里面就可以往一个新的数组里面push遍历后的数据,这样我们的新数组里面就会存放所有根节点的数据,
那么还有问题,我们勾选完成之后调用接口吧数据发送给后台之后,想根据后台来的数据自动回显并打开所勾选的节点,要怎么做呢
4:根据接口数据自动勾选并打开
- workersChanChiServer.gettimehuixian().then(function (res) {
- for (var f = 0; f < res.result.length; f++) {
- var timeztree = $.fn.zTree.getZTreeObj("treeDemo");
- //循环获取所有要回显的id,自动勾选到树上
- timeztree.checkNode(timeztree.getNodeByParam("nodeId", res.result[f].orgId), true)
- var nodes = zTreeObj.getCheckedNodes(true); //获取所有选中的节点
- // 根据选中的节点展开父节点
- for (var i = 0; i < nodes.length; i++) {
- var pNode = nodes[i].getParentNode(); //获取每个节点的父节点
- zTreeObj.expandNode(pNode, true, true, true); //展开该节点
- }
- }
- })
首先解释一下代码标红的字段
checkNode:ztree自带的自动勾选方法
nodeId:要勾选的子节点,也就是这个数的子节点名称
orgId:是nodeld对应的字段,我们从接口返回的数据里面找到对应值
getCheckedNodes:ztree自带的获取所有选中的节点
getParentNode:ztree自带的获取当前节点的父节点
expandNode:ztree自带的展开节点方法
理解了以上几个字段含义,上面说的自动勾选并打开勾选的节点就不是问题,总结一点就是说。根据接口的数据用checkNode方法先自动勾选,然后用getCheckedNodes方法获取所有已经选中的父节点,然后调用wxpandNode方法吧他们的父节点打开,最后说明一点,zTreeObj.expandNode(pNode,true,true,true),写三个true可以理解为js里面的===,不管根节点上面有几层父节点,都会展开
还有一种情况是我们点击父节点时再调用接口去获取该节点下的子节点,并将数据添加到该节点下
5:添加节点到某个节点下
- AddorderParticularsServer.gettitletwo(treeNode.checkItemId, treeNode.checkFormCode, $stateParams.code).then(function (res) {
- $scope.newNode = res.result.children; //需要添加的节点
- var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
- var selectedNode = treeObj.getSelectedNodes(); //获取当前选中节点
- if (selectedNode[0].isParent) {
- // 表示已经添加过了节点
- return;
- } else {
- // 表示没有节点
- if ($scope.newNode.length > 0) {
- // 大于0代表有可以添加的子节点数据
- $scope.newNode = treeObj.addNodes(selectedNode[0], $scope.newNode)
- }
- }
- })
通过代码不难理解,当我们点击某个节点时,可以拿到点击的该节点数据,通过调用接口会获取到该节点下有哪些子节点数据,其中getSelectedNodes方法是获取当前选中的节点,(上面我写的getCheckedNodes 也是获取当前选中节点,这里解释一下,getCheckedNodes 是在有多选条件时用这个方法来获取多个选中的节点,getSelectedNodes 则是在没有多选条件时用来获取单个选中数据),然后调用ztree的addNodes方法将需要添加的子节点数据添加到当前选中节点下,使当前的节点变成父节点,在每一次点击之前都会判断一下当前点击的节点是否为父节点,如果是,就不再添加数据
以上就是我在项目中遇到的一些问题以及解决方案,希望能够帮到你,如有错误,欢迎批评指正
后续补充
// zTree = $.fn.zTree.getZTreeObj("treeDemo");//treeDemo界面中加载ztree的div
// var node = zTree.getNodeByParam("id",101 );
// zTree.cancelSelectedNode();//先取消所有的选中状态
// zTree.selectNode(node,true);//将指定ID的节点选中
// zTree.checkNode(node,true);//将指定ID的复选框选中
// zTree.expandNode(node, true, false);//将指定ID节点展开
一个神奇的jq插件----zTree的更多相关文章
- 写一个简单的JQ插件(例子)
虽然现在 vue angular react 当道啊但是那 JQ还是有一席之地很多很多的小单位啊.其实还会用到 我也放一个例子吧虽然我也不是很肯定有没有人写的比我更好啊但是我相信 我这个还是蛮实用的 ...
- Alcatraz -- 一个神奇的管理插件的Xcode插件
Install Paste this into your terminal: curl -fsSL https://raw.githubusercontent.com/supermarin/Alcat ...
- 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件
前 言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...
- 推荐一个内容滚动jquery插件
myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...
- JQ插件之imgAreaSelect实现对图片的在线截图功能(java版)
前言:在做网站的时候经常用的功能就是,用户上传图片对自己上传的图片进行截图,DIV自己的头像.或者上传幻灯片大图进行DIV设置小图. 解决方案:目前我知道的解决方案有两个如下: 一.fla ...
- jq插件处女座 图片轮播
好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...
- 个人学习JQ插件编写成果:little酷炫的图片滑动切换效果
工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...
- js插件ztree使用
最新给公司后台写了一个配置页面,在网上搜到一个js插件ztree,记录一下使用心得. 首先说一下ztree官网,好多方法我都是从官网api上学习的,官网地址http://www.treejs.cn/v ...
- 创建jq插件步骤
无意看了这篇<jQuery插件开发精品教程,让你的jQuery提升一个台阶>文章,现在做一下总结. 一.jQuery插件的创建可以有三种方法 1.通过$.extend()来扩展jQuery ...
随机推荐
- Python Cookbook(第3版) 中文版 pdf完整版|网盘下载内附提取码
Python Cookbook(第3版)中文版介绍了Python应用在各个领域中的一些使用技巧和方法,其主题涵盖了数据结构和算法,字符串和文本,数字.日期和时间,迭代器和生成器,文件和I/O,数据编码 ...
- 经验分享:一个 30 岁的人是如何转行做程序员,进入IT行业的?
大约一年以前,我成为了一名全职开发者,我想要总结一下这一年的经验,并且和所有人分享,一个 30 多岁的人是如何进入科技行业的: 改变职业是一件吓人的事情,有时候还会成为一件危险的事情.年龄越大,危险就 ...
- linux之DNS主域,从域,缓存服务器的架设
DNS主域,从域,缓存服务器的架设 DNS域名系统 组织域 顶级域 域名解析过程迭代递归 DNS(Domain Name System ) 在Internet中使用IP地址来确定计算机的地址. 为了 ...
- RabbitMQ学习总结(2)-API的使用
1. 引用依赖 <dependency> <groupId>com.rabbitmq</groupId> <artifactId>amqp-clie ...
- 【BZOJ1426】收集邮票 题解 (期望)
题目:有n种不同的邮票,皮皮想收集所有种类的邮票.唯一的收集方法是到同学凡凡那里购买,每次只能买一张,并且买到的邮票究竟是n种邮票中的哪一种是等概率的,概率均为1/n.但是由于凡凡也很喜欢邮票,所以皮 ...
- 设计实现SAM--无服务器应用模型
Author:心谭 From:[Serverless]设计实现SAM--无服务器应用模型 Des: 专注算法与 web 开发的技术博客 什么是SAM? sam全称是:Serverless Applic ...
- 16、Mediator 仲裁者模式
只有一个仲裁者 Mediator 模式 组员向仲裁者报告,仲裁者向组员下达指示,组员之间不在相互询问和相互指示. 要调整多个对象之间的关系时,就需要用到 Mediator 模式.将逻辑处理交给仲裁者执 ...
- 牛客 51011 可达性统计(拓扑排序,bitset)
牛客 51011 可达性统计(拓扑排序,bitset) 题意: 给一个 n个点,m条边的有向无环图,分别统计每个点出发能够到达的点的数量(包括自身) \(n,m\le30000\). 样例: 10 1 ...
- LInux回顾与Shell编程
一.Linux回顾 因为要学习Hadoop大数据,会用到Linux服务器集群来做,因此有必要回顾一下当年大一所学习的Linux知识 ①Linux系统有7个运行级别(runlevel): 运行级别0:系 ...
- Elasticsearch第一篇:在 Windows 上的环境搭建
本文介绍如何在 windows 10 ,64位操作系统上安装最新版本 Elasticsearch.以及相关插件.之前看了不少园友的文章,用到的版本都比较低,尤其是插件的版本要和ES的版本相对应等这些问 ...