Bootstrap treeview增加或者删除节点

た入场券 2021-09-17 13:14 651阅读 0赞

参考（AddNode： [http://blog.csdn.net/qq\_25628235/article/details/51719917][http_blog.csdn.net_qq_25628235_article_details_51719917]，deleteNode：[http://blog.csdn.net/u012718733/article/details/53288584][http_blog.csdn.net_u012718733_article_details_53288584]）

功能说明：展开节点时，新增子节点。选中节点时，删除节点

第一步：在bootstrap-treeview.js文件中，在Tree主函数return \{/\*在这里添加addNode的入口\*/ 和 \{/\*在这里添加deleteNode的入口\*/\}

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

第二步：添加Tree的prototype方法

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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();
            }
        };

第三步 调用

Json数据

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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                         });

[http_blog.csdn.net_qq_25628235_article_details_51719917]: http://blog.csdn.net/qq_25628235/article/details/51719917
[http_blog.csdn.net_u012718733_article_details_53288584]: http://blog.csdn.net/u012718733/article/details/53288584
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20210726/08d7a6cccece47e8ae25fa719cacc730.png