bootstrap-treeview 父子节点的全选与取消全选
时间:2020-05-06
本文章向大家介绍bootstrap-treeview 父子节点的全选与取消全选,主要包括bootstrap-treeview 父子节点的全选与取消全选使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
// 选中父节点时,选中所有子节点 function getChildNodeIdArr(node) { var ts = []; if (node.nodes) { for (x in node.nodes) { ts.push(node.nodes[x].nodeId); if (node.nodes[x].nodes) { var getNodeDieDai = getChildNodeIdArr(node.nodes[x]); for (j in getNodeDieDai) { ts.push(getNodeDieDai[j]); } } } } else { ts.push(node.nodeId); } return ts; } // 选中所有子节点时,选中父节点 取消子节点时取消父节点 function setParentNodeCheck(node) { var parentNode = $("#tree").treeview("getNode", node.parentId); if (parentNode.nodes) { var checkedCount = 0; for (x in parentNode.nodes) { if (parentNode.nodes[x].state.checked) { checkedCount++; } else { break; } } if (checkedCount == parentNode.nodes.length) { //如果子节点全部被选 父全选 $("#tree").treeview("checkNode", parentNode.nodeId); setParentNodeCheck(parentNode); } else { //如果子节点未全部被选 父未全选 $('#tree').treeview('uncheckNode', parentNode.nodeId); setParentNodeCheck(parentNode); } } } // 取消父节点时 取消所有子节点 function setChildNodeUncheck(node) { if (node.nodes) { var ts = []; //当前节点子集中未被选中的集合 for (x in node.nodes) { if (!node.nodes[x].state.checked) { ts.push(node.nodes[x].nodeId); } if (node.nodes[x].nodes) { var getNodeDieDai = node.nodes[x]; console.log(getNodeDieDai); for (j in getNodeDieDai) { if (!getNodeDieDai.state.checked) { ts.push(getNodeDieDai[j]); } } } } } return ts; } function getTree() { $('#tree').treeview({ data: res.ret_data, showIcon: false, showCheckbox: true, showBorder: false, onNodeChecked: function (event, node) { //选中节点 var selectNodes = getChildNodeIdArr(node); //获取所有子节点 if (selectNodes) { //子节点不为空,则选中所有子节点 $('#tree').treeview('checkNode', [selectNodes, { silent: true }]); } var parentNode = $("#tree").treeview("getNode", node.parentId); setParentNodeCheck(node); }, onNodeUnchecked: function (event, node) { //取消选中节点 // 取消父节点 子节点取消 var selectNodes = setChildNodeUncheck(node); //获取未被选中的子节点 var childNodes = getChildNodeIdArr(node); //获取所有子节点 if (selectNodes && selectNodes.length == 0) { //有子节点且未被选中的子节点数目为0,则取消选中所有子节点 console.log("反选"); $('#tree').treeview('uncheckNode', [childNodes, { silent: true }]); } // 取消节点 父节点取消 var parentNode = $("#tree").treeview("getNode", node.parentId); //获取父节点 var selectNodes = getChildNodeIdArr(node); setParentNodeCheck(node); } }) }
原文地址:https://www.cnblogs.com/grow-up-up/p/12835797.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Java——设计辅助概念(final关键字、对象多态性基本概念)
- JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战(动态添加删除表格)
- JavaWeb——JavaScript精讲之ECMAScript标准(基本语法、JavaScript对象)
- JavaWeb——HTML基本标签详解及案例实战(文件标签、文本标签、图片标签、列表标签、链接标签、块标签、语义化标签、表格标签)
- JavaWeb——web概念概述(静态资源与动态资源)、HTML概念概述
- Java——内部类使用总结(基本概念、定义内部类、static定义内部类、方法中定义内部类)
- Java——泛型基本总结(通配符、泛型接口、泛型方法)
- Java——类图、时序图、用例图
- Java——四种访问控制权限及Java命名规范
- Java——static关键字总结(含义、定义属性或方法、使用时机)
- Java——try catch finally异常的捕获及处理逻辑实例详解大全
- Java——String类使用详解(实例化、字符串比较、匿名对象、两种实例化方法的区别)
- Java——数组的定义与使用(基本概念、引用分析、初始化方式、二维数组、对象数组)
- Java——单例设计模式
- Java——包的定义及使用