Creating a sortable tree/grid in Javascript

Question

I'd like to create a tree structure from JSON, but with multiple columns that can be sorted. I've seen lots of implementations of trees and grids but never one mixed.

Does anyone know of a plugin or feature for any Javascript toolkit that can make this happen so I don't have to re-invent the wheel here?

Solution 1

This seems pretty nice: http://www.max-bazhenov.com/dev/ux.maximgb.treegrid/index.html

Uses ExtJS, which has some licensing limitations you have to consider.

Solution 2

I found all these components:

• Coqsoft Treegrid, commercial, seems the non plus ultra!
• Ext JS, commercial:
  • Column Tree component *
  • Nested Grid, that is Grid Plugin with Row Expander modified by Mikhail
  • Ext.ux.maximgb.treegrid, another mod, by Max (the one proposed by eyelidlessness)
• JQTreeTable, minimal, requires jQuery *
• Treetable, plugin for jQuery *
• dojo-treetable, based on Dojo *
• Maxdesign, it's simply a good css *

* seems not sortable

Personally I'm trying Treetable and, after some configurations (rummaging in the examples in the source of the documentation page...), I'm enjoying its simplicity and clarity.

Solution 3

After a long research for a treegrid, the best one that I came across is from jeasyui.com

http://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid

Solution 4

The jstree plugin for jQuery tied with its plugin of jstree-grid can handle sorting (sorting is a plugin to the main jstree) that is quite flexible (and re-uses the jQuery UI theme you apply).

Is that the sort of grid you're looking for? You end up with a view very much like:

The sorting by column you'll have to manually add and then trigger a re-sort.

View more solutions

Comments

[Kirschbaum]

Exactly what I needed. In fact, we are already using Ext-JS. Thank you!!

[eyelidlessness]

For the future, if you're looking for a widget and can describe it, it's probably already been done in ExtJS. ;)

[bluish]

@Chau @Jason I think this is the new link: dev.sencha.com/playpen/ext-2.0/examples/grid/grid3.html

[chrisTina]

Hi, can you please share some codes about the above example? Thanks

[MarcGuay]

This doesn't seem to have sorting capabiltiies