位置: 编程技术 - 正文
Bootstrap 树控件使用经验分享(图文解说)(bootstrap-treeview.js)
编辑：rootadmin推荐整理分享Bootstrap 树控件使用经验分享(图文解说)(bootstrap-treeview.js)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:bootstrap treetable,bootstrap树形控件,bootstrap-treeview.js,bootstrap treetable,bootstrap树形控件,bootstrap tree,bootstrap tree,bootstrap tree,内容如对您有帮助，希望把文章链接给更多的朋友！
jquery 树形控件
jquery 树形控件是一款基于jquery+bootstrap、完全通过js和样式手写出来的非常轻量级的控件，它功能简单、用户体验不错。对于一些简单的层级关系展示比较实用。
前言：很多时候我们在项目中需要用到树，有些树仅仅是展示层级关系，有些树是为了展示和编辑层级关系，还有些树是为了选中项然后其他地方调用选中项。不管怎么样，树控件都是很多项目里面不可或缺的组件之一。今天，博主打算结合自己的使用经历和网上找到的一些不错的树控件在这里做一个分享，希望能帮大家找到最合适的控件。还是那句话：控件没有最好，只有最合适。
一、JQuery树形控件
Jquery树形控件是一款基于JQuery+bootstrap、完全通过js和样式手写出来的非常轻量级的控件，网上很多地方都能看到它的影子。它功能简单、用户体验不错。对于一些简单的层级关系展示比较实用，但对于节点的增删改实现起来就不容易了，如果非要做，可能需要自己去封装。
1、一睹初容
全部收起
展开一级
全部展开
2、代码示例
此控件实现起来也非常简单，只需要引用jQuery和bootstrap组件即可。
这些代码都是直接从网上down下来的，节点上面的图标可以通过样式修改，图标样式也是基于bootstrap的。如果需要动态添加节点，可以自己封装组件去拼html，实现起来应该也比较简单。由以上可知此组件的轻量级，如果你需要对节点作增删改或者选择等操作，不要急，下面的控件可能比较适用。
二、文件树编辑插件Treed
这个组件是从网上找到的，最初演示，组内成员一致觉得效果很赞。因为它通过树形展示，方便的提供了节点的增删改。节点的伸缩效果也比较好。好了来看看。Demo以及下载地址： 直接在界面显示文本框
需要引用的js和css文件
页面html
Js初始化
3.2 默认隐藏，触发某个事件的时候出现树。这种场景在项目里面非常常见，一般用于选择树节点。所以博主把这个也单独拿出来说下吧。
div默认是隐藏的。
在js里面初始化树以及注册showMenu()方法
由于以上都是静态数据，如果需要从后台取数据动态加载树节点，可以去后台构造zNodes这种结构的数组即可。
四、总结
以上三种树形组件，各有千秋，可以根据需求选用不同的组件。
以上所述是小编给大家介绍的Bootstrap 树控件使用经验分享(图文解说)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持！
JS实现分页浏览横向图片(类轮播)实例代码 昨天朋友问我怎么用js实现分页浏览横向图片功能，其实实现代码很简单的，下面小编给大家带来了具体实现代码，代码如下所示：common.jsfunction$(id){retu
浅谈mint-ui 填坑之路 近期上手vue的移动端项目，舍弃了之前自己相对熟悉的mui框架，改为用饿了么团队为了vue量身定做的mint-ui框架。之前开发的时候觉得mui的文档就足够坑
React Native使用百度Echarts显示图表的示例代码 Echarts是百度推出的免费开源的图表组件，功能丰富，涵盖各行业图表。相信很多同学在网页端都使用过。今天我就来介绍下在ReactNative中如何使用Echarts
上一篇：解决option标签selected="selected"属性失效的问题(option标签的作用)
下一篇：JS实现分页浏览横向图片(类轮播)实例代码(js分页逻辑)
可以从图片上看到，执行查询后，得到二个表格，上面的表格显示了查询的结果，下面的表格显示了查询的执行过程。相比本文的第一张图片，这张图片可能在直观上不太友好，但是，它能反映更多的信息，而且尤其在比较复杂的查询时，可能看起来更容易，因为对于复杂的查询，【执行计划】的步骤太多，图形方式会造成图形过大，不容易观察。而且这张执行过程表格能反映2个很有价值的数据（前二列）。
还是来看看这个【执行过程表格】吧。我来挑几个重要的说一下。【Rows】：表示在一个执行步骤中，所产生的记录条数。（真实数据，非预期）【Executes】：表示某个执行步骤被执行的次数。（真实数据，非预期）【Stmt Text】：表示要执行的步骤的描述。【EstimateRows】：表示要预期返回多少行数据。
在这个【执行过程表格】中，对于优化查询来说，我认为前三列是比较重要的。对于前二列，我上面也解释了，意思也很清楚。前二列的数字也大致反映了那些步骤所花的成本，对于比较慢的查询中，应该留意它们。【Stmt Text】会告诉你每个步骤做了什么事情。对于这种表格，它所要表达的其实是一种树型信息（一行就表示在图形方式下的一个节点），所以，我建议从最内层开始去读它们。做为示例，我来解释一下这张表格它所表达的执行过程。
第5行：【Clustered Index Seek(OBJECT:([MyNorthwind].[dbo].[Customers].[PK_Customers]), SEEK:([MyNorthwind].[dbo].[Customers].[CustomerID]=[MyNorthwind].[dbo].[Orders].[CustomerID]) ORDERED FORWARD)】，意思是说，SQL Server在对表Customers做Seek操作，而且是按照【Clustered Index Seek】的方式，对应的索引是【PK_Customers】，seek的值来源于[Orders].[CustomerID]
第4行：【Clustered Index Scan(OBJECT:([MyNorthwind].[dbo].[Orders].[PK_Orders]), WHERE:([MyNorthwind].[dbo].[Orders].[OrderDate]>='-- ::." class="img-responsive" alt="教你如何看懂SQL Server查询计划(教你如何看懂标签)">
FreeGLUT Tips: Resolve compile issue: error LNK1104: cannot open file 'freeglutd.lib'
Android Studio 右侧条标高亮显示选中的相同变量，类，方法。。。(android studio右边的视图不见了)
