Bootstrap多级级联菜单


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
< div class = "navbar navbar-fixed-top" >
     < div class = "navbar-inner" >
         < div class = "container-fluid" >
             < a data-target = ".nav-collapse" data-toggle = "collapse" class = "btn btn-navbar" >
                 < span class = "icon-bar" ></ span >
                 < span class = "icon-bar" ></ span >
                 < span class = "icon-bar" ></ span >
             </ a >
             < a href = "#" class = "brand" >Project name</ a >
             < div class = "nav-collapse" >
                 < ul class = "nav" >
                     < li class = "active" >
                         < a href = "#" >Home</ a >
                     </ li >
                     < li >
                         < a href = "#" >Link</ a >
                     </ li >
                     < li >
                         < a href = "#" >Link</ a >
                     </ li >
                     < li >
                         < a href = "#" >Link</ a >
                     </ li >
                     < li class = "dropdown" >
                         < a data-toggle = "dropdown" class = "dropdown-toggle" href = "#" >
                             Dropdown
                             < b class = "caret" ></ b >
                         </ a >
                         < ul class = "dropdown-menu" >
                             < li class = "dropdown-submenu" >
                                 < a href = "#" >More options</ a >
                                 < ul class = "dropdown-menu" >
                                     < li >
                                         < a href = "#" >Second level link</ a >
                                     </ li >
                                     < li >
                                         < a href = "#" >Second level link</ a >
                                     </ li >
                                     < li >
                                         < a href = "#" >Second level link</ a >
                                     </ li >
                                     < li >
                                         < a href = "#" >Second level link</ a >
                                     </ li >
                                     < li class = "dropdown-submenu" >
                                         < a href = "#" >Second level link</ a >
                                         < ul class = "dropdown-menu" >
                                             < li >
                                                 < a href = "#" >3333333333</ a >
                                             </ li >
                                         </ ul >
                                     </ li >
                                 </ ul >
                             </ li >
                             < li >
                                 < a href = "#" >Another action</ a >
                             </ li >
                             < li >
                                 < a href = "#" >Something else here</ a >
                             </ li >
                             < li class = "divider" ></ li >
                             < li class = "nav-header" >Nav header</ li >
                             < li >
                                 < a href = "#" >Separated link</ a >
                             </ li >
                             < li >
                                 < a href = "#" >One more separated link</ a >
                             </ li >
                         </ ul >
                     </ li >
                 </ ul >
                 < form action = "" class = "navbar-search pull-left" >
                     < input type = "text" placeholder = "Search" class = "search-query span2" >
                 </ form >
                 < ul class = "nav pull-right" >
                     < li >
                         < a href = "#" >Link</ a >
                     </ li >
                     < li class = "divider-vertical" ></ li >
                     < li class = "dropdown" >
                         < a class = "#" href = "#" >Menu</ a >
                     </ li >
                 </ ul >
             </ div > <!-- /.nav-collapse -->
         </ div >
     </ div >
</ div >
 
< hr />
 
< ul class = "nav nav-pills" >
     < li class = "active" >
         < a href = "#" >Regular link</ a >
     </ li >
     < li class = "dropdown" >
         < a href = "#" data-toggle = "dropdown" class = "dropdown-toggle" >
             Dropdown
             < b class = "caret" ></ b >
         </ a >
         < ul class = "dropdown-menu" id = "menu1" >
             < li class = "dropdown-submenu" >
                 < a href = "#" >More options</ a >
                 < ul class = "dropdown-menu" >
                     < li >
                         < a href = "#" >Second level link</ a >
                     </ li >
                     < li >
                         < a href = "#" >Second level link</ a >
                     </ li >
                     < li >
                         < a href = "#" >Second level link</ a >
                     </ li >
                     < li >
                         < a href = "#" >Second level link</ a >
                     </ li >
                     < li >
                         < a href = "#" >Second level link</ a >
                     </ li >
                 </ ul >
             </ li >
             < li >
                 < a href = "#" >Another action</ a >
             </ li >
             < li >
                 < a href = "#" >Something else here</ a >
             </ li >
             < li class = "divider" ></ li >
             < li >
                 < a href = "#" >Separated link</ a >
             </ li >
         </ ul >
     </ li >
     < li class = "dropdown" >
         < a href = "#" >Menu</ a >
     </ li >
     < li class = "dropdown" >
         < a href = "#" >Menu</ a >
     </ li >
</ ul >
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Bootstrap Treeview是一个用于在web应用程序中显示可折叠层次结构数据的插件。级联示例是指当一个节点被选中时,其子节点也会被自动选中。 在使用Bootstrap Treeview插件时,可以通过配置选项来实现级联示例。首先,需要为每个节点添加一个唯一的id属性,用于标识该节点。接下来,要设置节点的checked属性,来确定节点是否选中。 通过设置节点的checkbox属性为true,可以使节点显示复选框。当一个节点被选中时,Bootstrap Treeview会调用onNodeChecked事件,可以在此事件中编写代码来实现级联示例。在该事件中,可以获取到选中节点的id和父节点的id,通过这些信息可以找到子节点的id并设置其checked属性为true,从而实现级联选中。 例如,有一个层次结构如下所示: - 根节点 (id: 1) - 子节点1 (id: 2, parentId: 1) - 孙子节点1 (id: 3, parentId: 2) - 孙子节点2 (id: 4, parentId: 2) - 子节点2 (id: 5, parentId: 1) 当选中根节点时,其下的所有子节点都会自动选中。以下是一个简单的使用Bootstrap Treeview实现级联示例的示例代码: ```javascript $('#treeview').treeview({ data: // treeview的数据源,即层次结构数据 onNodeChecked: function(event, node) { var childrenNodes = $('#treeview').treeview('getSiblings', node.nodeId); // 获取选中节点的所有兄弟节点 $.each(childrenNodes, function(index, childNode) { $('#treeview').treeview('checkNode', [childNode.nodeId, { silent: true }]); // 设置兄弟节点的选中状态 }); } }); ``` 以上代码将树视图实例化为id为"treeview"的元素,设置了onNodeChecked事件回调函数。当一个节点被选中时,回调函数获取其所有兄弟节点,并设置其选中状态为真。这样当选中一个节点时,其所有子节点都会被选中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值