3

Does anyone know a mature plugin for a treeview in twitter bootstrap? Most things i found so far are

a) not longer maintained

b) looking ugly / have glitches

c) can't be initialized from a html unordered list

d) don't allow an element (node or leaf) to become selected.

Basically i need this to implement something similar to a file-explorer, but for an eCommerce Product catalog.

Thanks in advance!

4

2 回答 2

11

似乎我参加聚会有点晚了，但你可以查看我的基于 jQuery 插件的 Twitter Bootstrap 树视图。

富有想象力地命名为bootstrap-treeview.js！！！

在此处输入图像描述

它是第 1 版，仅支持 Bootstrap v3 以上，但是...

  • 它会被维护，
  • 看起来比我见过的任何其他都更接近引导程序的外观和感觉，
  • 是数据驱动的，
  • 高度可定制的外观和感觉，
  • 具有带有事件挂钩的可选节点

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

于 2014-02-19T10:45:50.397 回答
2

查看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});

这是一个带有数据源的工作示例：http: //bootply.com/60761

如果您希望文件夹或项目可选择，则需要查看控件公开的方法/事件。

于 2013-05-06T12:03:53.263 回答