bootstrap-treeview 如何实现全选父节点下所有子节点及反选
转(https://www.augsky.com/992.html)
选中父节点时,父节点下所有子节点也都全部选中
1,HTML代码
<h2>TreeView Checkable</h2>
<div id="treeview-checkable"></div>
2,Json数据
function getTvStateData() {
var defaultData = [
{
text: 'Parent 1',
href: '#parent1',
tags: ['4'],
state: {
checked: true
},
nodes: [
{
text: 'Child 1',
href: '#child1',
tags: ['2'],
nodes: [
{
text: 'Grandchild 1',
href: '#grandchild1',
tags: ['0']
},
{
text: 'Grandchild 2',
href: '#grandchild2',
tags: ['0']
}
]
},
{
text: 'Child 2',
href: '#child2',
tags: ['0']
}
]
},
{
text: 'Parent 2',
href: '#parent2',
tags: ['0'],
nodes: [
{
text: 'Child 1',
href: '#child1',
tags: ['2'],
nodes: [
{
text: 'Grandchild 1',
href: '#grandchild1',
tags: ['0']
},
{
text: 'Grandchild 2',
href: '#grandchild2',
tags: ['0']
}
]
},
{
text: 'Child 2',
href: '#child2',
tags: ['0']
}
]
},
{
text: 'Parent 3',
href: '#parent3'
},
{
text: 'Parent 4',
href: '#parent4',
tags: ['0']
},
{
text: 'Parent 5',
href: '#parent5',
tags: ['0']
}
]; return defaultData;
}
3,JS数据绑定,加载TreeView
$(function() {
var $checkableTree = $('#treeview-checkable')
.treeview({
data: getTvStateData(), //数据
showIcon: false,
showCheckbox: true,
levels: 1,
onNodeChecked: function(event, node) { //选中节点
var selectNodes = getChildNodeIdArr(node); //获取所有子节点
if (selectNodes) { //子节点不为空,则选中所有子节点
$('#treeview-checkable').treeview('checkNode', [selectNodes, { silent: true }]);
}
var parentNode = $("#treeview-checkable").treeview("getNode", node.parentId);
setParentNodeCheck(node);
},
onNodeUnchecked: function(event, node) { //取消选中节点
var selectNodes = getChildNodeIdArr(node); //获取所有子节点
if (selectNodes) { //子节点不为空,则取消选中所有子节点
$('#treeview-checkable').treeview('uncheckNode', [selectNodes, { silent: true }]);
}
},
onNodeExpanded:
function(event, data) {
if (data.nodes === undefined || data.nodes === null) { } else if (data.tags[0] === "2") {
alert("Tags 2");
} else {
alert("1111");
}
}
});
});
4,选中/取消选中父节点时,选中/取消选中所有子节点,以及选中所有子节点时,选中父节点
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 = $("#treeview-checkable").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) {
$("#treeview-checkable").treeview("checkNode", parentNode.nodeId);
setParentNodeCheck(parentNode);
}
}
}
bootstrap-treeview 如何实现全选父节点下所有子节点及反选的更多相关文章
- jQuery 判断父节点下是否有子节点
查找父节点下是否有子节点有两个情况:(1)查找的是父元素的所有后代节点:(2)仅查找父元素的第一代子节点. <div id="app"> <div> < ...
- element-ui default-checked-keys 会把节点下所有子节点全部勾选解决方法
<el-tree class="filter-tree" :data="permissionData" :props="props" ...
- [SQL]T-Sql 递归查询(给定节点查所有父节点、所有子节点的方法)
T-Sql 递归查询(给定节点查所有父节点.所有子节点的方法) -- 查找所有父节点with tab as( select Type_Id,ParentId,Type_Name from Sys_ ...
- 在论坛中出现的比较难的sql问题:21(递归问题 检索某个节点下所有叶子节点)
原文:在论坛中出现的比较难的sql问题:21(递归问题 检索某个节点下所有叶子节点) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. ...
- TreeView树,全选,反选,平级选操作
首先事件选择,选择的是MouseUp事件.为啥?因为凡是跟Check有关的,在选中父节点或者子节点,都会二次触发.然后发生的就是死循环. Up事件就可以避免二次触发.Down事件呢?那就触发After ...
- Bootstrap table 跨页全选
此代码是针对于bootstrap table中分页的跨页全选. 以下是整个bootstrap的定义 <script type="text/javascript" src=&q ...
- bootstrap 中的 iCheck 全选反选功能的实现
喜欢bootstrap 风格的同学应该知道,iCheck的样式还是很好看的. 官网: http://www.bootcss.com/p/icheck/ 进入正题,iCheck提供了一些方法,可以进行全 ...
- T-Sql 递归查询(给定节点查所有父节点、所有子节点的方法)
-- 查找所有父节点with tab as( select Type_Id,ParentId,Type_Name from Sys_ParamType_V2_0 where Type_Id=316-- ...
- JQuery实现的 checkbox 全选;<select>下拉框功能
1. 全选的checkbox选中时,子checkbox全部选中.反之,全部不选 2.子checkbox中,只要有没有被选中的,取消全选checkbox的选中 3.子checkbox的数量和子check ...
随机推荐
- vue实战 - 车牌号校验和银行校验
在看这篇文章之前,我建议大伙可以去把项目demo拉到本地看看.如果觉得写得不好,可以一起提提issues,一起维护.或者大伙有刚需,可以留言,后期会不断完善. 使用方法: git clone http ...
- SQLI DUMB SERIES-14
(1)闭合方式为一对双引号 (2)可用报错注入.如: admin" and extractvalue(1,concat(0x7e,(select database()))) and &quo ...
- PHP 多维数组排序 函数怎么保持数字键不被重新索引
/** * 根据数组中的某个键值大小进行排序,仅支持二维数组 * * @param array $array 排序数组 * @param string $key 键值 * @param bool $a ...
- Lucene架构
先整体上看一下Lucene的架构设计图(见下图),先看上层应用,首先是信息采集的过程,文件系统.数据库.万维网以及手工输入的文件都可以作为信息采集的对象,也是要搜索的文档的来源,采集万维网上的信息一般 ...
- UIImageView自适应图片大小
窗口大小获取: CGRect screenBounds = [ [UIScreenmainScreen]bounds];//返回的是带有状态栏的Rect CGRect rect = [ [UIScre ...
- Centos6.5下使用LAMP搭建discuz论坛(编译安装 PS :自学中 写的不好请见谅)
wget http://mirror.bit.edu.cn/apache/httpd/httpd-2.2.27.tar.gz 下载Apache软件包 wget http://downloads.my ...
- day1||python
测试题: 0. Python 是什么类型的语言? Python是一种面向对象.解释型.动态类型计算机程序设计语言解释型:程序无需编译成二进制代码,而是在执行时对语句一条一条编译动态类型:在程序执行过程 ...
- python 一些方法的时间测试
尝试一些方法的不同实现,比较一下时间,电脑比较渣,不过只是做个比较 虽然用python主要是方便,肯定是不快的,不过能快一点还是快一点好 numpy中大量使用同样 shape 的全 0 array,可 ...
- 引擎设计跟踪(九.14.2j) TableView工具填坑以及多国语言
Blade的UI都是预定义的接口, 然后由插件来负责实现, 目前只有MFC的插件. 最近加上了TableView的视图, 用于一些文件的查看和编辑, 比如前面在文件包的笔记中提到需写一个package ...
- JavaException的使用
(第一个文件 MyException.java) package exception;import java.io.*; //先创建自己的异常类继承与Exception的类 public class ...