使用slickgrid树时排序数据

Question

用于生成树的slickgrid wiki上的示例生成的数据按照树输出父项和子项所需的确切顺序排序.请参阅:http://mleibman.github.com/SlickGrid/examples/example5-collapsing.html - 您可以看到,例如,如果父级是任务1,则子级是任务2和任务3等.

如果节点没有可以轻松用于对节点进行排序的属性,以便孩子们能够立即跟随他们的父母,那么我们如何告诉光滑的网格如何在输出树时对节点进行排序？

另外,光滑树可以支持排序,即它如何与节点顺序一起播放？

Answer 1

1. 在将数据添加到网格之前，您必须对数据进行排序。没有内置函数可以为您理解和排序数据（据我所知）。如果您使用二叉搜索树，我认为您可以按左叶排序。对于其他树结构，您可能需要循环遍历数据或编写递归 SQL 查询来对其进行排序。

2. 由于数据需要排序，因此没有一种简单的方法来支持树的排序。基本排序会破坏您的结构化数据。但是，如果数据上有sortOrder属性，则应该能够对数据进行排序。如果所有 1 级节点均为sortOrder = 1，2 级节点均为sortOrder = 2等，则首先按 sortorder 对其进行排序，然后按列按升序或降序排序。检查多列排序以充分掌握如何执行此操作。

   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;
             }
         }
     }
   });
   

如果您打算尝试对树进行列排序，需要考虑一些事项：

如果您查看示例 5，您会发现过滤器和格式化程序都已实现，因此需要对数据进行排序。

过滤器：

//part of the filter.
var parent = dataViewData[item.parent];

while (parent) {
    if (parent._collapsed) {
        parent._collapsed = false;
    }
    parent = dataViewData[parent.parent];
}

这是格式化程序的一部分：

//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 {
    //.......
    }
}

我重写了这些以使用实际的id ，而不是检查dataView中数据的顺序。这需要您也循环遍历所有数据以查看当前节点是否有任何子节点。您还需要替换 dataViewData[ idx ] 调用：

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

即使节点未排序，这也将使树正常工作，但在扩展节点时，子节点可能会在它们不驻留的另一个节点之后结束。

如果您需要实现标头过滤器搜索，我几天前在这里回答了另一个问题。