关于bootstrap-treeview 如何实现全选父节点下所有子节点及反选

html代码:

1 <form>
2   <div id="treeview" class="treeview"></div>
3 </form>

js代码:

1.要显示的数据(json字符串):

1 var data = '[{"text":"长沙","state":{"expanded":false},
2                                   "nodes":[{"text":"雨花区"},{"text":"岳麓区"},{"text":"芙蓉区"},{"text":"天心区"}]},
3                                   {"text":"岳阳","state":{"expanded":false},
4                                   "nodes":[{"text":"岳阳楼区"},{"text":"云溪区"},{"text":"临湘"}]},
5                                   {"text":"湘潭"},{"text":"株洲"}]'; 

2.初始化以及JS数据绑定,加载TreeView

 1                  $('#treeview').treeview({//初始化
 2                         data: data,
 3                         showTags: true,
 4                         showCheckbox: true,
 5                         levels:1,//设置继承树默认展开的级别设置继承树默认展开的级别
 6                         onNodeChecked: function(event,node){//选中节点
 7                             var selectNodes= getChildNodeIdArr(node);//获取所有节点
 8                             if(selectNodes){//如果子节点不为空,即存在子节点,则选中所有子节点
 9                                 //选择指定的节点,接收节点或节点ID
10                                 $('#treeview').treeview('checkNode',[selectNodes,{silent:true}])
11                                 request("post","A",{list: JSON.stringify(selectNodes)});
12                             }
13                             //返回给定节点ID的单一节点对象
14                             var parentNode=$('#treeview').treeview("getNode",node.parentId);
15                             setParentNodeCheck(node);
16                         },
17                         onNodeUnchecked:function(event,node){//取消选中节点
18                             var selectNodes=getChildNodeIdArr(node);
19                             if(selectNodes){//子节点不为空,则取消选中所有子节点
20                                 $('#treeview').treeview("uncheckNode",[selectNodes,{silent:true}]);
21                                 request("post","B ",{list: JSON.stringify(selectNodes)});
22                             }
23                         }
24                     }); 

3.自定义方法找到所有子节点

 1 //递归所有子节点,找到所有层级节点
 2                     function getChildNodeIdArr(node) {
 3                         var ts = [];
 4                         if(node.nodes) {
 5                             for(x in node.nodes) {
 6                                 ts.push(node.nodes[x].nodeId);
 7                                 if(node.nodes[x].nodes) {
 8                                     var getNodeDieDai = getChildNodeIdArr(node.nodes[x]);//有第二层,第三层子节点的情况
 9                                     for(j in getNodeDieDai) {
10                                         ts.push(getNodeDieDai[j]);
11                                     }
12                                 }
13                             }
14                         } else {
15                             ts.push(node.nodeId);
16                         }
17                         return ts;
18                     }
19 
20                     function setParentNodeCheck(node) {
21                         var parentNode = $("#treeview").treeview("getNode", node.parentId);
22                         if(parentNode.nodes) {
23                             var checkedCount = 0;
24                             for(x in parentNode.nodes) {
25                                 if(parentNode.nodes[x].state.checked) {
26                                     checkedCount++;
27                                 } else {
28                                     break;
29                                 }
30                             }
31                             if(checkedCount === parentNode.nodes.length) {
32                                 $("#treeview").treeview("checkNode", parentNode.nodeId);
33                             setParentNodeCheck(parentNode);
34                             }
35                         }
36                     }
37            
38                 function request(type,url,data) {
39                     $.ajax({
40                         type: type,
41                         url: url,
42                         data: data,
43                         success: function(d) {
44                             alert(JSON.parse(d)); //将对象转换成字符串
45                         },
46                         error: function(d) {
47                             alert(d.responseText); //将对象转换成字符串
48                         }
49                     });
50                    }

这里用到TreeView的方法有:

1.checkNode(node | nodeId, options):选择指定的节点,接收节点或节点ID。

 $('#tree').treeview('checkNode', [ nodeId, { silent: true } ]);触发nodeChecked事件,传入silent来阻止其它事件。

2.getNode(nodeId):返回给定节点ID的单一节点对象。

 $('#tree').treeview('getNode', nodeId);
原文地址:https://www.cnblogs.com/wanm/p/7929121.html