Creating a sortable tree / grid in Javascript

Question

I would like to create a tree structure from JSON, but with several columns that can be sorted. I saw many implementations of trees and nets, but never mixed.

Does anyone know of a plugin or feature for any Javascript toolkit that can do this, so I don't need to reinvent the wheel here?

Answer 1

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

Uses ExtJS, which has some licensing restrictions that you should consider.

Answer 2

I found all of these components:

• Coqsoft Treegrid , commercial, seems to be no plus ultra!
• Ext JS , commercial:
  • Column Tree Component *
  • The nested grid , that is, the Grid plug-in with the row expander, was changed by Mikhail
  • Ext.ux.maximgb.treegrid , another mod from Max (one that is offered without the knowledge)
• JQTreeTable , minimal, jQuery required *
• Treetable plugin for jQuery *
• dojo-treetable based on Dojo *
• Maxdesign , this is just good css *

* seems not sortable

Personally, I try Treetable , and after some configurations (a jerk in the examples in the source of the documentation page ...) I enjoy my simplicity and clarity.

Answer 3

jstree plugin for jQuery related to its jstree-grid plugin can handle sorting (sorting is the plugin to the main jstree ), which is quite flexible (and reuses the jQuery UI theme that you apply).

Is this the type of mesh you're looking for? You end up being very similar:

Sort by column, which you must manually add, and then trigger a re-sort .

Answer 4

After a lot of research for treegrid, the best I've come across is from jeasyui.com

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

Answer 5

Here is also the “official” example (top grid on the page) using the RowExpander UX.

http://extjs.com/deploy/dev/examples/grid/grid3.html

Answer 6

DHTMLX also has a TreeGrid JavaScript component (supports sorting and other network-related functions): http://dhtmlx.com/docs/products/dhtmlxTreeGrid/

(disclaimer: I work for DHTMLX)

Answer 7

Another tree structure with bootstrap support. http://maxazan.imtqy.com/jquery-treegrid/examples/example-bootstrap-3.html