bootstrap-treeview自定义操作

2024-10-25 03:40:03

1、自定义函数的实现过程:要实现在bootstrap-treeview库中的新增功能,须要以下几个步骤:1. 申明函数;2. 实现函数功能;3. 调用函数。

bootstrap-treeview自定义操作

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); }};

bootstrap-treeview自定义操作

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); } });};

bootstrap-treeview自定义操作

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

bootstrap-treeview自定义操作
猜你喜欢