JS组件系列——Bootstrap 树控件使用经验分享 - 懒得安分 - 博客园

三级节点2_2

• 三级节点2_3

• 二级节点2_3

• 顶级节点2

• 一级节点2_1

  

  

  这些代码都是直接从网上down下来的，节点上面的图标可以通过样式修改，图标样式也是基于bootstrap的。如果需要动态添加节点，可以自己封装组件去拼html，实现起来应该也比较简单。由以上可知此组件的轻量级，如果你需要对节点作增删改或者选择等操作，不要急，下面的控件可能比较适用。

  二、文件树编辑插件Treed

  ---

  这个组件是从网上找到的，最初演示，组内成员一致觉得效果很赞。因为它通过树形展示，方便的提供了节点的增删改。节点的伸缩效果也比较好。好了来看看。Demo以及下载地址：http://www.jq22.com/jquery-info401

  1、初见Treed

  默认展开一级

  

  点击左边的“+”号和右边的节点都会去展开子节点

  

  多级展开

  

  在左边可以编辑节点名称

  

  按Enter键换行新增兄弟节点，同样删除换行就可以删除节点。

  

  按Enter键后再按下Tab键可以新增子节点

  

  很强大有木有。审核元素可知它使用的是html5的svg标签来实现的，所以对浏览器有一定的要求。

  三、通用树形控件——zTree

  ---

  ztree是一个传统的树形组件，其强大的功能决定他在树形控件界的地位。不管是树形展示，还是编辑，又或者是节点单选和多选，它都提供了强大的功能API。但是，由于它界面效果不太好看，所以很多公司使用它的时候都会有一定的犹豫。所幸，至从出了扁平化风格后，ztree也做了一定的美化，比如它的Metro风格的组件和bootstrap风格就非常相像。今天就来结合Met