gpt4 book ai didi

angular-material2 - Angular Material2 Mat-Table服务器端分页跨页行选择

转载 作者:行者123 更新时间:2023-12-05 07:25:23 25 4
gpt4 key购买 nike

使用服务器端分页时,如何在 Angular Material 2 mat-table 上实现跨页行选择?

我有一个带有服务器端分页的 Angular Material 表。但是,默认实现(如 Material 文档中所述)在导航到新页面时取消选中所有行(和“选择所有行”复选框)。

我尝试过各种各样的事情/方法(太多了,无法在此处记录),但这里有一些片段可能会有帮助。为清楚起见,已简化代码。

selections.selected 数组确实包含跨页面的所有选定行。通过将默认的 isSelected 函数更改为自定义函数——跨页面的行显示为选中状态。请注意,在我的例子中,行有一个唯一的属性 _id。

private isSelectedCustom(row: any): boolean {
return <boolean>this.selection.selected.find(o => o._id === row._id);
}

selection.isSelected = isSelectedCustom.bind(this);

但是,如果我取消选中一行(导航到新页面并返回),该行再次显示为已选中。目前还不清楚为什么,我什至在取消选中行和在页面之间导航时看到 selection.selected 中的重复行。

尝试从选择中手动删除行(和重复行)不起作用,即

selection.onChange.subscribe(selection => {

if (selection && selection.removed && selection.removed[0] && selection.removed.length == 1) {

let removeId = selection.removed[0]._id;

// Remove multiple occurences. Unknown how selection.selected can have duplicates.
for (var i = this.selection.selected.length - 1; i >= 0; i--) {

if (this.selection.selected[i]['_id'] == removeId) {
console.log('force remove', this.selection.selected[i]);
//this.selection.selected.splice(i, 1);
this.selection.selected.
}
}
}
}

对于“选择所有行”复选框,如果所有行都被选中则不可能派生(因为客户端只有一页行而不是所有行)。因此,当“选择所有行”被选中/未选中时,我使用一个明确设置为 true/false 的标志。

当导航到后续页面时,如果“选择所有行”标志为真,那么我将所有行设置为选中。

dataSource.data.forEach(row => selection.select(row));

如果某行未选中,我将“选择所有行”标志设置为 false。

if (selection && selection.removed && selection.removed.length > 0) {
isAllPagesSelected = false;
}

这种“选择所有行”复选框的方法似乎通常有效,但感觉很乱。

最佳答案

如果没有跨页就容易多了,但是

onPageChanged -> 加载新数据 -> 删除所有检查 -> 从 viewChild -> foreach 查找行 -> 为每一行设置检查/取消检查(包括 theader 中的 checkAllbox)。

可能需要 viewChild forEach row => 找到最近的复选框并设置 Checked

关于angular-material2 - Angular Material2 Mat-Table服务器端分页跨页行选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54846239/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com