SlickGrid多级分组与分组级别选择

Question

SlickGrid多级分组与分组级别选择

10

我已经实现了一个带有自定义选择模型和自定义复选框选择插件的Slick Grid。我还添加了组级别的复选框，以允许在顶级别上切换选择。我的一个要求是，即使通过任何父级别分组复选框折叠了分组，仍然可以选择折叠的分组。

我的难点似乎在于我无法弄清楚如何选择当前未在组中可见的行。 Slick Grid 在维护着当前可视范围内的选定项的同时，数据视图也在维护着全集合的选定项，无论是否可见。然而，当单击折叠行的组复选框时，我无法想出如何将其连接到数据。

我正在这样配置我的网格：

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

将要翻译的内容太长，请转换为自定义插件具体来说，如果您查看slick.checkboxselectionmodel的第57行：

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

groupRowIndex在隐藏行中永远无法解决，因此永远不会被选择。我尝试点击时展开组，然后解决行，这样可以工作，但是当折叠组后，在网格中选择错误的行。

非常感谢任何帮助！

一些注意事项：

如果我选择一行并折叠其组，则该项将保留其选择
slick grid的另一个分支也有同样不起作用的组选择实现

- Julien

2

我会尽快发布一份高额的悬赏。 - Julien

1

这个问题已经有一个issue #165了，我认为有帮助的是你或其他人在6pac分支中提供解决方案。这是一个开源项目，来自社区的贡献可以使这个库在未来变得更好。 - ghiscoding

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Julien · Accepted Answer

更新插件的gist

这是一个实用的解决方案，我相信它能帮助任何寻求类似行为的人走上正确的道路，但我不确定这些插件中的任何一个会独立工作得有多好。我的要求之一是仅允许通过行复选框选择行。

一个需要注意的问题（我相信很容易改进）是组级别复选框仍然需要在您的组格式运算符中定义。

我的主要解决方案是在进行组级别的选择/取消选择时扩展所有折叠的组，执行任何选择/取消选择例程，然后折叠任何以前扩展的组。

编辑：

当网格具有大量数据（10k行）时，此方法会失败。重新发布并提供奖励。

看起来，必须扩展和折叠如此多的组会导致性能问题。