角度分量中来自剑道网格的服务器端参数

Question

我正在使用 angular 4 的剑道网格并尝试实现服务器端自定义分页。

剑道网格在 javascript 方法中被初始化。

问题是如何在页面更改事件中将服务器参数从剑道网格传递到角度组件？

Answer 1

Kendo Grid 有一个您可以调用的页面更改事件，这似乎是您正在使用的，然后您可以执行以下操作：

import { Component } from '@angular/core';
import { products } from './products';
import { GridDataResult, PageChangeEvent } from '@progress/kendo-angular-grid';

@Component({
  selector: 'my-app',
  template: `
      <kendo-grid
          [kendoGridBinding]="data"
          [pageSize]="pageSize"
          [skip]="skip"
          [pageable]="true"
          [height]="200"
          (pageChange)="onPageChange($event)"
        >
         <kendo-grid-column field="ProductID" title="ID" width="40">
         </kendo-grid-column>
         <kendo-grid-column field="ProductName" title="Name" width="250">
         </kendo-grid-column>
         <kendo-grid-column field="UnitPrice" title="Price" width="80" format="{0:c}">
         </kendo-grid-column>

         <ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
            <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
            <kendo-slider
                [showButtons]="false"
                [tickPlacement]="'none'"
                [max]="totalPages"
                [min]="1"
                (valueChange)="sliderChange($event)"
                [value]="currentPage">
            </kendo-slider>
            <kendo-pager-info></kendo-pager-info>
            <kendo-pager-next-buttons></kendo-pager-next-buttons>
            <kendo-pager-page-sizes [pageSizes]="[5, 10, 40]"></kendo-pager-page-sizes>
         </ng-template>
      </kendo-grid>
  `
})
export class AppComponent {
    public data: any[] = products;
    public pageSize = 10;
    public skip = 0;

    public sliderChange(pageIndex: number): void {
        this.skip = (pageIndex - 1) * this.pageSize;
    }

    public onPageChange(state: any): void {
        this.pageSize = state.take;
    }
}

您可以在他们的分页文档中阅读更多相关信息：https://www.telerik.com/kendo-angular-ui/components/grid/paging/