bootstrap treeview 增删改的正确姿势

我的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},//父级id
                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 } ]);
          }
        });
      }
    })