时间戳

首页 > 解决方案 > sgOnSelectedRowsChanged() 事件在与可拖动分组一起使用时多次发出 Angular-slickgrid

angular - sgOnSelectedRowsChanged() 事件在与可拖动分组一起使用时多次发出 Angular-slickgrid

问题描述

可拖动分组和复选框选择器已启用。如果我们在网格与某些列分组时单击全选复选框，则会多次发出 sgOnSelectedRowsChanged() 事件，直到所有选中的复选框都被取消选中。这会在几分之一秒内发生，因此全选选项似乎不起作用。但是单选复选框工作正常。

这个问题可以在可拖动的分组 slick-grid 演示中重新创建。

  1. enableCheckboxSelector：在 gridOptions 中为 true。
  2. HTML
<angular-slickgrid gridId="grid19"
    [dataset]="dataset"
    [columnDefinitions]="columnDefinitions"
    [gridOptions]="gridOptions"
    (onAngularGridCreated)="angularGridReady($event)"
    (sgOnSelectedRowsChanged)="SelectedRows($event, $event.detail.args)">
  </angular-slickgrid>
  1. TS 中的 SelectedRows()。
public selectedRows = [];

SelectedRows(e, args) {
    console.log("args", args)
    this.selectedRows = [];
    if (Array.isArray(args.rows)) {
      this.selectedRows = args.rows.map(res => {
        const item = this.gridObj.getDataItem(res);
        return item;
      });
    }
  }

标签： angularionic-frameworkionic4angular-slickgrid

解决方案

一起使用这两个功能可能并不理想，您可能需要做一些技巧才能让它们一起工作。了解正在发生的事情的最好方法是查看 SlickGrid（核心库）插件代码，在这种情况下它是slick.draggablegrouping.js，我们可以看到，在分组时调用方法updateGroupBy()时，它会调用dataView.setGrouping([]);并解释为什么您的选择变为空。

获得有效解决方案的最佳机会就像我说的那样稍微欺骗一下 lib。您必须在 Draggable Grouping 启动之前找到一种方法来获取选择，这意味着您需要在dataView.setGrouping([]);调用之前获取选择。不幸的是，该插件只有一个onGroupChanged事件，我们希望onBeforeGroupChanged为该工作举办一个事件。

  1. 可能的解决方案，在 fork 上创建一个 Pull Request以在slick.draggablegrouping.js6pac/SlickGrid中添加一个onBeforeGroupChanged事件。我强烈建议你这样做，这将有助于社区
  2. 类似于选项 1)，而是在slick.dataview.jsonBeforeSetGrouping的事件中添加一个新事件。onBeforeGroupChanged
  3. 在 DataView 中，我看到一个onBeforePagingInfoChanged我认为在 的过程中被调用的setGrouping()，如果它发生在分组完成之前你可能会很幸运并且能够在getSelectedRows()之前拉onSelectedRowsChanged，你必须尝试。
  4. 如果您通过按钮调用分组，那么您就是调用者setDroppedGroups，因此您可以在应用组之前获取选择的副本

我试图找到一个在选择之前触发的事件，但我找不到任何东西（尽管我在源代码中检查得非常快）。我知道我们使用slick.rowselectionmodel.js（行选择方法），但即使只有一个事件，onSelectedRangesChanged该事件也是事后发生的，而我们需要在分组/选择更改之前发生的事件。

So your best bet is to first try Option 3) and if that doesn't work then I strongly suggest you to contribute and do Option 1) and/or 2) (you can add both). If do decide to create a PR then just reference this SO Answer to your PR. Good luck.

... oh and BTW, I'm the author of Angular-Slickgrid and as you can see Angular-Slickgrid highly depends on the core lib SlickGrid (6pac fork), in your use case the issue is with the core lib itself not Angular-Slickgrid.

推荐阅读