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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 17:04:20  来源:igfitidea点击:

Twitter Bootstrap TreeView Plugin

ruby-on-railstwitter-bootstraptreeview

提问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!!!

enter image description here

在此处输入图片说明

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.

查看项目的github 页面以获取完整文档,并在此处查看现场演示