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

並將數據源聲明移到您的構造函數中。