bootstrap treeview 增删改查 的正确姿势

划重点：源文件（js和css）存在bug，比如updateNode更新节点的时候，如果更新的节点下面有子节点，则更新过之后，子节点就没了，网上有人已改过了，下载直接覆盖即可，地址：

http://blog.csdn.net/qq812858143/article/details/68945157

以下为转载内容：

我的engineercms中大量使用bootstrap treeview，如果不能实现增删改那只能换成ztree了。不过还是找到了解决方法。

网上的方法都是基于https://github.com/jonmiles原版的treeview，采用在源码中增加方法达到目的，比如：

bootstrap-treeview 扩展 添加多个子节点、删除节点、删除全部子节点 和 惰性加载的应用

bootstrap-treeview 扩展addNode方法 动态添加子节点的方法

bootstrap-treeview 扩展addNode deleteNode方法 动态添加删除子节点的方法

bootstrap-treeview addNode deleteNode editNode 全都奉上

而用google搜索bootstrap treeview addnode，就找到了https://www.npmjs.com/package/patternfly-bootstrap-treeview也就是这个https://github.com/patternfly/patternfly-bootstrap-treeview，这里实现了增删改的方法。

addNode(nodes, parentNode, index, options)

Add nodes to the tree.

$('#tree').treeview('addNode', [ nodes, parentNode, index, { silent: true } ]);

If parentNode evaluates to false, node will be added to root

If index evaluates to false, node will be appended to the nodes

Triggers nodeRendered event; pass silent to suppress events.

removeNode()

Removes given nodes from the tree.

$('#tree').treeview('removeNode', [ nodes, { silent: true } ]);

updateNode(node, newNode, option)

Updates / replaces a given tree node.

$('#tree').treeview('updateNode', [ node, newNode, { silent: true } ]);

Triggers nodeRendered event; pass silent to suppress events.

当然，还有其他非常好的方法，比如父子孙节点联动。

hierarchicalCheck

Boolean. Default: false

Whether or not to enable hierarchical checking/unchecking of checkboxes.

propagateCheckEvent

Boolean. Default: false

Whether or not to propagate nodeChecked and nodeUnchecked events to the parent/child nodes, used in conjunction with hierarchicalCheck.

这里的坑，就是nodeid已经不是一个数字，旧版的nodeid是将展开后的tree从上往下排序，1代表最上面那个节点，以此类推。而新的变成了，0.0或者1.0.0.0类似这样的，分别表示第一个一级目录的第一个节点，第二个一级目录下的第三级目录的第一个节点。位数代表分级，数字代表序号。

向选中的节点下添加子节点

[javascript] view plain copy

1. function savecate(){  
2.         var projcatename2 = $('#projcatename2').val();  
3.         var projcatecode2 = $('#projcatecode2').val();  
4.         arr=$('#tree').treeview('getChecked');  
5.       if (projcatename2)  
6.         {    
7.             $.ajax({  
8.                 type:"post",  
9.                 url:"/admin/project/addprojectcate",  
10.                 data: {id:arr[0].id,name:projcatename2,code:projcatecode2},//父级id  
11.                 success:function(data,status){  
12.                   alert("添加“"+data+"”成功！(status:"+status+".)");  
13.                   var singleNode = {  
14.                     text: projcatename2,  
15.                     id:data,  
16.                     code:projcatecode2  
17.                   };  
18.                   $("#tree").treeview("addNode", [singleNode,arr]);  
19.                   $('#modalTable2').modal('hide');  
20.                  }  
21.             });    
22.         }    
23.     }  

[html] view plain copy

1. //编辑节点  
2.     function updatecate(){  
3.         var projcatename3 = $('#projcatename3').val();  
4.         var projcatecode3 = $('#projcatecode3').val();  
5.         // var parentid = $('#pid').val();  
6.         arr=$('#tree').treeview('getChecked');  
7.         // var nid = $('#nid').val();//节点顺序号nodeId  
8.         // alert(projcatename2);  
9.         // alert(nid);  
10.         // $.getJSON("treeAddData.json", function (data) {  
11.         // });   
12.       if (projcatename3)  
13.         {  
14.           $.ajax({  
15.             type:"post",  
16.             url:"/admin/project/updateprojectcate",  
17.             data: {id:arr[0].id,name:projcatename3,code:projcatecode3},  
18.             success:function(data,status){  
19.               alert("编辑成功！(status:"+status+".)");  
20.               var singleNode = {  
21.                 text: projcatename3,  
22.                 id:data,  
23.                 code:projcatecode3  
24.               };  
25.               $('#tree').treeview('updateNode', [ arr, singleNode,{ silent: true } ]);  
26.               // $('#tree').treeview('updateNode', [ node, newNode, { silent: true } ]);  
27.               $('#modalTable3').modal('hide');  
28.             }  
29.           });  
30.         }  
31.     }  

[html] view plain copy

1. //删除节点  
2.     $("#removeButton").click(function() {  
3.       arr=$('#tree').treeview('getChecked');  
4.         if (arr.length==0){  
5.           alert("请先勾选！");  
6.           return;  
7.         }  
8.       var ids="";  
9.       for(var i=0;i<arr.length;i++){  
10.         if(i==0){  
11.           ids=arr[i].id;  
12.         }else{  
13.           ids=ids+","+arr[i].id;  
14.         }    
15.       }  
16.     // var obj = JSON.stringify(arr);  
17.     // alert(arr);  
18.     // alert(obj);  
19.       if(confirm("确定删除吗？第一次提示！")){  
20.       }else{  
21.         return false;  
22.       }  
23.   
24.       if(confirm("确定删除吗？一旦删除将无法恢复！")){  
25.         $.ajax({  
26.           type:"post",  
27.           url:"/admin/project/deleteprojectcate",  
28.           data: {ids:ids},  
29.           success:function(data,status){  
30.             alert("删除“"+data+"”成功！(status:"+status+".)");  
31.             $('#tree').treeview('removeNode', [ arr, { silent: true } ]);  
32.           }  
33.         });  
34.       }  
35.     })