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.getChil颊俄岿髭dren = 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_idvar node_list = $("#family_tree").treeview("getChildren", [node_id, {parent: true}]); //node_list是存有所有子节点的JSON对象数组。

7、treeview库使用说明：bootstrap-treeview库使用起来非常灵活。可以方便的增加自己想要的功能。库的代码结构也比较清晰，想学学JS的同学也可以参考这个代码库来构建自己的JS库。