最近在公司做项目中用到了一个树(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的更多相关文章

  1. 写一个简单的JQ插件(例子)

    虽然现在 vue angular react 当道啊但是那 JQ还是有一席之地很多很多的小单位啊.其实还会用到 我也放一个例子吧虽然我也不是很肯定有没有人写的比我更好啊但是我相信 我这个还是蛮实用的 ...

  2. Alcatraz -- 一个神奇的管理插件的Xcode插件

    Install Paste this into your terminal: curl -fsSL https://raw.githubusercontent.com/supermarin/Alcat ...

  3. 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件

      前  言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...

  4. 推荐一个内容滚动jquery插件

    myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...

  5. JQ插件之imgAreaSelect实现对图片的在线截图功能(java版)

    前言:在做网站的时候经常用的功能就是,用户上传图片对自己上传的图片进行截图,DIV自己的头像.或者上传幻灯片大图进行DIV设置小图. 解决方案:目前我知道的解决方案有两个如下:       一.fla ...

  6. jq插件处女座 图片轮播

    好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...

  7. 个人学习JQ插件编写成果:little酷炫的图片滑动切换效果

    工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...

  8. js插件ztree使用

    最新给公司后台写了一个配置页面,在网上搜到一个js插件ztree,记录一下使用心得. 首先说一下ztree官网,好多方法我都是从官网api上学习的,官网地址http://www.treejs.cn/v ...

  9. 创建jq插件步骤

    无意看了这篇<jQuery插件开发精品教程,让你的jQuery提升一个台阶>文章,现在做一下总结. 一.jQuery插件的创建可以有三种方法 1.通过$.extend()来扩展jQuery ...

随机推荐

  1. CF613D Kingdom and its Cities 虚树 树形dp 贪心

    LINK:Kingdom and its Cities 发现是一个树上关键点问题 所以考虑虚树刚好也有标志\(\sum k\leq 100000\)即关键点总数的限制. 首先当k==1时 答案显然为0 ...

  2. 痞子衡嵌入式:恩智浦i.MX RT1xxx系列MCU启动那些事(13.A)- LPSPI NOR启动时间(RT1170)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RT1170 1bit SPI NOR恢复启动时间. 本篇是i.MXRT1170启动时间评测第三弹了,前两篇分别给大家评 ...

  3. Python实现图片滑动式验证识别

    1 abstract 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去学习更加高深的知识.那么针对这三类 ...

  4. Spring 中的反射与反射的原理

    作者:DeppWang.原文地址 在造轮子:实现一个简易的 Spring IoC 容器一文中提到 Spring 在创建 Bean 实例和依赖注入时使用了反射,本文来具体分析一下 Spring 中的反射 ...

  5. java动态代理——代理方法的假设和验证及Proxy源码分析五

    前文地址 https://www.cnblogs.com/tera/p/13419025.html 本系列文章主要是博主在学习spring aop的过程中了解到其使用了java动态代理,本着究根问底的 ...

  6. Linux学习笔记之ubuntu如何在vi中写入中文注释

    点击左边设置system settings,再点击Language Suppotr 点击Remind Me Later 选择ibus 然后关闭,在终端写入ibus-setup,弹出设置框,选择INPU ...

  7. 微信公众号怎么发PDF文件?

    微信公众号怎么发PDF文件?   我们都知道创建一个微信公众号,在公众号中发布一些文章是非常简单的,但公众号添加附件下载的功能却被限制,如今可以使用小程序“微附件”进行在公众号中添加附件. 以下是公众 ...

  8. 比原Bapp红包应用

    喜迎国庆期间,比原链在自己的移动端钱包Bycoin(下载地址)和google插件钱byone中推出了红包应用,在国庆期间深受大家好评. 那我们今天就来大概介绍一下比原红包,以及基于比原链开发dapp应 ...

  9. C#LeetCode刷题之#39-组合总和(Combination Sum)

    目录 问题 示例 分析 问题 该文章已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3663 访问. 给定一个无重复元素的数组 candi ...

  10. asp.netcore mvc 防CSRF攻击,原理介绍+代码演示+详细讲解

    一.CSRF介绍 1.CSRF是什么? CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/session ridin ...