Kendo UI网格未随搜索结果刷新

时间:2019-06-25 14:23:07

标签: angularjs typescript kendo-ui kendo-ui-angular2

我有一个kendo ui网格视图,并且网格视图上有3个选项卡:活动,不完整和不活动。有与网格视图关联的搜索功能。

我目前遇到的问题是,在活动和非活动表中,当我输入要搜索的关键字时,结果未得到过滤。但是在不完整的标签中,当我在搜索框中输入要搜索的关键字时,结果就会被过滤。

我所附的代码是将AngularJS(v1.0)与Typescript一起使用。

当我调试javascript代码并在“不完整”标签上进行搜索时,我看到我的javascript代码被触发。但是活动和非活动标签都不会发生这种情况。

这是网格的前端视图代码。

<div class="admin-action__sub-content">
    <div class="form-group">
        <div class="row">
            <div class="col-md-9">
                <div class="pull-left button-new-item">
                    <button class="btn btn-primary btn-compact"
                            type="button"
                            ui-sref="draft">
                        <i class="icons__plus"></i>
                    </button>
                    <div class="button-label button-label--reverse">Add new asset configuration</div>
                </div>
            </div>
            <div class="col-md-3 form-group">
                <div class="row">
                    <label for="SearchQuery" class="control-label col-xs-3">Search</label>
                    <div class="col-xs-9">
                        <input name="SearchQuery" class="form-control" ng-model="$ctrl.searchQuery" ng-model-options="{debounce:250}" />
                    </div>
                </div>
            </div>
        </div>
        <md-tabs md-dynamic-height="true">
            <md-tab>
                <md-tab-title ng-click="$ctrl.setActiveTab('active')">
                    Active
                </md-tab-title>
                <md-tab-body>
                    <div kendo-grid="$ctrl.activeAssetsGrid" k-options="$ctrl.savedAssetOptions(true)">
                    </div>
                </md-tab-body>
            </md-tab>
            <md-tab>
                <md-tab-title ng-click="$ctrl.setActiveTab('incomplete')">
                    Incomplete
                </md-tab-title>
                <md-tab-body>
                    <div kendo-grid="$ctrl.incompleteAssetsGrid" k-options="$ctrl.incompleteResourceOptions">
                    </div>
                </md-tab-body>
            </md-tab>
            <md-tab>
                <md-tab-title ng-click="$ctrl.setActiveTab('inactive')">
                    Inactive
                </md-tab-title>
                <md-tab-body>
                    <div kendo-grid="$ctrl.inactiveAssetsGrid" k-options="$ctrl.savedAssetOptions(false)">
                    </div>
                </md-tab-body>
            </md-tab>
        </md-tabs>
    </div>
</div>

