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

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> 

这是视图模型文件（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（）方法在你的数据源

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 
     }); 
    } 
} 

并将数据源声明移到您的构造函数中。