1、首先用一个div存放下拉树
<div id ='itemtree'></div>
2、引用bootstrap的js文件和css文件
<script src="../bootstrap-treeview.js"></script>
<link rel="stylesheet" href="../bootstrap-treeview.css">
3、修改bootstrap-treeview.js,添加addNode和deleteNode方法
3.1 在var Tree = function (element, options)方法的return中添加如下代码:
// 添加节点方法
addNode: $.proxy(this.addNode, this),
// 删除节点方法
deleteNode: $.proxy(this.deleteNode, this),
deleteChildrenNode: $.proxy(this.deleteChildrenNode, this),
3.2 在var Tree = function (element, options)方法下面新增添加和删除的方法,代码如下:
// 给节点添加子节点
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) {
/*若当前要插入子节点的父节点没有任何子节点,则将[]赋给父节点,
否则node.nodes会出现undefined的错误*/
if (node.nodes == null) {
node.nodes = [];
}
if (options.node) {
node.nodes.push(options.node);
}
};
/**
* 删除节点,若是根节点不能删除
* 获取节点的父节点,
* 根据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));
};
4、调用添加和删除子节点的方法
//删除当前节点下的所有子节点
$("#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" }}]);
5、节点id的获取
在上述调用添加和删除子节点的代码中,用到了父节点的id,我们可以用bootstrap-treeview的onNodeSelected(选中节点)和onNodeExpanded(展开节点)来获取id,代码如下:
$('#itemtree').treeview({
onNodeExpanded : function(event,data){
var id = data['nodeId']; //获取节点的nodeId,nodeId是自动生成的,节点的唯一标识
}
onNodeSelected : function(event,data){
var id = data['nodeId']; //获取节点的nodeId
}
});
最后附上bootstrap-treev.js和bootstrap-treev.css的百度云资源链接:
链接:https://pan.baidu.com/s/1ErwzDUVE0rpFXUtNCT7RNw
提取码:68u1