Kendo UI - 如何讓SQL填充網格過濾器第二個SQL填充網格點擊？

Question

我有一個具有唯一標識符的Kendo網格，當我單擊一行時，我希望它在第二個網格中顯示細節。這兩個數據集都從鏈接到數據庫的php文件填充。所以第二個網格顯示了該唯一標識符的所有細節。

一格：

$(document).ready(function() { 
       $("#grid").kendoGrid({ 
        dataSource: { 
         pageSize: 100, 
         transport: { 
          read: "http://localhost:8888/stationslist.php", 
          dataType: "json" 
         }, 
         schema: { 
          data: "data", 
          total: function(response) { 
           return $(response.data).length; 
           } 
          } 
          }, 


        selectable: "single", 
        sortable: { 
         mode: "multiple", 
         allowUnsort: true 
        }, 
        change: function (arg) { 
         var selected = $.map(this.select(), function (item) { 
          return $(item).find('td').first().text(); 
          }); 
          } 

二格：

change : function (e) { 
    var item = this.dataItem(this.select()); 
    populateGrid2(item); 
} 

如果我們從一開始作爲item的所有信息：

$(document).ready(function() { 
       $("#grid2").kendoGrid({ 
        dataSource: { 
         pageSize: 100, 
         transport: { 
          read: "http://localhost:8888/spots.php", 
          dataType: "json" 
         }, 
         schema: { 
          data: "data", 
          total: function(response) { 
           return $(response.data).length; 
           } 
          } 
          } 

Answer 1

第一個grid爲實現change處理器選定的行（您不需要複雜的$.map），然後調用第二個函數來填充第二個grid。

每次選擇一個原料但重新填充時，您應該考慮不重新創建grid。如果是這樣，初始化grid2爲：

$("#grid2").kendoGrid({ 
    dataSource : { 
     pageSize : 100, 
     transport: { 
      read  : { 
       url  : "http://localhost:8888/spots.php", 
       dataType: "json" 
      }, 
      parameterMap: function (arg, op) { 
       if (op === "read") { 
        return { id: arg.id } 
       } 
      } 
     }, 
     schema : { 
      data : "data", 
      total: function (response) { 
       return $(response.data).length; 
      } 
     } 
    }, 
    autoBind: false 
}); 

如果我們說沒有自動綁定（不讀數據，直到我們明確地說出來），然後定義parameterMap功能用於管理參數（發送id到服務器）。

現在，功能populateGrid2就是：

function populateGrid2(item) { 
    var ds = $("#grid2").data("kendoGrid").dataSource; 
    ds.filter({ field: "Identifier", operator: "eq", value: item.Identifier }); 
} 

簡單，優雅，高效！

你可以找到here