如何在剑道网格过滤器上添加延迟

Question

我正在使用 Angular 2 的 Kendo 网格组件。我注意到，每当我输入过滤器（在列标题内）时，它都会触发 stateChanged 事件。但是我正在调用服务器，那么如何添加某种延迟以避免在每次击键时调用服务器？

Answer 1

你好，山姆，

在等待 Kendo 团队加入此类功能一段时间后，我最终决定采用以下方法：

• 我们可以使用 BehaviorSubject 来保存 Kendo Grid 'DataStateChangeEvent' 并包含时间延迟。通过这种方式，我们丢弃了在特定时间段内执行的每个网格的状态更改（及其服务器调用）。

.ts 组件：

---

...

import {
    Component, trigger, state, animate, transition, style, OnInit, OnDestroy
} from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/debounceTime';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Subscription } from 'rxjs/Subscription';
import {
    GridComponent, GridDataResult, DataStateChangeEvent
} from '@progress/kendo-angular-grid';
import {
    DataSourceRequestState, DataResult, process, State, GroupDescriptor
} from '@progress/kendo-data-query';
...

export class ExampleComponent implements OnInit, OnDestroy {

// Subscriptions (we will unsubscribe them at ngOnDestroy)
subscriptions: Subscription = new Subscription();

// Grid data
items: GridDataResult;

// Kendo grid initial DataSourceRequestState
defaultDataSourceRequestState =
    { skip: 0, take: 20, group: [], sort: [] } as DataSourceRequestState;

// Kendo grid state BehaviorSubject
stateSubject =
    new BehaviorSubject<DataSourceRequestState>(
        this.defaultDataSourceRequestState
    );

...

constructor(...) {
    // Delay for Kendo grid dataStateChange event of 200 ms
    this.subscriptions.add(
        this.stateSubject
        .debounceTime(200)
        .subscribe(s =>
            this.dataStateChangeCompleted(this.stateSubject.getValue())
        )
    );
}

ngOnDestroy() {
    this.subscriptions.unsubscribe();
}

dataStateChange(stateChange: DataStateChangeEvent) {
    // Set BehaviourSubject´s new state
    this.stateSubject.next(stateChange);
}

dataStateChangeCompleted(stateChange: DataSourceRequestState) {
    // TO DO: Here we can do the Server call or any other action
    // once the delay has finished with the last grid state
    this.getItems(stateChange);
}

...

}

.html 模板：

---

<kendo-grid #g="kendoGrid"
    [data]="items"
    [pageable]="true"
    [pageSize]="(stateSubject | async)?.take"
    [skip]="(stateSubject | async)?.skip"
    [sortable]="true"
    [sort]="(stateSubject | async)?.sort"
    [groupable]="true"
    [group]="(stateSubject | async)?.group"
    [filterable]="true"
    [filter]="(stateSubject | async)?.filter"
    [scrollable]="'scrollable'"
    (dataStateChange)="dataStateChange($event)">

...

</kendo-grid>

我希望这会有所帮助:)

问候。