多语言展示
当前在线:310今日阅读:176今日分享:34

bootstrap treeview控件使用详解

这是一个简单而优雅的解决方案,显示分层树结构(即树视图),现在就介绍它的用法。
方法/步骤

依赖:bootstrap-treeview需要依赖bootstrap和jquery两个框架,现在具体需要的框架版本到官方网站去查。

方法/步骤2
1

基本用法:添加以下资源以使引导树视图正常工作。

2

将组件绑定到任何现有的DOM元素。例如通过div标签的id绑定。

3

基本用法可能如下所示(JavaScript代码)

方法/步骤3
1

数据结构为了定义树所需的层次结构,需要提供一个JavaScript对象的嵌套数组。

2

一个树节点被表示为一个简单的JavaScript对象。 这是一个必需的属性文本将建立一棵树。

3

如果你想做更多,这里是完整的节点规范

方法/步骤4

它的属性,方法等可以到官方网站或百度查:例如节点特定图标,颜色和标记等。

方法/步骤5
1

代码例子:bootstrap-treeview.js 测试

 
   
     

默认

     
   
   
     

自定义图标

     
   
   
     

丰富多彩

     
   
 

2

代码的浏览器效果

注意事项

代码是用谷歌浏览器Google Chrome浏览的,各个浏览器对css支持不同

推荐信息