参考(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的入口*/}
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
//添加节点 addNode: $.proxy(this.addNode, this), //删除节点 deleteNode: $.proxy(this.deleteNode, this), setDeleteNode: $.proxy(this.setDeleteNode, this),
第二步:添加Tree的prototype方法
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.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(); } };
第三步 调用
<div id="tree1"></div>
Json数据
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.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
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.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 });