天天看点

JS组件系列——Bootstrap 树控件使用经验分享

前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项。不管怎么样,树控件都是很多项目里面不可或缺的组件之一。今天,博主打算结合自己的使用经历和网上找到的一些不错的树控件在这里做一个分享,希望能帮大家找到最合适的控件。还是那句话:控件没有最好,只有最合适。

全部收起

JS组件系列——Bootstrap 树控件使用经验分享

展开一级

JS组件系列——Bootstrap 树控件使用经验分享

全部展开

JS组件系列——Bootstrap 树控件使用经验分享

此控件实现起来也非常简单,只需要引用jQuery和bootstrap组件即可。

JS组件系列——Bootstrap 树控件使用经验分享
JS组件系列——Bootstrap 树控件使用经验分享
JS组件系列——Bootstrap 树控件使用经验分享
JS组件系列——Bootstrap 树控件使用经验分享
JS组件系列——Bootstrap 树控件使用经验分享
JS组件系列——Bootstrap 树控件使用经验分享
JS组件系列——Bootstrap 树控件使用经验分享
JS组件系列——Bootstrap 树控件使用经验分享

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

默认展开一级

JS组件系列——Bootstrap 树控件使用经验分享

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

JS组件系列——Bootstrap 树控件使用经验分享

多级展开

JS组件系列——Bootstrap 树控件使用经验分享

在左边可以编辑节点名称

JS组件系列——Bootstrap 树控件使用经验分享

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

JS组件系列——Bootstrap 树控件使用经验分享

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

JS组件系列——Bootstrap 树控件使用经验分享

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

此组件可直接通过Nuget去添加。

JS组件系列——Bootstrap 树控件使用经验分享

节点全部收起

JS组件系列——Bootstrap 树控件使用经验分享

节点展开

JS组件系列——Bootstrap 树控件使用经验分享

节点选中,当然如果需要可以变成单选。

JS组件系列——Bootstrap 树控件使用经验分享

可以增删改节点

JS组件系列——Bootstrap 树控件使用经验分享
JS组件系列——Bootstrap 树控件使用经验分享

点击文本框出现树

JS组件系列——Bootstrap 树控件使用经验分享

3.1 直接在界面显示文本框

需要引用的js和css文件

页面html

Js初始化

JS组件系列——Bootstrap 树控件使用经验分享
JS组件系列——Bootstrap 树控件使用经验分享
JS组件系列——Bootstrap 树控件使用经验分享
JS组件系列——Bootstrap 树控件使用经验分享

3.2 默认隐藏,触发某个事件的时候出现树。这种场景在项目里面非常常见,一般用于选择树节点。所以博主把这个也单独拿出来说下吧。

div默认是隐藏的。

在js里面初始化树以及注册showMenu()方法

JS组件系列——Bootstrap 树控件使用经验分享
JS组件系列——Bootstrap 树控件使用经验分享
JS组件系列——Bootstrap 树控件使用经验分享
JS组件系列——Bootstrap 树控件使用经验分享

由于以上都是静态数据,如果需要从后台取数据动态加载树节点,可以去后台构造zNodes这种结构的数组即可。

以上三种树形组件,各有千秋,可以根据需求选用不同的组件。还是那句话,没有最好,只有最合适,如果园友们有什么更好用的树形组件,不妨推荐下,不胜感激。之前那篇被指有问题,在此重新发下。如果觉得本文对你有帮助,请帮忙推荐吧,博主会继续努力。

本文转自懒得安分博客园博客,原文链接:http://www.cnblogs.com/landeanfen/p/5124913.html,如需转载请自行联系原作者

继续阅读