博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
bootstrap-treeview 如何实现全选父节点下所有子节点及反选
阅读量:7012 次
发布时间:2019-06-28

本文共 6190 字,大约阅读时间需要 20 分钟。

转(https://www.augsky.com/992.html)

 

 

 

 

 

 

 

选中父节点时,父节点下所有子节点也都全部选中

1,HTML代码

1 

TreeView Checkable

2

2,Json数据

1  function getTvStateData() { 2             var defaultData = [ 3                 { 4                     text: 'Parent 1', 5                     href: '#parent1', 6                     tags: ['4'], 7                     state: { 8                         checked: true 9                     },10                     nodes: [11                         {12                             text: 'Child 1',13                             href: '#child1',14                             tags: ['2'],15                             nodes: [16                                 {17                                     text: 'Grandchild 1',18                                     href: '#grandchild1',19                                     tags: ['0']20                                 },21                                 {22                                     text: 'Grandchild 2',23                                     href: '#grandchild2',24                                     tags: ['0']25                                 }26                             ]27                         },28                         {29                             text: 'Child 2',30                             href: '#child2',31                             tags: ['0']32                         }33                     ]34                 },35                 {36                     text: 'Parent 2',37                     href: '#parent2',38                     tags: ['0'],39                     nodes: [40                         {41                             text: 'Child 1',42                             href: '#child1',43                             tags: ['2'],44                             nodes: [45                                 {46                                     text: 'Grandchild 1',47                                     href: '#grandchild1',48                                     tags: ['0']49                                 },50                                 {51                                     text: 'Grandchild 2',52                                     href: '#grandchild2',53                                     tags: ['0']54                                 }55                             ]56                         },57                         {58                             text: 'Child 2',59                             href: '#child2',60                             tags: ['0']61                         }62                     ]63                 },64                 {65                     text: 'Parent 3',66                     href: '#parent3'67                 },68                 {69                     text: 'Parent 4',70                     href: '#parent4',71                     tags: ['0']72                 },73                 {74                     text: 'Parent 5',75                     href: '#parent5',76                     tags: ['0']77                 }78             ];79 80             return defaultData;81         }
View Code

3,JS数据绑定,加载TreeView

1  $(function() { 2  var $checkableTree = $('#treeview-checkable') 3                 .treeview({ 4                     data: getTvStateData(), //数据 5                     showIcon: false, 6                     showCheckbox: true, 7                     levels: 1, 8                     onNodeChecked: function(event, node) { //选中节点 9                         var selectNodes = getChildNodeIdArr(node); //获取所有子节点10                         if (selectNodes) { //子节点不为空,则选中所有子节点11                             $('#treeview-checkable').treeview('checkNode', [selectNodes, { silent: true }]);12                         }13                         var parentNode = $("#treeview-checkable").treeview("getNode", node.parentId);14                         setParentNodeCheck(node);15                     },16                     onNodeUnchecked: function(event, node) { //取消选中节点17                         var selectNodes = getChildNodeIdArr(node); //获取所有子节点18                         if (selectNodes) { //子节点不为空,则取消选中所有子节点19                             $('#treeview-checkable').treeview('uncheckNode', [selectNodes, { silent: true }]);20                         }21                     },22                     onNodeExpanded:23                         function(event, data) {24                             if (data.nodes === undefined || data.nodes === null) {25                                26                             } else if (data.tags[0] === "2") {27                                 alert("Tags 2");28                             } else {29                                 alert("1111");30                             }31                         }32                 });33  });
View Code

4,选中/取消选中父节点时,选中/取消选中所有子节点,以及选中所有子节点时,选中父节点

1  function getChildNodeIdArr(node) { 2             var ts = []; 3             if (node.nodes) { 4                 for (x in node.nodes) { 5                     ts.push(node.nodes[x].nodeId); 6                     if (node.nodes[x].nodes) { 7                         var getNodeDieDai = getChildNodeIdArr(node.nodes[x]); 8                         for (j in getNodeDieDai) { 9                             ts.push(getNodeDieDai[j]);10                         }11                     }12                 }13             } else {14                 ts.push(node.nodeId);15             }16             return ts;17         }18 19         function setParentNodeCheck(node) {20             var parentNode = $("#treeview-checkable").treeview("getNode", node.parentId);21             if (parentNode.nodes) {22                 var checkedCount = 0;23                 for (x in parentNode.nodes) {24                     if (parentNode.nodes[x].state.checked) {25                         checkedCount ++;26                     } else {27                         break;28                     }29                 }30                 if (checkedCount === parentNode.nodes.length) {31                     $("#treeview-checkable").treeview("checkNode", parentNode.nodeId);32                     setParentNodeCheck(parentNode);33                 }34             }35         }
View Code

 

转载地址:http://muqtl.baihongyu.com/

你可能感兴趣的文章
打破行业壁垒!阿里云OpenSearch开启个性化搜索里程碑
查看>>
面试官,你再问我 Bit Operation 试试?
查看>>
PSV 3.60 固化升级到 3.68 破解完全攻略
查看>>
Android 路由框架
查看>>
vue踩坑记- Cannot find module 'wrappy'
查看>>
【实操干货】KVM命令管理虚拟机与性能优化
查看>>
机器学习资料合计(一)
查看>>
webpack由浅入深——(webapck简易版)
查看>>
2 - 建立 Django 博客应用
查看>>
【iOS报错】“this class is not key value coding-compliant for the key userPhoneNum”给字典设置键值对的时候报错...
查看>>
UI技术总结--性能优化
查看>>
Android NDK JNI 开发之旅01 环境搭建入门篇
查看>>
Javascript之迭代器模式
查看>>
Flutter花式玩转TextField,写一个验证码输入框超简单!
查看>>
RxJava应用:实现七牛云多图上传
查看>>
Tmux入门教程
查看>>
智能直播审核方案:视频云智能业务截帧策略
查看>>
亲历者说:Kubernetes API 与 Operator,不为人知的开发者战争
查看>>
[ARKit]10-3D模型怎么制作,哪里寻找,如何使用?
查看>>
Kotlin结合DataBinding简单封装一个RecyclerView的Adapter
查看>>