angular - Telerik kendo-grid Paging - 第一次加载时间过长
问题描述
我正在使用 Angular 6 和 Telerik kendo-grid 4.8.4
下面是剑道网格的示例代码
<kendo-grid #grid="kendoGrid" class="k-grid-fullheight" (cellClick)="onCellClick($event)"
(dataStateChange)="dataStateChange($event)" [sortable]="{allowUnsort: false, mode: 'single'}"
[sort]="state.sort" [filter]="state.filter" [data]="TestData" [selectable]="selectableSettings"
[pageable]="true" [pageSize]="state.take" [skip]="state.skip" filterable="menu" [reorderable]="true"
(selectionChange)="selectionChanged($event)" [groupable]="false" [group]="state.group" [columnMenu]="true"
[resizable]="true">
<kendo-grid-column showSelectAll="true" [width]="60" [minResizableWidth]="60">
<ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
<input type="checkbox" (click)="SetAllSelected($event)" />
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.selected" [attr.disabled]="dataItem.Name !== null ? true : null" (click)=SetSelectedItem(dataItem) />
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="Name" title={{NAME}} filter="text" [filterable]="true"
headerClass="kendoColumn">
<ng-template kendoGridCellTemplate let-dataItem>
<a *ngIf="dataItem.Status === 0"
[routerLink]="['/MyModule/details/'+dataItem.Id]">{{dataItem.Name}}</a>
<span *ngIf="dataItem.Status === 1">{{dataItem.Name}}</span>
</ng-template>
</kendo-grid-column>
</kendo-grid>
尝试按照以下链接
分页在上面的链接中工作正常。
第一次,网格加载需要 20 秒,因为它试图获取大约 20,000 条记录。
如何修改当前的剑道网格以仅获取前 10 条记录?
点击页码后,是否可以再次从服务器获取?
任何帮助将不胜感激。
解决方案
如果您也发布一些 ts 代码会有所帮助。
如何修改当前的剑道网格以仅获取前 10 条记录?
设置state.take
为10
并state.skip
进行0
http 调用以获取数据。
点击页码后,是否可以再次从服务器获取?
是的,在您的dataStateChange(event: DataStateChangeEvent)
in ts 中,您应该附加event
到state
likethis.state = event;
并进行 http 调用以检索相应的数据(例如console.log(event)
,您将看到第 3 页event.skip
将是 20,在第 4 页event.skip
将是 30,等等)。
推荐阅读
- python - 列表中元素排列的最佳并行性
- c# - 在 OpenVPN 后面运行的 .NET C# 服务未返回正确的公共 IP
- sql - 获取所有子 SQL
- javascript - 如何使用 Javascript 确定井字游戏中的平局
- r - 如何最好地在热图中同时呈现三个变量?
- android - 使用 html 重定向打开 WhatsApp
- vue.js - 如何根据VueJS中的条件从元素中删除值
- c# - Prism 7 DI中的Register vs RegisterInstance vs RegisterSingleton
- c# - 合并来自 SelectMulti 元组的结果
- react-native - React Native 动画的问题