如何防止栅格自动选择新添加的项目,保留当前选择

How to prevent kogrid to automatically select newly added items, preserving current selection?

本文关键字:选择 项目 保留 添加 何防止 新添加      更新时间:2023-09-26

我有以下问题:我的页面上有两个网格。一个在左边,一个在右边

在它们之间,我添加了两个按钮,这样用户就可以将选中的项目从左边移动到右边,或者从右边移动到左边。

因此我的视图模型有4个数组,ItemsA, SelectedItemsA, ItemsB和selectedItemsB。两个栅格的配置如下:

<div data-bind="koGrid: {
data: ItemsA,
selectedItems: SelectedItemsA,
displaySelectionCheckbox: false,
enableRowReordering: true,
enableSorting: false,
columnDefs: [
{ field: 'Name', cellTemplate: tableCellTemplate, cellClass: 'player-row' },
    { field: 'ClubName', displayName: 'Mannschaft' },
    { field: 'DisplayPosition', displayName: 'Position', cellTemplate: playerPositionNameTemplate}
],
footerVisible: false
}">
</div>

在从左向右移动项目时,我将通过:

将SelectedItemsA中的每个项目推入ItemsB:
$.each(self.SelectedItemsA(), function(idx, player) {
    self.ItemsB.push(player);
});

和清除左侧选区通过:

self.ItemsA.removeAll(self.SelectedItemsA());

这些项目将正确地出现在ItemsB的右边网格中,但是它们是被自动选中的。因此,如果我想要移动一个项目,我首先必须取消选择之前移动的所有项目!如何防止kgrid自动选择新添加的项目?

这是koGrid的一个bug。

在koGrid-2.1.1.debug.js:

self.setRenderedRows = function (newRows) {
    self.renderedRows(newRows);
    self.refreshDomSizes();
};

newRows是您选择/复制的行数组。koGrid原样复制它们,这意味着,newRows.selected()(可观察的)是true

结果表明,上述更改还会在行滚动出视觉范围后取消选择行。但是,我认为您可以将__kg_selected__设置为false为您想要复制的每一行。

说:

ko.utils.arrayForEach(self.SelectedItemsA(), function(player) {       
    player.__kg_selected__ = false;     
});

,然后将它们全部推入新数组:

ko.utils.arrayPushAll(self.ItemsB(), self.SelectedItemsA());