bootstrap-treeview自定义操作
1、自定义函数的实现过程：
要实现在bootstrap-treeview库中的新增功讨救能，须要以下几个步骤：
1. 申明函数；
2. 实现函数功能；
3. 调用函数。
2、自定义函数的申明：
代码如下：
addNode: $.proxy(this.addNode, this), // 增加节点
deleteNode: $.proxy(this.deleteNode, this), // 删除节点
getChildren: $.proxy(this.getChildren, this) // 获取子节点的JSON结构数组
添加的位置在以下函数的return中：
var Tree = function (element, options)
3、增加节点-函数实现：
函数实现的代码如下，增加节点的原理是先往树的JSON对象中增加数据，然后重新渲染JSON数据来更新页面的显示：
Tree.prototype.addNode = function (identifiers, options)
this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) {
node.state.expanded = true; // 加入后节点自动展开
this.setAddNode(node, options);
}, this));
this.setInitialStates({nodes: this.tree}, 0);
this.render();
if (typeof(this.nodeInitCallBack) == "function") {
this.nodeInitCallBack();
祝囊}
};
Tree.prototype.setAddNode = function (node, options) {
if (node.nodes == null) node.nodes = [];
if (options.node) {
node.nodes.push(options.node);
}
};
4、删除节点-函数实现：
函数实现的代码如下，与增加节点的原理一样，先往树的JSON对象中删除数据，然后重新渲染JSON数据来更新页面的显示：
Tree.prototype.deleteNode = function (identifiers, options) {
this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) {
var parentNode = this.getParent(node);
this.setDeleteNode(parentNode, node);
}, this));
if (typeof(this.nodeInitCallBack) == "function") {
this.nodeInitCallBack();
}
};
Tree.prototype.setDeleteNode = function (node, deletenode) {
慎蕉欠if (node.nodes != null) { // 这里的node为要删除节点的父节点
for (var i = node.nodes.length - 1; i >= 0; i--) {
var mynode = node.nodes[i];
if (mynode.item_attr.id === deletenode.item_attr.id) {
node.nodes.splice(i, 1);
break;
}
}
this.setInitialStates({nodes: this.tree}, 0);
this.render();
}
};
5、获取子节点-函数实现：
返回的是子节点JSON对象的一个数数组：
Tree.prototype.getChildren = function (identifiers, options) { var childrenNodeList = []; // 用来存放子节点JOSN对象 this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) {
if (options.parent) { // 如果参数为true，则把父节点也包含进来 var node_attr = {
id: node.item_attr.id, // item_attr不是标准属性，需要自己定义
p_name: node.item_attr.p_name
p_b_date: node.item_attr.p_b_date,
p_sex: node.item_attr.p_sex
}; childrenNodeList.push(node_attr);
} this.getChildrenNode(node, childrenNodeList);
}, this));
return childrenNodeList;
};
Tree.prototype.getChildrenNode = function (node, childrenNodeList) { if (!node.nodes) return;
var parent = node;
var _this = this;
$.each(node.nodes, function (index, node) {
var node_attr = {
id: node.item_attr.id,
p_name: node.item_attr.p_name,
p_b_date: node.item_attr.p_b_date,
p_sex: node.item_attr.p_sex
};
childrenNodeList.push(node_attr); // 把节点JSON对象插入数组
if (node.nodes) {
_this.getChildrenNode(node, childrenNodeList);
}
});
};
6、自定义函数的调用：
增加，删除与获取子结果的调用方法如下：
$("#family_tree").treeview("deleteNode", [node_id]); // node_id为li标签中的data-nodeid属性
$("#family_tree").treeview("addNode", [p_parent_node_id, {node: node}]); // 在通过拖动增加节点时，鼠标放开时的li的node_id就是p_parent_node_id
var node_list = $("#family_tree").treeview("getChildren", [node_id, {parent: true}]); // node_list是存有所有子节点的JSON对象数组。
7、treeview库使用说明：
bootstrap-treeview库使用起来非常灵活。可以方便的增加自己想要的功能。库的代码结构也比较清晰，想学学JS的同学也可以参考这个代码库来构建自己的JS库。
