Ordering data using the slickgrid tree

Question

An example in the slickgrid wiki file for creating a tree generates the data, ordered in the exact order, necessary for the tree to display parents and children. See: http://mleibman.github.com/SlickGrid/examples/example5-collapsing.html - you can see, for example, that if the parent is Task 1, then the children are Task 2 and Task 3, etc.

As we say slick grid, how to arrange the nodes when the tree is displayed, if the nodes do not have properties that can be easily used to sort the nodes so that children immediately follow their parents?

In addition, you can sort slick-tree support, i.e. how does this work with node order?

Answer 1

• You must order your details before adding them to the grid. There are no built-in functions that can understand and sort data for you (as far as I know). If you use the Binary Search Tree , I think you can just sort the left sheet . With other tree structures, you probably loop the data too much or write a recursive SQL query to sort it.

• Since data must be ordered, there is no easy way to support tree sorting. Basic sorting will destroy your structured data. However, if you have a property according to sortOrder data, you should be able to sort the data. If you have all the nodes of level 1 as sortOrder = 1, the nodes of level 2 as sortOrder = 2, etc. First, sort them by sort order, and then sort them by column in ascending or descending order. Check out Sorting multiple columns to get a good idea of ​​how you can do this.

  grid.onSort.subscribe(function (e, args) { var cols = args.sortCols; data.sort(function (dataRow1, dataRow2) { //first sort by your parameter, then combine it with example sort: var sortOrderResult = (dataRow1["sortOrder"] == dataRow2["sortOrder"] ? 0 : (dataRow1["sortOrder"] > dataRow2["sortOrder"] ? 1 : -1)); if(sortOrderResult != 0) return sortOrderResult; else { var field = cols[i].sortCol.field; var sign = cols[i].sortAsc ? 1 : -1; var value1 = dataRow1[field], value2 = dataRow2[field]; var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign; if (result != 0) { return result; } } } }); 

Some things to consider if you try to sort a column by column:

If you look at Example 5 , you will see that both the filter and the formatter are implemented so that the data needs to be sorted.

Filter:

 //part of the filter. var parent = dataViewData[item.parent]; while (parent) { if (parent._collapsed) { parent._collapsed = false; } parent = dataViewData[parent.parent]; } 

And here is the formatting part:

 //part of the formatter for showing collapse/open nodes if (dataViewData[idx + 1] && dataViewData[idx + 1].indent > dataViewData[idx].indent) { if (dataContext._collapsed) { return spacer + " <span class='toggle expand'></span>&nbsp;" + value; } else { //....... } } 

I rewrote them to use the actual id instead of checking the order of the data in the dataView. This requires you to overlook all your data too much to see if the current node has children. You also need to replace the calls to dataViewData [idx]:

 //instead of dataViewData[item.parent]; var parent = dataView.getItemById(item.parent); 

This will cause the tree to work even if the nodes are not sorted, but with the extension node, the children are likely to end up after another node, where they will not live.

If you need to implement a header filter filter , I answered another question here a few days ago.

Answer 2

I have the same problem with a 3 level hierarchy. I spent a lot of time getting Binke to work, but this led to the elements of the hierarchy being combined with each other, while from the first and second level they worked, but had problems. In the end, I decided it was best to use server-side sorting, and so my sorting method literally just sets the selected column to sort and update the grid:

 grid.onSort.subscribe(function(e, args) { sortColumn = args.sortCol.field; refreshCasesList(); }); 

I recommend the same.