6

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

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

此外，光滑树能否支持排序，即它如何处理节点顺序？

4

2 回答 2

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

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

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

于 2015-01-26T16:02:13.530 回答
0

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

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

我推荐同样的。

于 2015-01-27T15:16:42.910 回答