前端折腾记之Bootstrap-treeview组件-2021-1019

最新推荐文章于 2024-09-13 22:06:29 发布

sunbcy

最新推荐文章于 2024-09-13 22:06:29 发布

阅读量680

点赞数

分类专栏： Bootstrap-treeview Javascript 文章标签： bootstrap 前端 javascript

本文链接：https://blog.csdn.net/sunbcy/article/details/120847583

版权

Javascript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

Bootstrap-treeview

2 篇文章 0 订阅

订阅专栏

本文详细介绍了Bootstrap Treeview组件的两个主要版本，1.2和2.1，重点讲解了如何在1.2版本中扩展`addNode`方法动态添加子节点，以及在两个版本中删除节点的方法。通过实例代码展示了添加和删除节点的步骤，为开发者提供清晰的操作指南。

摘要由CSDN通过智能技术生成

介绍

目前，国内网上关于Bootstrap的treeview组件的一些教程已有不少。但是大多数教程在给出的时候都没有标明自己所用的bootstrap-treeview.js的版本具体是哪个版本。以至于许多像我这样的小白在参考的时候，非常焦虑。所以准备在这里把自己看过的一些教程和帖子以及自己对这个组件的理解进行一些梳理，方便后来人的参考。

Bootstrap-treeview组件版本

在网络上主要流传着两种版本的bootstrap-treeview.js。分别是1.2和2.1版本。

Bootstrap-treeview的1.2版本

扩展addNode方法动态添加子节点的方法

第一步：在Tree主函数return {/在这里添加addNode的入口/}
```
addNode: $.proxy(this.addNode, this), 
```

第二步：添加Tree的prototype方法

 /** 
    给节点添加子节点 
@param {Object|Number} identifiers - A valid node, node id or array of node identifiers 
@param {optional Object} options.node; 
  */ 
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); 
  }; 
};

如何使用

$("#Treeview01").treeview("addNode", [这里填写父母节点的节点ID,这里写你添加的新的节点node]);

删除节点

 // 删除节点方法
deleteNode: $.proxy(this.deleteNode, this),
deleteChildrenNode: $.proxy(this.deleteChildrenNode, this),

/**
	 * 删除节点，若是根节点不能删除
	 * 获取节点的父节点,
	 * 根据Id删除父节点nodes集合中的自己
	 * 刷新父节点
	 * @param identifiers
	 * @param options
	 */
	Tree.prototype.deleteNode = function (identifiers, options) {
	    this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) {
	        var parentNode = this.getParent(node);
	        if(parentNode && parentNode.nodes != null ){
	            for(var i = parentNode.nodes.length-1; i >= 0; i--){
	                if(parentNode.nodes[i].nodeId == node.nodeId){
	                    parentNode.nodes.splice(i, 1);
	                }
	            }
	            this.setInitialStates({ nodes: this.tree }, 0);
	            this.render();
	        }else{
	            console.log('根节点不能删除');
	        }
	    }, this));
	};
	/**
	 * 删除子节点
	 * 置空子节点 刷新节点
	 * @param node
	 * @param options
	 */
	Tree.prototype.deleteChildrenNode = function (identifiers, options) {
	    this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) {
	        if ( node.nodes != null){
	            node.nodes = null;
	            this.setInitialStates({ nodes: this.tree }, 0);
	            this.render();
	        }
	    }, this));
	};

//删除当前节点下的所有子节点
$("#itemtree").treeview("deleteChildrenNode", id);	
//添加子节点
var addNodes = new Array();
addNodes[0] = id;
addNodes[1] = {node: {text: "新加的菜单", href: "001005" }};
$("#itemtree").treeview("addNode", addNodes);
//当然也可以写成这样
$("#itemtree").treeview("addNode", [id,{node: {text: "新加的菜单", href: "001005" }}]);