6

ツリーを生成するための slickgrid wiki の例では、親と子を出力するためにツリーが必要とする正確な順序で並べられたデータが生成されます。参照: http://mleibman.github.com/SlickGrid/examples/example5-collapsing.html - たとえば、親がタスク 1 の場合、子はタスク 2 とタスク 3 などであることがわかります。

ノードがノードを並べ替えるために簡単に使用できるプロパティを持たない場合、ツリーを出力するときにノードを順序付けする方法をslick gridにどのように伝えて、子がすぐに親に従うようにしますか?

また、slick-tree はソートをサポートできますか? つまり、それはノードの順序でどのように機能しますか?

4

2 に答える 2

1
  1. データをグリッドに追加する前に、データを並べ替える必要があります。（私の知る限り）データを理解してソートできる組み込み関数はありません。Binary Search Treeを使用する場合は、左の葉でソートするだけでよいと思います。他のツリー構造では、おそらくデータをループしたり、再帰的な SQL クエリを記述して並べ替えたりする必要があります。

  2. データは順序付けされる必要があるため、ツリーのソートをサポートする簡単な方法はありません。基本的な並べ替えでは、構造化データが破壊されます。ただし、データsortOrderにプロパティがある場合は、データを並べ替えることができるはずです。レベル 1 のノードがすべてsortOrder = 1、レベル 2 のノードがsortOrder = 2などの場合、最初にソート順で並べ替え、次に列で昇順または降順で並べ替えます。マルチカラムソートをチェックして、これを行う方法をよく理解してください。

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

dataView内のデータの順序をチェックする代わりに、実際のIDを使用するようにこれらを書き直しました。これには、すべてのデータをループして、現在のノードに子があるかどうかを確認する必要があります。また、dataViewData[ idx ] 呼び出しを置き換える必要があります。

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

これにより、ノードがソートされていなくてもツリーが機能しますが、ノードを展開すると、子はおそらく存在しない別のノードの後に​​配置されます。

ヘッダー フィルター検索を実装する必要がある場合は、数日前にここで別の質問に回答しました。

于 2015-01-26T16:02:13.530 に答える
0

3レベルの階層で同じ問題があります。Binke のソリューションを機能させるためにかなりの時間を費やしましたが、下位階層の要素がグループ化され、第 1 レベルと第 2 レベルの要素はうまく機能しましたが、問題がありました。最終的に、サーバー側の並べ替えを使用するのが最善であると判断したため、on-sort メソッドは文字通り、選択した列を並べ替え基準に設定し、グリッドを更新します。

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

私は同じことをお勧めします。

于 2015-01-27T15:16:42.910 に答える