前言:

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勾选节点后取消勾选其父子节点的更多相关文章

  1. tree的所有节点都勾选上或者取消勾选

    还有一个功能,就是让tree的所有节点都勾选上或者取消勾选,在api中找了一下有一个方法: check target 选中指定节点. 那我们只能是选中根节点后,实现全选. getRoot none 获 ...

  2. easyui Tree模拟级联勾选cascadeCheck,节点选择,父节点自动选中,节点取消,父节点自动取消选择,节点选择,所有子节点全部选择,节点取消,所有子节点全部取消勾选

    最近项目中用到easyui tree,发现tree控件的cascadeCheck有些坑,不像miniui 的tree控件,级联勾选符合业务需求,所以就自己重新改写了onCheck事件,符合业务需求.网 ...

  3. iView中Tree组件children中动态checked选中后取消勾选再选中无效问题

    如题,我有一个Tree组件,动态更新check选中子级列表的时候,取消勾选了再点击选中时复选框样式不是勾选状态,但是数据已经有了. 对此解决方案是:将初始化时Tree组件data数据深拷贝一遍再去判断 ...

  4. js 全选选框与取消全选代码

    设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消.全选后点击某个子选框,全选也能取消.当四个子选框都选中时,全选框也被选择. 实现代码: <script& ...

  5. Ztree加载完成后显示勾选节点

    ①前言:这个在度娘上没有搜到解决的办法,于是自己查看了ztree的API,发现其实还是比较简单的.做个笔记以备不时之需. ②需求: 像下图一样,在加载完成之后就显示需要勾选的项. ③解决方案: 首先页 ...

  6. bootgrid修改成可以全勾选和全取消勾选操作

    1. 引言 由于项目需要,需要在不同页面上选择全勾选能全部勾选所有的记录,反勾选也如此.这个需求可以解决了一个样例:如果有150条记录,当前页就10条,你又在每一个页面勾选部分的记录,然后,如果你要全 ...

  7. react实现全选、取消全选和个别选择

    react里面实现全选和取消全选,个别选择等操作,效果如下 代码: import React, {Component} from 'react' export default class Demo e ...

  8. 拿来主义:treeview插件父子节点问题

    鄙人公司没有专门的前端,所以项目开发中都是前后端一起抡.最近用bootstrap用的比较频繁,发现bootstrap除了框架本身的样式组件外,还提供了多种插件供开发者选择.本篇博文讲的就是bootst ...

  9. 实现CTreeCtrl父子节点的联动选择

    本文实现了下面的功能: 当选中父节点时, 其所有子节点全部选中. 当取消选中父节点时, 其所以子节点全部取消选中. 点击子节点时, 根据子节点与其兄弟节点的选中状态, 自动设置父节点的选中状态. 通过 ...

随机推荐

  1. 使用MvcMiniProfiler调试ASP.NET MVC网站性能

    http://www.cnblogs.com/qiuliang/archive/2011/12/01/2270909.html 使用MiniProfiler给Asp.net MVC和Entity Fr ...

  2. bzoj 2660: [Beijing wc2012]最多的方案【dp】

    有点神奇的dp 首先注意到任意一个数都能被表示成若干个斐波那契数的和的形式 先求出n可以字典序最大的表示 设f[i][0/1]表示第i个斐波那契数选或者不选 如果当前数不选,那就选比他小的两个数,否则 ...

  3. bzoj 1407: [Noi2002]Savage【扩展欧几里得+中国剩余定理】

    首先答案不会很大,所以枚举答案m,于是把问题转为了判定: 关于如何判定: 首先题目中虽然没说但是数据是按照初始洞穴编号排的序,所以并不用自己重新再排 假设当前答案为m,相遇时间为x,野人i和j,那么可 ...

  4. 51nod 1220 约数之和【莫比乌斯反演+杜教筛】

    首先由这样一个式子:\( d(ij)=\sum_{p|i}\sum_{q|j}[gcd(p,q)==1]\frac{pj}{q} \)大概感性证明一下吧我不会证 然后开始推: \[ \sum_{i=1 ...

  5. bzoj3265: 志愿者招募加强版(线性规划+单纯形法)

    传送门 鉴于志愿者招募那题我是用网络流写的所以这里还是写一下单纯形好了-- 就是要我们求这么个线性规划(\(d_{ij}\)表示第\(i\)种志愿者在第\(j\)天能不能服务,\(x_i\)表示第\( ...

  6. (5)css盒子模型(基础上)

    CSS 盒子模型概述 ***什么是CSS的盒子模型呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).边框(border).内边距(padding).外边距(margin ...

  7. Python上下文管理器(Context managers)

    上下文管理器(Context managers) 上下文管理器允许你在有需要的时候,精确地分配和释放资源. 使用上下文管理器最广泛的案例就是with语句了.想象下你有两个需要结对执行的相关操作,然后还 ...

  8. 异或+构造 HDOJ 5416 CRB and Tree

    题目传送门 题意:给一棵树,问f (u, v) 意思是u到v的所有路径的边权值的异或和,问f (u, v) == s 的u,v有几对 异或+构造:首先计算f (1, u) 的值,那么f (u, v) ...

  9. ACM_逆序数(归并排序)

    帮挂科 Time Limit: 2000/1000ms (Java/Others) 64bit IO Format: %lld & %llu Problem Description: 冬瓜发现 ...

  10. sed练习第一节

    ed语法和基本命令 employee.txt文件内容如下: 101,John Doe,CEO 102,Jason Smith,IT Manager 103,Raj Reddy,Sysadmin 104 ...