Question

我尝试通过按钮点击获取网格数据。这是我的网格和按钮：

<ak-grid k-data-source.bind="datasource" view-model.ref="gridVM">
        <ak-col k-title="Public Id" k-field="publicId"></ak-col>
        <ak-col k-title="Payment Type" k-field="paymentType"></ak-col>
        <ak-col k-title="Initiated" k-field="initiated"></ak-col>
        <ak-col k-title="Completed" k-field="completed"></ak-col>
        <ak-col k-title="Result" k-field="result"></ak-col>
        <ak-col k-title="State" k-field="state"></ak-col>
        <ak-col k-title="Total" k-field="total"></ak-col>
        <ak-col k-title="User Reference" k-field="userReference"></ak-col>
    </ak-grid>

    <br />
    <button ak-button="k-icon: ungroup; k-widget.bind: button" k-on-click.delegate="GetTransaction()">Get Transactions</button>

这是viewmodel文件（ts）

export class Test{
    gridVM;
    datasource;

    GetTransaction() {
        this.datasource = new kendo.data.DataSource({
            type: "json",
            transport: {
                read: {
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "api/getTransaction"
                },
                parameterMap(data, operation) {
                    if (data.models) {
                        return JSON.stringify({ products: data.models });
                    } else if (operation === "read") {
                        return JSON.stringify(data);
                    }
                }
            },
            schema: {
                data: "data",
                total: "total",
                aggregates: "aggregates"
            },

            pageSize: 5
        })
        this.gridVM.recreate();
    }
}

我通过按钮点击获取数据，但仅在第二次点击后获得。在我看来，我从之前的请求中获取数据。如果我更改 pazeSize ，我只能在第二次点击后看到另一个记录计数。

我已经检查了我的网络（用于调试），并且在第一次点击后我没有看到请求 getTransaction ，只是在第二次之后。

如何修复它并在第一次按下按钮后获取正确的数据？

提前致谢。

Answer 1

现在，每次单击按钮时都会重新创建数据源。数据源的要点是您创建一次并调用数据源上提供的方法来刷新它。另外，尝试稀疏地使用recreate（）功能，在获取数据时不需要重新创建整个网格，这会破坏数据绑定的目的。

<ak-grid k-data-source.bind="datasource" view-model.ref="gridVM">
        <ak-col k-title="Public Id" k-field="publicId"></ak-col>
        <ak-col k-title="Payment Type" k-field="paymentType"></ak-col>
        <ak-col k-title="Initiated" k-field="initiated"></ak-col>
        <ak-col k-title="Completed" k-field="completed"></ak-col>
        <ak-col k-title="Result" k-field="result"></ak-col>
        <ak-col k-title="State" k-field="state"></ak-col>
        <ak-col k-title="Total" k-field="total"></ak-col>
        <ak-col k-title="User Reference" k-field="userReference"></ak-col>
    </ak-grid>

    <br />
    <button ak-button="k-icon: ungroup; k-widget.bind: button" k-on-click.delegate="datasource.fetch()">Get Transactions</button>

如您所见，如果您只想获取一些数据，只需调用数据源上的fetch（）方法，您甚至不需要创建VM方法

export class Test{
    gridVM;
    datasource;

    constructor() {
        this.datasource = new kendo.data.DataSource({
            type: "json",
            transport: {
                read: {
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "api/getTransaction"
                },
                parameterMap(data, operation) {
                    if (data.models) {
                        return JSON.stringify({ products: data.models });
                    } else if (operation === "read") {
                        return JSON.stringify(data);
                    }
                }
            },
            schema: {
                data: "data",
                total: "total",
                aggregates: "aggregates"
            },

            pageSize: 5
        });
    }
}

并将数据源声明移动到构造函数。

Aurelia-Kendo网格 - 如何通过按钮点击获取数据

1 个答案: