具有组级别选择的SlickGrid多级分组


10

当前网格状态

我已经实现了带有自定义选择模型以及自定义复选框选择插件的平滑网格。我还添加了组级别复选框,以允许在最高级别切换选择。我的要求之一是,仍可以通过任何父级分组复选框来选择折叠分组。

我的绊脚石似乎是我无法弄清楚如何选择当前在组中不可见的行。圆滑的网格将保留视觉上选定的项目集,而网格数据视图将保留完整的选定项目集(可见或不可见)。但是,当单击折叠行的组复选框时,我不知道如何将数据传输到数据中。

我像这样配置网格:

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

要点要自定义插件,太长时间,包括在这里 特别是,如果你看看行57slick.checkboxselectionmodel

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

对于隐藏的行,决不会解析groupRowIndex,因此永远不会被选中。我尝试在单击时扩展组,然后解析行,但是行有效,但是当组随后折叠时,在网格中选择了错误的行。

任何帮助将不胜感激!

一些注意事项:


2
我将尽快提供丰厚的赏金
Julien

1
有一个未解决的问题#165,我认为这对您或其他任何人都可以在6pac fork中提供解决此问题的方法有所帮助。这是一个开源项目,由社区贡献,因此多年来的任何贡献都有助于使这个库变得更好。
ghiscoding

Answers:


1

要更新插件

我有信心的功能性解决方案可以使任何寻求类似行为的人都走上正确的道路,但是,我不确定这两个插件能否独立运行。我的要求之一是仅允许通过行复选框进行行选择。

一个陷阱(我确信可以轻松改进)是仍需要在组格式运算符中定义组级别复选框

我问题的主要解决方案是在进行组级别的选择/取消选择时展开所有折叠的组,执行任何选择/取消选择例程,然后折叠任何先前展开的组

编辑:

当网格具有大量数据(10,000行)时,此操作将失败。重新开放赏金。

看起来像必须扩展和折叠那样对性能的打击如此之多,导致许多组引起问题。


1
@AmerllicA这个答案还为时过早,不适用于大型数据集
Julien

1
@AmerllicA要求这样的赏金不仅是不道德的,而且实际上,OP在发布此答案后开始了赏金,这是因为OP没有得到他想要的答案结果。因此,请不要像这样乞求您尚未获得的赏金,如果您有时间想出一个好的/更好的解决方案,请尝试帮助OP解决他的问题。
Christos Lytras

@ChristosLytras,感谢您的提示,我将立即删除我的评论。
AmerllicA

@ChristosLytras认为同样的事情,不能说得更好
Islam Elshobokshy
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.