Question

我有以下html页面:(页面的一部分）

<ak-multiselect k-data-text-field="text" 
  k-data-value-field="value" k-value.two-way="selectPaymentType" k-data-source.bind="dataPaymentType" 
 </ak-multiselect>
<br/>
<ak-multiselect k-data-text-field="text" 
  k-data-value-field="value" k-value.two-way="selectPaymentResult" k-data-source.bind="dataPaymentResult" 
 </ak-multiselect>
<br/>
<button ak-button="k-icon: ungroup; k-widget.bind: button" k-on-click.delegate="GetTransaction()">Get Transactions</button>
<br/>
<div ref="gridTransaction"></div>

这是我的viewmodel：

export class Transaction {
    selectPaymentType;
    selectPaymentResult;
    gridTransaction;

    dataPaymentType = [
    { text: 'Mobile Payment', value: '0' },
    { text: 'Card Present Payment', value: '1' },
    { text: 'Cash Payment', value: '2' }
  ]

    dataPaymentResult = [
    { text: 'Pending', value: '0' },
    { text: 'Approved', value: '1' },
    { text: 'Declined', value: '2' }
   ]

    buildTransactionFilters() {
        var filtersTotal = [];

        var filtersPaymentType = [];
        var selectPaymentType = this.selectPaymentType;
        if (selectPaymentType != null && selectPaymentType.length > 0) {
            selectPaymentType.forEach(function (item, i, dataItems) {
                filtersPaymentType.push({
                    field: "paymentType",
                    operator: "eq",
                    value: item
                });
            });
        }
        var filterPaymentType = {
            logic: "or",
            filters: filtersPaymentType
        };

        var filtersPaymentResult = [];
        var selectPaymentResult = this.selectPaymentResult;
        if (selectPaymentResult != null && selectResult.length > 0) {
            selectPaymentResult.forEach(function (item, i, dataItems) {
                filtersPaymentResult.push({
                    field: "result",
                    operator: "eq",
                    value: item
                });
            });
        }
        var filterPaymentResult = {
            logic: "or",
            filters: filtersPaymentesult
        };

        if (filtersPaymentType.length > 0)
            filtersTotal.push(filterPaymentType);
        if (filtersPaymentResult.length > 0)
            filtersTotal.push(filterPaymentResult);
        return {
            logic: "and",
            filters: filtersTotal
        };
    }

    GetTransaction() {
        var filters = this.buildTransactionFilters();
        var datasourceTransaction = new kendo.data.DataSource({
            type: "json",
            transport: {
                read: {
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "api/getTransaction",
                    cache: false
                },
                parameterMap(data, operation) {
                    if (data.models) {
                        return JSON.stringify({ products: data.models });
                    } else if (operation === "read") {
                        return JSON.stringify(data);
                    }
                }
            },
            filter: filters,
            schema: { data: "data", total: "total", aggregates: "aggregates"},
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            pageSize: 10
        })

        var $grid = $(this.gridVM).kendoGrid({
            dataSource: datasourceTransaction,
            pageable: { refresh: true, pageSizes: true, buttonCount: 5 },
            scrollable: true,
            sortable: true,
            columns: [{ field: "publicId", title: "Public Id", filterable: false},
                { field: "initiated", title: "Initiated", filterable: false, type: "datetime"},
                {field: "total", title: "Total", filterable: false}
            ]
        }).data("kendoGrid");
    }
 }

我选择了必要的过滤，按下按钮并查看正确的数据。然后我更换过滤器并按下按钮 - 数据再次正确。但是，如果我更改了计数的页码或记录号，我可以在网络所有中看到我之前的请求。结果 - 我在网格中看到来自我之前请求的更快响应（使用不同的过滤器）。先前请求的数量 - 我点击按钮的次数。

如何修复它并仅从上次请求中获取数据？

Answer 1

对网格使用ak-grid并且不要以jquery方式初始化它。请查看文档：{{3}}

在viewmodel中定义dataSource一次，而不是在每次单击按钮后创建一个新的。只需在getTransactions方法（https://aurelia-ui-toolkits.github.io/demo-kendo/#/samples/grid-basic-use）

中更改te dataSource的过滤器即可

Aurelia-Kendo网格 - 多个不必要的数据源请求

1 个答案: