如何将最后添加的行设置为在 Slickgrid 中选择
How to set last added row as selected in 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]);
但是它不会 highlight/select 最后添加的行。此命令适用于网格中的任何其他现有行。
是不是rowview还没有渲染出来,所以不能选中?有解决方法吗?
请注意,我是 Angular-Slickgrid
的作者
您可以使用网格服务中的addItem
方法,它会默认突出显示该行。看看这个 Example,默认情况下这不会 select 该行,但是该方法有额外的选项,您可以使用 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
方法 here 的。 Grid Service 中的所有方法基本上都只是辅助方法,它们都使用 SlickGrid 和 DataView 方法来做最后的执行。另请注意,高亮处理起来有点棘手,需要使用 SlickGrid MetaData 将 CSS classes (add/remove css class for一秒钟)在该行上以模拟突出显示,因此这是简单使用网格服务的另一个原因。
我正在向 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]);
但是它不会 highlight/select 最后添加的行。此命令适用于网格中的任何其他现有行。
是不是rowview还没有渲染出来,所以不能选中?有解决方法吗?
请注意,我是 Angular-Slickgrid
的作者您可以使用网格服务中的addItem
方法,它会默认突出显示该行。看看这个 Example,默认情况下这不会 select 该行,但是该方法有额外的选项,您可以使用 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
方法 here 的。 Grid Service 中的所有方法基本上都只是辅助方法,它们都使用 SlickGrid 和 DataView 方法来做最后的执行。另请注意,高亮处理起来有点棘手,需要使用 SlickGrid MetaData 将 CSS classes (add/remove css class for一秒钟)在该行上以模拟突出显示,因此这是简单使用网格服务的另一个原因。