Twitter Bootstrap TreeView Plugin [closed]

Question

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!

Answer 1

Seems I'm a little late to the party but you could check out my jQuery plugin based tree view for Twitter Bootstrap.

Imaginatively named bootstrap-treeview.js!!!

It's at version 1 and will only support Bootstrap v3 upwards, but...

• 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 page for full documentation, and take a look here for a live demo.

Answer 2

Take a look at the FuelUX tree

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

Here is a working example with data source: 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.