这是打字稿代码:

    export class AssetConfigurationGridController {
        private _searchQuery: string;
        private activeAssetsGrid: kendo.ui.Grid;
        private inactiveAssetsGrid: kendo.ui.Grid;
        private incompleteAssetsGrid: kendo.ui.Grid;
        private activeTab: string = 'active';

        static $inject = ['$http', '$state', 'jsonBlobsService'];

        constructor(private http: ng.IHttpService, private state: ng.ui.IStateService, private jsonBlobsService: JsonBlobsService) {
        }

        get searchQuery(): string {
            return this._searchQuery;
        }

        set searchQuery(value: string) {
            this._searchQuery = value;

            if (this.activeTab === 'active') {
                if (this.activeAssetsGrid) {
                    this.activeAssetsGrid.dataSource.fetch();
                }
            } else if (this.activeTab === 'inactive') {
                if (this.inactiveAssetsGrid) {
                    this.inactiveAssetsGrid.dataSource.fetch();
                }
            } else if (this.activeTab === 'incomplete') {
                if (this.incompleteAssetsGrid) {
                    this.incompleteAssetsGrid.dataSource.fetch();
                }
            }
        }

        setActiveTab(value: string) {
            this.activeTab = value;
            this.searchQuery = "";
        }

        private baseGridOptions: kendo.ui.GridOptions = {
            pageable: true,
            sortable: true,
            groupable: false,
            selectable: false,
            dataSource: {

            }
        };

        savedAssetOptions(active: boolean): kendo.ui.GridOptions {
            let options: kendo.ui.GridOptions = {
                dataSource: {
                    pageSize: 10,
                    transport: {
                        read: (opts: kendo.data.DataSourceTransportReadOptions) => {
                            if (this.searchQuery) {
                                if (active) {
                                    opts.data.filter = {
                                        logic: "and",
                                        filters: [
                                            { field: 'active', operator: 'eq', value: active },
                                            { field: 'assetTypeActive', operator: 'eq', value: active },
                                            { field: 'assetSubTypeActive', operator: 'eq', value: active },
                                            { field: 'searchText', operator: 'contains', value: this.searchQuery }
                                        ]
                                    };
                                } else {
                                    opts.data.filter = {
                                        logic: "and",
                                        filters: [
                                            { field: 'searchText', operator: 'contains', value: this.searchQuery },
                                            {
                                                logic: "or",
                                                filters: [
                                                    { field: 'active', operator: 'eq', value: active },
                                                    { field: 'assetTypeActive', operator: 'eq', value: active },
                                                    { field: 'assetSubTypeActive', operator: 'eq', value: active }

                                                ]
                                            }

                                        ]
                                    }
                                }
                            } else {
                                opts.data.filter = {
                                    logic: active ? "and" : "or",
                                    filters: [
                                        { field: 'active', operator: 'eq', value: active },
                                        { field: 'assetTypeActive', operator: 'eq', value: active },
                                        { field: 'assetSubTypeActive', operator: 'eq', value: active }]
                                };
                            }

                            if (opts.data.sort == null) {
                                opts.data.sort = [];
                            }

                            if (opts.data.sort != null && opts.data.sort.length !== 1) {  
                                opts.data.sort = [
                                    { field: 'assetTypeName', dir: 'asc' },
                                    { field: 'assetSubTypeName', dir: 'asc' },
                                    { field: 'assetClassificationName', dir: 'asc' }
                                ];
                            }

                            this.http.get("/api/AssetConfiguration").then((response) => opts.success(response.data));
                        }
                    }
                },
                pageable: {
                    pageSizes: true
                },
                columns: [
                    { field: 'assetTypeName', title: 'Asset Type', template: '<span ng-click="$ctrl.edit(#: assetClassificationId#);">#: assetTypeName #</span>' },
                    { field: 'assetSubTypeName', title: 'Asset Sub Type' },
                    { field: 'assetClassificationName', title: 'Asset Classification', template: '<span ng-if="#: classificationHiddenFromUser #">n/a</span><span ng-if="!#: classificationHiddenFromUser #">#: assetClassificationName #</span>' },
                    { field: 'assetClassificationId', title: 'Edit', template: '<a class="k-button k-button-icontext k-grid-edit" ng-click="$ctrl.edit(#: assetClassificationId#);"><span class="k-icon k-edit"></span>Edit</a>', width: "100px" }
                ]
            };
            return angular.merge(options, this.baseGridOptions);
        }  




        get incompleteResourceOptions(): kendo.ui.GridOptions {
            let self = this;
            let options: kendo.ui.GridOptions = {
                dataSource: {
                    pageSize: 10,
                    serverFiltering: true,
                    transport: {
                        read(opts: kendo.data.DataSourceTransportReadOptions) {
                            if (opts.data.sort == null) {
                                opts.data.sort = [];
                            }

                            if (opts.data.sort != null && opts.data.sort.length !== 1) {
                                opts.data.sort = [
                                    { field: 'resource.assetType.name', dir: 'asc' },
                                    { field: 'resource.assetSubType.name', dir: 'asc' },
                                    { field: 'resource.assetClassification.name', dir: 'asc' }
                                ];
                            }

                            self.jsonBlobsService.list(JsonBlobTypeEnum.AssetConfiguration).then(response => {
                                let resources: any;
                                if (self.searchQuery) {
                                    resources = response.data.value.filter((blob) => (JSON.parse(blob.jsonData).assetType.name.toLowerCase().indexOf(self.searchQuery.toLowerCase()) > -1 || JSON.parse(blob.jsonData).assetSubType.name.toLowerCase().indexOf(self.searchQuery.toLowerCase()) > -1) == true)
                                        .map(blob => {
                                            return {
                                                id: blob.id,
                                                resource: JSON.parse(blob.jsonData)
                                            }                                      
                                    });

                                } else {
                                    resources = response.data.value.map(blob => {
                                        return {
                                            id: blob.id,
                                            resource: JSON.parse(blob.jsonData)
                                        };
                                    });                               
                                }
                                opts.success(resources);
                            });
                        }
                    }
                },
                columns: [
                    { field: 'resource.assetType.name', title: 'Asset Type', template: '<span ng-click="$ctrl.draft(#: id#);">#: resource.assetType.name #</span>' },
                    { field: 'resource.assetSubType.name', title: 'Asset Sub Type' },
                    { field: 'resource.assetClassification.name', title: 'Asset Classification', template: '<span ng-if="#: resource.assetClassification.hiddenFromUser #">n/a</span><span ng-if="!#: resource.assetClassification.hiddenFromUser #">#: resource.assetClassification.name #</span>' },
                    { field: 'id', title: 'Edit', template: '<a class="k-button k-button-icontext k-grid-edit" ng-click="$ctrl.draft(#: id#);"><span class="k-icon k-edit"></span>Edit</a>', width: "100px" }
                ]
            }

            return angular.merge(options, this.baseGridOptions);
        }

        edit(id: number) {
            this.state.go('edit', {id: id});
        }

        draft(id: number) {
            this.state.go('draft', { id: id });
        }
    }

预期结果是,当用户在搜索栏中输入关键字时,kendo网格中的结果应在活动和不活动选项卡中向下过滤。

0 个答案:

没有答案