web-dev-qa-db-ja.com

グループレベルの選択によるSlickGridマルチレベルグループ化

current grid status

カスタム選択モデルとカスタムチェックボックス選択プラグインを備えた滑らかなグリッドを実装しました。また、グループレベルのチェックボックスを追加して、トップレベルでの選択の切り替えを可能にしました。私の要件の1つは、折りたたまれたグループ化が親レベルのグループ化チェックボックスを介して引き続き選択可能であることです。

私の障害は、現在グループに表示されていない行を選択する方法を理解できないことです。滑らかなグリッドは視覚的に選択されたアイテムのセットを維持し、グリッドデータビューは選択されたアイテムの完全なセットを表示または非表示に維持します。ただし、折りたたまれた行のグループチェックボックスをクリックしたときにデータにパイプする方法がわかりません。

私はグリッドを次のように構成しています:

let checkboxSelectionModel = new Slick.CheckboxSelectionModel();
this.grid.setSelectionModel(checkboxSelectionModel);

this.grid.registerPlugin(new Slick.Data.GroupItemMetadataProvider());

let onSelectedRowIdsChanged = this.dataProvider.syncGridSelection(this.grid, true, true);

onSelectedRowIdsChanged.subscribe(
  function(e: any, args: any)
    {
      //business logic stuff                    
    }
  );

let groupedCheckboxSelector = new Slick.GroupedCheckboxSelectColumn({
  cssClass: "slick-cell-checkboxsel",
  onSelectedRowIdsChangedHandler: onSelectedRowIdsChanged
});

let columns = this.grid.getColumns();
columns.unshift(groupedCheckboxSelector.getColumnDefinition());
this.grid.setColumns(columns);

this.grid.registerPlugin(groupedCheckboxSelector);

カスタムプラグインの要旨、ここに含めるには長すぎます 特に、57/slick.checkboxselectionmodel

$.each(dataItem.rows, function(index, groupRow) {
  var groupRowIndex = _self._grid.getData().getRowById(groupRow.id);
    if (groupRowIndex) {
      selection.Push(groupRowIndex);
    }
});

groupRowIndexは非表示の行では解決されないため、選択されることはありません。クリックしたときにグループを展開してから行を解決しようとしましたが、機能しますが、グループが後で折りたたまれていると、グリッドで間違った行が選択されます。

どんな助けでも大歓迎です!

いくつかのメモ:

10
Julien

更新されたプラグインの要点

私が確信している機能的なソリューションは、同様の動作を求める人を正しい道に導くことができますが、これらのプラグインのどちらが独立してうまく機能するかはわかりません。私の要件の1つは、行のチェックボックスでのみ行を選択できるようにすることでした。

1つの落とし穴(簡単に改善されると確信しています)は、グループレベルのチェックボックスをグループ形式の演算子で定義する必要があることです。

私の問題の主な解決策は、グループレベルの選択/選択解除を行うときにすべての折りたたまれたグループを展開し、選択/選択解除ルーチンを実行してから、以前に展開されたグループを折りたたむことでした

編集:

グリッドに大量のデータ(1万行)がある場合、これは失敗します。賞金で再開。

多くのグループが問題を引き起こすため、展開と折りたたみが必要になるというパフォーマンスへの影響のようです。

1
Julien