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插件的，呵呵

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

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

          

           

转载于:https://my.oschina.net/u/2012346/blog/323653