twitter-bootstrap Twitter Bootstrap TreeView 插件
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16393639/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap TreeView Plugin
提问by Hisako
Does anyone know a mature plugin for a treeview in twitter bootstrap? Most things i found so far are
有谁知道 twitter bootstrap 中树状视图的成熟插件?到目前为止我发现的大多数东西是
a) not longer maintained
a) 不再维护
b) looking ugly / have glitches
b) 看起来很丑/有小故障
c) can't be initialized from a html unordered list
c) 不能从 html 无序列表初始化
d) don't allow an element (node orleaf) to become selected.
d) 不允许一个元素(节点或叶子)被选中。
Basically i need this to implement something similar to a file-explorer, but for an eCommerce Product catalog.
基本上我需要它来实现类似于文件浏览器的东西,但用于电子商务产品目录。
Thanks in advance!
提前致谢!
采纳答案by Zim
Take a look at the FuelUX tree
看一下FuelUX 树
var treeDataSource = new DataSource({
data: [
{ name: 'Test Folder 1', type: 'folder', additionalParameters: { id: 'F1' } },
{ name: 'Test Folder 2', type: 'folder', additionalParameters: { id: 'F2' } },
{ name: 'Test Item 1', type: 'item', additionalParameters: { id: 'I1' } },
{ name: 'Test Item 2', type: 'item', additionalParameters: { id: 'I2' } },
{ name: 'Test Item 3', type: 'item', additionalParameters: { id: 'I3' } }
],
delay: 400
});
$('#MyTree').tree({dataSource: treeDataSource});
$('#MyTree').tree({dataSource: treeDataSource});
Here is a working example with data source: http://bootply.com/60761
这是一个带有数据源的工作示例:http: //bootply.com/60761
If you want a folder or item to be selectable, you'll need to look at the methods/events exposed by the control.
如果您希望文件夹或项目可供选择,则需要查看控件公开的方法/事件。
回答by Jonathan Miles
Seems I'm a little late to the party but you could check out my jQuery plugin based tree view for Twitter Bootstrap.
似乎我参加聚会有点晚了,但您可以查看我的基于 jQuery 插件的 Twitter Bootstrap 树视图。
Imaginatively named bootstrap-treeview.js!!!
富有想象力的命名bootstrap-treeview.js!!!


It's at version 1 and will only support Bootstrap v3 upwards, but...
它是第 1 版,并且只会向上支持 Bootstrap v3,但是......
- it will be maintained,
- looks closer to the bootstrap look and feel than any other I've seen,
- is data driven,
- highly customisable look and feel,
- has selectable nodes with event hooks
- 它将被维护,
- 看起来比我见过的任何其他东西都更接近引导程序的外观和感觉,
- 是数据驱动的,
- 高度可定制的外观和感觉,
- 具有带事件挂钩的可选节点
Check out the project's github pagefor full documentation, and take a look here for a live demo.

