我正在使用ngx-datatable列出一些用户 我想使用函数调用选择所有行。 有什么办法吗? 我正在使用角4
答案 0 :(得分:2)
假设您的用户已存储在users
道具中,您需要在模板中添加selected
输入道具,如下所示:
<ngx-datatable [rows]="users" [selected]="selectedUsers">...
之后,您应该能够选择组件逻辑中的所有用户:
@Component()
export class UsersComponent {
users: any[];
selectedUsers: any[];
/* ... */
selectAllUsers(): void {
this.selectedUsers = [...users];
}
}
请注意,此方法非常简单,只是为了让您了解可能的解决方案。这意味着它还没有经过测试,所以让我知道它是否有效。
答案 1 :(得分:1)
编辑1
我的旧答案有一些负面的副作用,我花时间去挖掘一下。据我所知,由于您只能在标题中勾选一个全选按钮,因此在DatatableComponent下有一个onHeaderSelect()函数,如果我们从外部触发它,它将作为全选复选框点击。
以下代码。
export class DatatableVerticalComponent implements OnInit {
public rows = [{prop1:1, prop2:2},{prop1:3, prop2:4}];
@ViewChild(DatatableComponent) ngxDatatable: DatatableComponent;
onSelectAllClick() {
this.ngxDatatable.onHeaderSelect(true);
}
}
由于我删除了标题行,因此无法使用默认的复选框功能
http://swimlane.github.io/ngx-datatable/#chkbox-selection
我快速解决了从ngx-datatable外部选择所有行的问题。
代码:
export class DatatableVerticalComponent implements OnInit {
public rows = [{prop1:1, prop2:2},{prop1:3, prop2:4}];
@ViewChild(DatatableComponent) ngxDatatable: DatatableComponent;
onSelectAllClick() {
this.ngxDatatable.selected = this.rows;
}
}
说明:
首先,您在component.ts文件中将其作为ViewChild。现在ngx-datatable将选定的行保存为数组
/**
* List of row objects that should be
* represented as selected in the grid.
* Default value: `[]`
*/
@Input() selected: any[] = [];
由于我没有找到在DatatableComponent中设置所选行的函数,所以我只使用ViewChild来设置所选变量。我没有使用[@Input]创建数据绑定,因为我不想留下我一直在控制外部代码选择的印象。
答案 2 :(得分:0)
这是一个古老的问题,但我遇到了同样的问题,并认为共享我的解决方案可能会有所帮助。
基于ngxdatatable的代码(github source-我添加了代码段,并且链接可能因代码更改而过时了):
/**
* Toggle all row selection
*/
onHeaderSelect(event: any): void {
if (this.selectAllRowsOnPage) {
// before we splice, chk if we currently have all selected
const first = this.bodyComponent.indexes.first;
const last = this.bodyComponent.indexes.last;
const allSelected = this.selected.length === last - first;
// remove all existing either way
this.selected = [];
// do the opposite here
if (!allSelected) {
this.selected.push(...this._internalRows.slice(first, last));
}
} else {
// before we splice, chk if we currently have all selected
const allSelected = this.selected.length === this.rows.length;
// remove all existing either way
this.selected = [];
// do the opposite here
if (!allSelected) {
this.selected.push(...this.rows);
}
}
this.select.emit({
selected: this.selected
});
}
onHeaderSelect可以切换所有不需要的行。
我需要选择所有行。
因此,受代码源的启发,我在组件中编写了以下方法:
@ViewChild(DatatableComponent) ngxDatatable: DatatableComponent;
...
unselectRows(): void {
const table = this.ngxDatatable;
const allSelected = table.selected.length === table.rows.length;
if (!allSelected) { // Select all only if not already the case
// Reset the selection first
table.selected = [];
// Add all rows to the selection
table.selected.push(...table.rows);
// Important: Emit the select event
table.select.emit({
selected: table.selected
});
}
}
此解决方案适用于我的用例。
注意:我不使用selectAllRowsOnPage
,这可能会引起我在此处未处理的问题。