时间戳

首页 > 解决方案 > 如何在 Slickgrid 中设置最后添加的行

angular - 如何在 Slickgrid 中设置最后添加的行

问题描述

我正在向 slickgrid 添加一个新行，如下所示：

this.dataset.push(
      {
        id: idObjet,
        id_objet: idObjet,
        name: ElementType[elementType] + '-' + idObjet.toString(),
        type: ElementType[elementType],
        delete: 0,
      }
    );

    this.angularGrid.dataView.refresh();

在这一点上，我想突出显示这一行。所以我首先检索这一行的索引：

const rowIndex = this.dataView.getIdxById(id);

然后我尝试将此行设置为选择使用：

this.slickGrid.setSelectedRows([rowIndex]);

但是，它不会突出显示/选择最后添加的行。此命令适用于网格中的任何其他现有行。

是不是因为rowview还没有渲染，所以不能选择？有解决方法吗？

标签： angularslickgridangular-slickgrid

解决方案

请注意，我是Angular-Slickgrid的作者

您可以使用addItem网格服务中的方法，默认情况下会突出显示该行。看一下这个Example，但是默认情况下这不会选择行，但是您可以使用该方法的额外选项selectRow: true

对于我提到的那个示例，这是执行此操作的代码。

angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
    this.dataView = angularGrid.dataView;
    this.grid = angularGrid.slickGrid;
    this.gridService = angularGrid.gridService;
}

addNewItem(insertPosition?: 'top' | 'bottom') {
    const newId = this.dataset.length;
    const randomYear = 2000 + Math.floor(Math.random() * 10);
    const randomMonth = Math.floor(Math.random() * 11);
    const randomDay = Math.floor((Math.random() * 29));
    const randomPercent = Math.round(Math.random() * 100);

    const newItem = {
      id: newId,
      title: 'Task ' + newId,
      duration: Math.round(Math.random() * 100) + '',
      percentComplete: randomPercent,
      percentCompleteNumber: randomPercent,
      start: new Date(randomYear, randomMonth, randomDay),
      finish: new Date(randomYear, (randomMonth + 2), randomDay),
      effortDriven: true
    };
    this.angularGrid.gridService.addItem(newItem, { position: insertPosition, selectRow: true });
  }

请注意，addItem唯一支持top或的位置bottom（基本上将插入网格的第一行或最后一行）。

如果您真的希望在网格中的特定行索引处插入行，那么您将不得不看看我是如何在此处addItem实现此方法的。Grid Service 中的所有方法基本上都只是辅助方法，它们都使用 SlickGrid 和 DataView 方法来做最后的执行。另请注意，高亮处理有点棘手，您需要使用 SlickGrid MetaData 更改该行上的 CSS 类（添加/删除 css 类）以模拟高亮，这是另一个原因只需使用网格服务。

推荐阅读