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

问题描述 投票:7回答:1

current grid status

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

我的绊脚石似乎是我无法弄清楚如何选择当前在组中不可见的行。平滑网格维护可视选择项的集合,而网格数据视图维护可见或不可见的全部所选项的集合。但是,当我单击折叠行的组复选框时,我不知道如何将数据传送到数据中。

我正在像这样配置我的网格:

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

gist to custom plugins, too long to include here具体来说,如果您查看slick.checkboxselectionmodel的第57行:

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

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

任何帮助将不胜感激!

一些注意事项:

javascript typescript slickgrid
1个回答
1
投票

gist to updated plugins

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

一个陷阱(我确定很容易得到改进)是仍然需要在组格式化程序中定义组级别复选框

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

编辑:

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

看起来像必须扩展和折叠以至于造成许多组的性能下降,导致问题。

© www.soinside.com 2019 - 2024. All rights reserved.