Bootstrap treeview增加或者删除節點

參考（AddNode： http://blog.csdn.net/qq_25628235/article/details/51719917，deleteNode：http://blog.csdn.net/u012718733/article/details/53288584）

Bootstrap treeview增加或者删除節點 

功能說明：展開節點時，新增子節點。選中節點時，删除節點

第一步：在bootstrap-treeview.js檔案中，在Tree主函數return {/*在這裡添加addNode的入口*/ 和 {/*在這裡添加deleteNode的入口*/}  

//添加節點
            addNode: $.proxy(this.addNode, this),
            //删除節點
            deleteNode: $.proxy(this.deleteNode, this),
            setDeleteNode: $.proxy(this.setDeleteNode, this),      

View Code

第二步：添加Tree的prototype方法

Tree.prototype.addNode = function(identifiers, options) {
        this.forEachIdentifier(identifiers,options,
            $.proxy(function(node, options) {
                    this.setAddNode(node, options);
                },
                this));

        this.setInitialStates({ nodes: this.tree }, 0);
        this.render();
    }

    Tree.prototype.setAddNode = function(node, options) {
        if (node.nodes == null) node.nodes = [];
        if (options.node) {
            node.nodes.push(options.node);
        };
    };

    Tree.prototype.deleteNode = function (identifiers, options) {
        this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) {
            var parentNode = this.getParent(node);
            this.setDeleteNode(parentNode, node, options);
        }, this));
    };

    Tree.prototype.setDeleteNode = function (node, deletenode, options) {
        if (node.nodes != null) {
            for (var i = node.nodes.length - 1; i >= 0; i--) {
                var mynode = node.nodes[i];
                if (mynode.id === deletenode.id) {
                    node.nodes.splice(i, 1);
                }
            }
            this.setInitialStates({ nodes: this.tree }, 0);
            this.render();
        }
    };      

第三步 調用

<div id="tree1"></div>      

 Json資料

1  function getTree() {
 2             var data = [
 3                 {
 4                     text: "p1",
 5                     id: '0',
 6                     nodes: [
 7                         { text: "p1-1", id: '1' },
 8                         { text: "p1-2", id: '2' },
 9                         { text: "p1-3", id: '3' },
10                         {
11                             text: "p1-4",
12                             id: '4',
13                             nodes: [
14                                 {
15                                     text: 'p1-1-1',
16                                     id: '5'
17                                 }
18                             ]
19                         }
20                     ]
21                 }
22             ];
23             return data;
24         }      

綁定Treeview

1 $("#tree1")
 2                         .treeview({
 3                             data: getTree(),
 4                             showIcon: false,
 5                             showCheckbox: true,
 6                             onhoverColor: "#E8E8E8",
 7                             showBorder: false,
 8                             showTags: true,
 9                             highlightSelected: true,
10                             highlightSearchResults: false,
11                             selectedBackColor: "#8D9CAA",
12                             levels: 2,
13                             onNodeSelected: function(event, data) {
14                                 alert(data.nodeId);
15                                 if (data.nodes === undefined || data.nodes === null) {
16                                     return;
17                                 }
18                                 $("#tree1").treeview("deleteNode", [data.nodeId, { silent: true }]);
19                                 //nodeData是checkedNode或者selectedNode，選中或者checked這個節點， 該節點如果有父節點的話就會被删除。
20                             },
21                             onNodeExpanded:
22                                 function(event, data) {
23                                         $.ajax({
24                                             type: "Post",
25                                             url: "/Bootstrap/GetExpandJson?id=" + data.id,
26                                             dataType: "json",
27                                             success: function (result) {
28                                                 for (var index = 0; index < result.length; index++) {
29                                                     var item = result[index];
30                                                     $("#tree1")
31                                                         .treeview("addNode",
32                                                         [
33                                                             data.nodeId,
34                                                             { node: { text: item.text, id: item.id }, silent: true }
35                                                         ]);
36                                                 }
37                                             }
38                                         });
39                                 }
40                         });