hierarchical tree table

[Marco Megna]

Hi all,

I'm quite a novice with javascript...

Im trying to create (without much success) a hierarchical tree table.

I want a table like:

Header

  1 Parent Row

    1.1 Child Row

    1.2 Child Row

       1.2.1 2-Child Row

  2 Parent Row

    2.1 Child Row 

    2.2 Child Row  

    2.3 Child Row 

  3 Parent Row 

Initially only the Parent rows should be visible, then when i click on one of them, its first level child-Rows appear, and so on...

any suggestions?

Thanks, 

Marco

[asgallant]

Hmmm....that's a tough one.  You need some way of identifying which rows to have to be showing at any point in time, and of identifying which rows are children of a given row.  I created an example which uses "id", "parentId", and "visible" columns in the DataTable to track this information, and then I filtered the DataTable with a DataView to show only the rows and columns needed at any given point in time: http://jsfiddle.net/6xwBQ/1/

Hope that helps you.

[Marco Megna]

Thanks a lot!

Is exactly what I wanted!

I start take a look to the code now. 

[Marco Megna]

I've made some improvements.

http://jsfiddle.net/MarcoM/RjHMH/

Bye,

Marco 

[Marco Megna]

How can I filter only the rows with child-rows?

(in the example  "Foo 2" and "Bar 1") 

I want to set the classname (open or close) only to the rows with child-rows.

http://jsfiddle.net/MarcoM/RjHMH/ 

Thanks,

Marco

[asgallant]

You need to determine which rows are parents, which can be done by identifying all children and then finding their parents.  Test each row to see whether or not it is a parent row to determine which classes to apply: http://jsfiddle.net/asgallant/RjHMH/19/