Twitter Bootstrap TreeView Plugin

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!

Solution 1

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.

Solution 2

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.

Comments

[Maximilian Stroh]

Do you have a hint how to make the "folders" selectable without much hassle?

[Zim]

I'm not sure.. probably will take a little customization

[Maximilian Stroh]

okay. since this collection of plugins is just awesome for further usage, i'll accept your answer.

[VJPPaz]

hi jonathan, with the bootstrap-treeview, is there a function to add or update the nodes?

[huwiler]

Nice work Jonathan! Almost used this for a project of my own until I realized it did not support loading child nodes from an external source. This is not practical for large trees or trees that may end up large in the future. Any plans to add this functionality in the future? Here's another option by Miciej Klak that supports loading leaves asynchronously: github.com/gilek/bootstrap-gtreetable.