bootstrap-treeview插件学习小结

摘要: bootstrap-treeview

由于项目需求且经过大家慎重的考虑，所有一致任务用bootstrap框架来做前端开发，好处是开源，可以修改源代码。bootstrap是最搜欢迎的html、css和js框架，用于开户响应式布局，移动项目优先的web项目，呵呵，大家都懂的，bootstrap的定义小编在此就不用多说了吧，呵呵，好了进入正题。因为是开源，所以可以修改。一开始我也说了，请允许我再说一遍，小编在此分为以下几点来讲。

一、bootstrap-treeview下载地址

https://github.com/jonmiles/bootstrap-treeview，此链接即是插件官网，它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。小编在此要感谢作者做出的贡献，呵呵~~~

（1） 常用属性说明

text

节点名称

字符串。强制性的

显示的文本值对于一个给定的树节点,节点通常右边的图标。

nodeId

节点ID

color

字符串,任何合法的颜色值。默认值:从Bootstrap.css继承。

设置默认前景颜色使用的所有节点,除非覆盖在每个节点的基础上的数据。

二、选项

data

没有默认项。

数据格式

{
text: "Node 1",
icon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
href: "#node-1",
tags: ['available'],
nodes: [
{},
...
]
}

需要说明的是:tags

三、方法和事件

目前bootstrap-treeview对外开放的方法只有一个，就remove，我们可以扩展插件，这就是开源的好处，大家都可以修改，事件也只有一个，就是

onNodeSelected

那么目前我对改插件增加了一个事件和若个人方法，代码如下：

onNotNodeSelected: undefined

// Actually triggers the notNodeSelected event

_triggerNotNodeSelectedEvent: function(node) {

this.$element.trigger('notNodeSelected', [$.extend(true, {}, node)]);

},

createNode: function (arrNode, node) {

var _self = this;

for (var i = 0; i < arrNode.length; i++) {

if (node.nodes) {

if (arrNode[i].nodeId == node.nodeId) {

arrNode.push(node);

} else {

if (arrNode[i].nodes) {

_self.createNode(arrNode[i].nodes, node);

}

}

} else {

arrNode.push(node);

}

}

},

clearNode: function (arrNode, node) {

var _self = this;

for (var i = 0; i < arrNode.length; i++) {

if (arrNode[i].nodeId == node.nodeId) {

arrNode.splice(i, 1);

} else {

if (arrNode[i].nodes) {

_self.clearNode(arrNode[i].nodes, node);

}

}

}

},

等等，但这些扩展的方法和事件都是基于bootstrap-treeview插件的，呵呵

小编写的不好，大家不要骂我啊，不过骂我，我有不会当真，各位如果有什么好的建议还望提出来，大家都要共同进步不是吗？

对了，我还有个疑问，就是该插件中没有提供修改节点，删除节点，增加节点，展开节点，选择节点等方法供外部调用，如果有那位大侠知道，麻烦告知小弟，非常感谢！