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?

Hey Eric- Can you please explain this a bit further? It sounds like you're describing new, but then you're asking for something that exists.. I'm not sure I understand exactly you are trying to build. — keparo, Oct 10 '08 at 23:19
Is it that you have an array of similar in nature JSON object and you want to sort that array of object by one or more key? If so I got what you need :P — matdumsa, Oct 10 '08 at 23:25

score 8 · Accepted Answer · answered Oct 10 '08 at 23:24

8

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.

answered Oct 10 '08 at 23:24

eyelidlessness

62,413
11
90
94

Exactly what I needed. In fact, we are already using Ext-JS. Thank you!! – Eric Wendelin Oct 11 '08 at 04:38
For the future, if you're looking for a widget and can describe it, it's probably already been done in ExtJS. ;) – eyelidlessness Oct 11 '08 at 05:03

bluish · Answer 2 · 2011-09-13T15:22:43.080

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.

score 3 · Answer 3 · answered May 03 '14 at 07:37

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

enter image description here

answered May 03 '14 at 07:37

czlatea

1,131
13
20

This doesn't seem to have sorting capabiltiies – MarcGuay Jan 19 '17 at 16:46

score 2 · Answer 4 · answered May 05 '13 at 02:48

2

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: jstree-grid-with-sort-themerolled

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

answered May 05 '13 at 02:48

jeffreypriebe

2,267
25
30

Hi, can you please share some codes about the above example? Thanks – chrisTina Sep 25 '15 at 01:51

score 0 · Answer 5 · answered Jun 22 '12 at 11:44

0

DHTMLX also has the TreeGrid JavaScript component (supports sorting and other grid-related features): http://dhtmlx.com/docs/products/dhtmlxTreeGrid/

(disclaimer: I work for DHTMLX)

answered Jun 22 '12 at 11:44

Paul

1,656
11
16

score 0 · Answer 6 · answered Feb 20 '16 at 18:12

0

Yet another treegrid with support for bootstrap. http://maxazan.github.io/jquery-treegrid/examples/example-bootstrap-3.html

answered Feb 20 '16 at 18:12

czlatea

1,131
13
20

score 0 · Answer 7 · answered Jun 01 '09 at 04:27

0

Here is an "official" example as well (top grid on the page), using the RowExpander UX.

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

answered Jun 01 '09 at 04:27

Jason

1,163
7
10

1

@Chau @Jason I think this is the new link: http://dev.sencha.com/playpen/ext-2.0/examples/grid/grid3.html – bluish Jan 14 '11 at 10:33

Creating a sortable tree/grid in Javascript

7 Answers7