划重点:源文件(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类似这样的,分别表示第一个一级目录的第一个节点,第二个一级目录下的第三级目录的第一个节点。位数代表分级,数字代表序号。
向选中的节点下添加子节点
- function savecate(){
- var projcatename2 = $('#projcatename2').val();
- var projcatecode2 = $('#projcatecode2').val();
- arr=$('#tree').treeview('getChecked');
- if (projcatename2)
- {
- $.ajax({
- type:"post",
- url:"/admin/project/addprojectcate",
- data: {id:arr[0].id,name:projcatename2,code:projcatecode2},
- success:function(data,status){
- alert("添加“"+data+"”成功!(status:"+status+".)");
- var singleNode = {
- text: projcatename2,
- id:data,
- code:projcatecode2
- };
- $("#tree").treeview("addNode", [singleNode,arr]);
- $('#modalTable2').modal('hide');
- }
- });
- }
- }
- //编辑节点
- function updatecate(){
- var projcatename3 = $('#projcatename3').val();
- var projcatecode3 = $('#projcatecode3').val();
- // var parentid = $('#pid').val();
- arr=$('#tree').treeview('getChecked');
- // var nid = $('#nid').val();//节点顺序号nodeId
- // alert(projcatename2);
- // alert(nid);
- // $.getJSON("treeAddData.json", function (data) {
- // });
- if (projcatename3)
- {
- $.ajax({
- type:"post",
- url:"/admin/project/updateprojectcate",
- data: {id:arr[0].id,name:projcatename3,code:projcatecode3},
- success:function(data,status){
- alert("编辑成功!(status:"+status+".)");
- var singleNode = {
- text: projcatename3,
- id:data,
- code:projcatecode3
- };
- $('#tree').treeview('updateNode', [ arr, singleNode,{ silent: true } ]);
- // $('#tree').treeview('updateNode', [ node, newNode, { silent: true } ]);
- $('#modalTable3').modal('hide');
- }
- });
- }
- }
- //删除节点
- $("#removeButton").click(function() {
- arr=$('#tree').treeview('getChecked');
- if (arr.length==0){
- alert("请先勾选!");
- return;
- }
- var ids="";
- for(var i=0;i<arr.length;i++){
- if(i==0){
- ids=arr[i].id;
- }else{
- ids=ids+","+arr[i].id;
- }
- }
- // var obj = JSON.stringify(arr);
- // alert(arr);
- // alert(obj);
- if(confirm("确定删除吗?第一次提示!")){
- }else{
- return false;
- }
-
- if(confirm("确定删除吗?一旦删除将无法恢复!")){
- $.ajax({
- type:"post",
- url:"/admin/project/deleteprojectcate",
- data: {ids:ids},
- success:function(data,status){
- alert("删除“"+data+"”成功!(status:"+status+".)");
- $('#tree').treeview('removeNode', [ arr, { silent: true } ]);
- }
- });
- }
- })