Question

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

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

此外，光滑树是否可以支持排序，即如何使用节点顺序？

Answer 1

在将数据添加到网格之前，您必须先订购数据。没有内置函数可以为您理解和排序数据（据我所知）。如果您使用Binary Search Tree，我认为您可以按左叶排序。对于其他树结构，您可能已经遍历数据或编写递归SQL查询来对其进行排序。

由于需要对数据进行排序，因此没有一种简单的方法来支持树的排序。基本排序将破坏您的结构化数据。但是，如果您在数据 sortOrder 上有属性，则应该能够对数据进行排序。如果您将所有1级节点都设置为 sortOrder = 1 ，则将2级节点设置为 sortOrder = 2 ，依此类推，首先按排序顺序排序，然后按列排序按升序或降序排列。检查Multi column sort以便更好地了解如何执行此操作。

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

即使节点没有排序，这也会使树工作，但是当扩展节点时，子节点可能会在另一个节点之后结束，它们不驻留在那里。

如果您需要实施标题过滤搜索，我几天前回复了另一个问题here。

Answer 2

我有同样的问题，有3级层次结构。我花了很多时间试图让Binke的解决方案工作，但它只是导致较低层次结构元素组合在一起，而第一级和第二级元素排序工作但有问题。最终我决定最好只使用服务器端排序，因此我的on-sort方法只是将所选列设置为排序并刷新网格：

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

我推荐相同的。

使用slickgrid树时排序数据

2 个答案: