如何以编程方式更改 Angular Kendo UI 网格页面索引?
How to change Angular Kendo UI grid page index programmatically?
这个问题是 asked 8 years ago,但是 Kendo UI 网格已经发展,现在支持 Angular。原始问题的答案不适用于 Kendo 网格 Angular。
我有一个 kendo 网格,如果数据少于一页,我会在其中隐藏分页控件。
template: `<kendo-grid #kendoGrid [kendoGridBinding]="gridView"
[pageSize]="pageSize" [pageable]="showPaginator()"
哪里
showPaginator(): boolean {
return this.gridView?.length > this.pageSize;
}
如果第二页上只有一个项目,而我删除了该项目,则网格会显示没有任何项目的第二页,但会隐藏分页控件。
我想 select 网格的第一行,或 select 网格的第一页,但找不到 api 调用来做到这一点。
为了 select 网格的第一页,您需要使用 Kendo 的网格 state in order to change the skip,例如:
html
[pageSize]="state.take"
[skip]="state.skip"
ts
public removeItem() {
//remove the item
this.state.skip = 0;
//reload items refreshing grid
}
如您所见,我也更改了 [pageSize]="state.take"
而不是 pageSize
。您可以在 take.
上找到更多信息
虽然第一个答案是正确的,但我想要 post 在不需要时隐藏分页工具栏的完整解决方案,以及在页面上的最后一行被删除时移回页面的完整解决方案.
模板
template: `<kendo-grid
[kendoGridBinding]="gridView"
[pageSize]="pageSize" [pageable]="showPaginator()"
[skip]="skip"
(pageChange)="pageChange($event)">`
组件
skip = 0; // how many rows to skip
pageSize: number = 20;
_gridData = []; // original passed data
gridView: any[]; // store a slice of data if any filter are active
// Each time the number of rows in the grid data changes
// move back from last page if empty (eg deleted last item on last page)
@Input() set gridData(values: any) {
this._gridData = [...values];
} else if (values && values.length === 0) {
this._gridData = [];
}
this.gridView = cloneDeep(this._gridData); // set initial view
while ( (this.gridView.length <= this.skip ) &&
(this.skip >= this.pageSize)) {
this.skip = this.skip - this.pageSize;
}
}
while ( (this.gridView.length <= this.skip ) &&
(this.skip >= this.pageSize)) {
this.skip = this.skip - this.pageSize;
}
}
public showPaginator(): boolean {
return ((!!this.gridView) && (this.gridView.length > this.pageSize));
}
// Keep track of the current page.
public pageChange(event: PageChangeEvent): void {
this.skip = event.skip;
}
这个问题是 asked 8 years ago,但是 Kendo UI 网格已经发展,现在支持 Angular。原始问题的答案不适用于 Kendo 网格 Angular。
我有一个 kendo 网格,如果数据少于一页,我会在其中隐藏分页控件。
template: `<kendo-grid #kendoGrid [kendoGridBinding]="gridView"
[pageSize]="pageSize" [pageable]="showPaginator()"
哪里
showPaginator(): boolean {
return this.gridView?.length > this.pageSize;
}
如果第二页上只有一个项目,而我删除了该项目,则网格会显示没有任何项目的第二页,但会隐藏分页控件。 我想 select 网格的第一行,或 select 网格的第一页,但找不到 api 调用来做到这一点。
为了 select 网格的第一页,您需要使用 Kendo 的网格 state in order to change the skip,例如:
html
[pageSize]="state.take"
[skip]="state.skip"
ts
public removeItem() {
//remove the item
this.state.skip = 0;
//reload items refreshing grid
}
如您所见,我也更改了 [pageSize]="state.take"
而不是 pageSize
。您可以在 take.
虽然第一个答案是正确的,但我想要 post 在不需要时隐藏分页工具栏的完整解决方案,以及在页面上的最后一行被删除时移回页面的完整解决方案.
模板
template: `<kendo-grid
[kendoGridBinding]="gridView"
[pageSize]="pageSize" [pageable]="showPaginator()"
[skip]="skip"
(pageChange)="pageChange($event)">`
组件
skip = 0; // how many rows to skip
pageSize: number = 20;
_gridData = []; // original passed data
gridView: any[]; // store a slice of data if any filter are active
// Each time the number of rows in the grid data changes
// move back from last page if empty (eg deleted last item on last page)
@Input() set gridData(values: any) {
this._gridData = [...values];
} else if (values && values.length === 0) {
this._gridData = [];
}
this.gridView = cloneDeep(this._gridData); // set initial view
while ( (this.gridView.length <= this.skip ) &&
(this.skip >= this.pageSize)) {
this.skip = this.skip - this.pageSize;
}
}
while ( (this.gridView.length <= this.skip ) &&
(this.skip >= this.pageSize)) {
this.skip = this.skip - this.pageSize;
}
}
public showPaginator(): boolean {
return ((!!this.gridView) && (this.gridView.length > this.pageSize));
}
// Keep track of the current page.
public pageChange(event: PageChangeEvent): void {
this.skip = event.skip;
}