關於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);