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

html代码：

<form>
  <div id="treeview" class="treeview"></div>
</form>

 

js代码：

1.要显示的数据（json字符串）：

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

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

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

//递归所有子节点，找到所有层级节点
                    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]);//有第二层，第三层子节点的情况
                                    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 
                    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            
                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)); //将对象转换成字符串
 }, 46                         error: function(d) { 47                             alert(d.responseText); //将对象转换成字符串
 } 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);