Ztree勾选节点后取消勾选其父子节点
前言:
Ztree官方给的API可以设置勾选一个节点的同时勾选子节点或者父节点,也可以设置不影响父子节点,即将chkboxType设置为{"Y":"","N":""},而有时我们希望实现这样的功能,点击一个节点判断他所有的父节点和子节点,如果有选中的话就取消勾选,这样的话官方貌似没有给出有效的解决方案,这篇文章记录一下我是怎么解决这个问题的。
需求:
点击一个节点,判断他所有的父节点和子节点,如果有选中的节点,则取消选中。
实现步骤:
首先看下官方给的API
这里给个传送门:点击这里

可以看到其实官方给的是这样的逻辑:
假设有这样一组数据:
江苏、南京、XX区域、XX街道、XX小区
那么在勾选南京的时候其实要么选中所有子节点、要么选中所有父节点。或者不影响父子节点。
而要实现上面的需求肯定是要先设置为不影响父子节点,如下所示效果:

然后循环遍历其父节点和子节点,设置checked属性为false即可;
几点需要注意的:
1.这里子节点是一个递归操作,子节点的子节点也应该被取消选中。
2.treeNode.getPath();可以获取当前节点的所有父节点,包括他自己,所以要把自身排除。
3.每次设置完checked属性为false之后,应该更新一下节点,否则没有直接效果,鼠标滑过才会有效果。
示例代码如下:
function customBeforeCheck(event, treeId, treeNode,treeObj) {
var childNodes = treeNode.children;
for(var i=0;i<childNodes.length;i++) {
recursion(childNodes[i],treeObj);
}
var parenNodes = treeNode.getPath();
for(var i=0;i<parenNodes.length;i++) {
if(parenNodes[i] != null && parenNodes[i].id != treeNode.id) {
parenNodes[i].checked = false;
treeObj.updateNode(parenNodes[i]);
}
}
}
function recursion(node,treeObj) {
if(node.children && node.children.length >0) {
node.checked = false;
for(var i=0;i<node.children.length;i++) {
recursion(node.children[i],treeObj);
}
}else{
node.checked = false;
}
treeObj.updateNode(node);
}
Ztree勾选节点后取消勾选其父子节点的更多相关文章
- tree的所有节点都勾选上或者取消勾选
还有一个功能,就是让tree的所有节点都勾选上或者取消勾选,在api中找了一下有一个方法: check target 选中指定节点. 那我们只能是选中根节点后,实现全选. getRoot none 获 ...
- easyui Tree模拟级联勾选cascadeCheck,节点选择,父节点自动选中,节点取消,父节点自动取消选择,节点选择,所有子节点全部选择,节点取消,所有子节点全部取消勾选
最近项目中用到easyui tree,发现tree控件的cascadeCheck有些坑,不像miniui 的tree控件,级联勾选符合业务需求,所以就自己重新改写了onCheck事件,符合业务需求.网 ...
- iView中Tree组件children中动态checked选中后取消勾选再选中无效问题
如题,我有一个Tree组件,动态更新check选中子级列表的时候,取消勾选了再点击选中时复选框样式不是勾选状态,但是数据已经有了. 对此解决方案是:将初始化时Tree组件data数据深拷贝一遍再去判断 ...
- js 全选选框与取消全选代码
设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消.全选后点击某个子选框,全选也能取消.当四个子选框都选中时,全选框也被选择. 实现代码: <script& ...
- Ztree加载完成后显示勾选节点
①前言:这个在度娘上没有搜到解决的办法,于是自己查看了ztree的API,发现其实还是比较简单的.做个笔记以备不时之需. ②需求: 像下图一样,在加载完成之后就显示需要勾选的项. ③解决方案: 首先页 ...
- bootgrid修改成可以全勾选和全取消勾选操作
1. 引言 由于项目需要,需要在不同页面上选择全勾选能全部勾选所有的记录,反勾选也如此.这个需求可以解决了一个样例:如果有150条记录,当前页就10条,你又在每一个页面勾选部分的记录,然后,如果你要全 ...
- react实现全选、取消全选和个别选择
react里面实现全选和取消全选,个别选择等操作,效果如下 代码: import React, {Component} from 'react' export default class Demo e ...
- 拿来主义:treeview插件父子节点问题
鄙人公司没有专门的前端,所以项目开发中都是前后端一起抡.最近用bootstrap用的比较频繁,发现bootstrap除了框架本身的样式组件外,还提供了多种插件供开发者选择.本篇博文讲的就是bootst ...
- 实现CTreeCtrl父子节点的联动选择
本文实现了下面的功能: 当选中父节点时, 其所有子节点全部选中. 当取消选中父节点时, 其所以子节点全部取消选中. 点击子节点时, 根据子节点与其兄弟节点的选中状态, 自动设置父节点的选中状态. 通过 ...
随机推荐
- Pascal约瑟夫问题
program Project2; {$APPTYPE CONSOLE} const n=; m=; Type peopleno= ..n] of integer; var datering:peop ...
- Linux 软链接 硬链接 ln命令(简约说明版)
注意:路径使用绝对路径!! 解决方法: 当我们需要在不同的目录下用到同一个文件时,会用到以下命令. 命令:ln 作用:为某一个文件在另外一个位置建立一个同步的链接 语法:ln [option] 源文件 ...
- Ubuntu 14.04.1 配置 Android 源码开发环境(jdk版本切换)(转载)
转自:http://www.cnblogs.com/ren-gh/p/4248407.html # Ubuntu 14.04.1 1.更新源: sudo apt-get update 安装vim工具: ...
- ios http2客户端访问nginx失败bug
我们将项目迁入腾讯云后,外网访问流量转发如下外网--->大禹BGP(BGPAntiDDoS)高防---->lbc(LoadBalance cluster)---->lb-----&g ...
- null、undefined和NaN的简洁比较
Null 类型也只有一个值,即null.null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象.Undefined 类型只有一个值,即undefined.当声明的变量还未被初始化时,变 ...
- bzoj 5195: [Usaco2018 Feb]Directory Traversal【树形dp】
注意到目录是一颗树结构,然后就简单了,预以1为根的处理出dis[u]为以这个点为根,到子树内的目录总长,si为子树内叶子数 第二遍dfs换根即可 #include<iostream> #i ...
- 利用动态扫描和定时器1在数码管上显示出从765432开始以1/10秒的速度往下递减 直至765398并保持此数,与此同时利用定时器0以500MS速度进行流水灯从上至下移动 ,当数码管上数减到停止时,实验板上流水灯出停止然后全部开始闪烁,3秒后(用 T0定时)流水灯全部关闭,数码管上显示出“HELLO”,到此保持住
#include <reg52.h> #include <intrins.h> #define uchar unsigned char #define uint unsigne ...
- php 文件锁flock解决并发
方案一:使用文件锁排它锁 flock函数用于获取文件的锁,这个锁同时只能被一个线程获取到,其它没有获取到锁的线程要么阻塞,要么获取失败 在获取到锁的时候,先查询,如果查询成功则进行操作,然后释放锁 f ...
- 使用Navicat迁移MySQL数据至Oracle时大小写原因报“表或视图不存在”问题处理
使用Navicat提供的数据传输工具将JEECMSv9的MySQL的数据迁移至Oracle数据库,数据迁移成功表都存在,但是在程序启动时提示表或视图不存在. Caused by: java.sql.S ...
- Linux环境下ZooKeeper集群环境搭建关键步骤
ZooKeeper版本:zookeeper-3.4.9 ZooKeeper节点:3个节点 以下为Linux环境下ZooKeeper集群环境搭建关键步骤: 前提条件:已完成在Linux环境中安装JDK并 ...