下拉劍道UI電網

我需要一個下拉的劍道的UI格柵，和整個這個例子就是： http://codepen.io/jordanilchev/pen/cnkih?editors=001 下拉劍道UI電網

但在這個例子中，兩個鍵和上下都包含了下降的顯示文本在網格的數據源中也是如此，這看起來非常冗餘。我在Telerik的網站上查看了一個類似的例子，在那裏也是一樣。

這裏是該類型下拉數據源：

var types = [ 
    { 
     "Type": "FB", 
     "Name": "Facebook" 
    }, 
    { 
     "Type": "TW", 
     "Name": "Twitter" 
    }, 
    { 
     "Type": "YT", 
     "Name": "YouTube" 
    }, 
    { 
     "Type": "PI", 
     "Name": "Pinterest" 
    } 
];

到目前爲止好。但這裏是實際網格中的數據 - 注意如何它還包含兩個型號及名稱的每一條記錄：

var products = [{ 
    "ProductID": 1, 
    "ProductName": "Chai", 
    "Type": { 
     "Type": "FB", 
     "Name": "Facebook" 
    } 
}, { 
    "ProductID": 2, 
    "ProductName": "Chang", 
    "Type": { 
     "Type": "FB", 
     "Name": "Facebook" 
    } 
}...

果然不出我所料的是，只有類型必須是網格的數據源 - 這樣的：

var products = [{ 
    "ProductID": 1, 
    "ProductName": "Chai", 
    "Type": "FB", 
}, { 
    "ProductID": 2, 
    "ProductName": "Chang", 
    "Type": "FB", 
}...

有一種使用在劍道UI格下拉，而不必同時包括密鑰和網格的數據源中每個記錄顯示文本的方法嗎？換句話說，網格會知道引用下拉的數據源以獲取單元格的顯示文本。

更新2014年9月23日： 通過CodingWithSpike提出的解決方案正常工作時下拉的數據源是一個硬編碼/本地陣列，但我有得到它的工作在加載數據時的困難從服務器上下載。這個問題似乎是在下拉數據源被讀取之前，網格被初始化。

要「模擬」的$ HTTP調用來填充該數據源中，我使用的setTimeout：

$(document).ready(function() { 
    var categories = []; 

    setTimeout(function() { 
    categories = [{ 
     "value": 1, 
     "text": "Beverages" 
    },{ 
     "value": 2, 
     "text": "Condiments" 
    },{ 
     "value": 3, 
     "text": "Confections" 
    }]; 
    $('#grid').data('kendoGrid').dataSource.read(); // Just as a test, but not even this helps 
    $('#grid').data('kendoGrid').refresh(); // Just as a test, but not even this helps 
    }, 1000);

當數據被加載爲高於（或經由$ HTTP），下拉字段現在包含值（id）而不是文本。這裏是顯示這個plunker： http://plnkr.co/edit/DWaaHGVAS6YuDcqTXPL8?p=preview

注意，真正的應用程序是一個AngularJs應用程序，我寧可不使用一些jQuery的本事等到下拉數據是可用的，然後創建網格元素。

如何從服務器獲取數據？

來源

2014-09-23 Lars335

查看Kendo演示中的「外鍵」列。我認爲這正是你想要的。

http://demos.telerik.com/kendo-ui/grid/foreignkeycolumn

他們使用的類別清單：

  var categories = [{ 
       "value": 1, 
       "text": "Beverages" 
      },{ 
       "value": 2, 
       "text": "Condiments" 
      },{ 
       "value": 3, 
       "text": "Confections" 
      },{ 
       "value": 4, 
       "text": "Dairy Products" 
      },{ 
       "value": 5, 
       "text": "Grains/Cereals" 
      },{ 
       "value": 6, 
       "text": "Meat/Poultry" 
      },{ 
       "value": 7, 
       "text": "Produce" 
      },{ 
       "value": 8, 
       "text": "Seafood" 
      }];

演示是有點自欺欺人，因爲他們對網格數據包含了整個「類別」：

var products = [{ 
    ProductID : 1, 
    ProductName : "Chai", 
    SupplierID : 1, 
    CategoryID : 1, 
    QuantityPerUnit : "10 boxes x 20 bags", 
    UnitPrice : 18.0000, 
    UnitsInStock : 39, 
    UnitsOnOrder : 0, 
    ReorderLevel : 10, 
    Discontinued : false, 
    Category : { 
     CategoryID : 1, 
     CategoryName : "Beverages", 
     Description : "Soft drinks, coffees, teas, beers, and ales" 
    } 
}

然而，如果你看一下列定義：

{ field: "CategoryID", width: "200px", values: categories, title: "Category" },

指定的字段是CategoryID不Category所以格柵數據項其實並不需要在所有指定「類別」屬性，可能僅僅是：

var products = [{ 
    ProductID : 1, 
    ProductName : "Chai", 
    SupplierID : 1, 
    CategoryID : 1, // <-- this is the important part! 
    QuantityPerUnit : "10 boxes x 20 bags", 
    UnitPrice : 18.0000, 
    UnitsInStock : 39, 
    UnitsOnOrder : 0, 
    ReorderLevel : 10, 
    Discontinued : false 
}

我懷疑「類別」爲在那裏只是因爲這個JSON文件被幾個例子共享，所以不同的人可能需要它。

更新

關於電網負荷的「類別」面前的問題（或其他）FK表：

使用延遲或對電網數據源的回調等到FK數據源在填充網格數據之前完成加載。或者，您可以初始化網格，但將其設置爲autoBind: false，以便它不會立即從其DataSource讀取數據。

像這樣的東西（抱歉任何錯誤，輸入這個把我的頭頂部）：

(function() { 
    // for the foreign keys 
    var categoriesDataSource = new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url: "http://somewhere.com/categories" 
      } 
     } 
    }); 

    // for the actual grid data 
    var gridDataSource = new kendo.data.DataSource({ 
     ... 
    }); 

    // init the grid widget 
    var gridWidget = $("#grid").kendoGrid({ 
     dataSource: gridDataSource, 
     autoBind: false, // <-- don't read the DataSource. We will read it ourselves. 
     columns: [ ... ] 
    }); 

    // now we can read the FK table data. 
    // when that completes, read the grid data. 
    categoriesDataSource.fetch(function() { 
     gridDataSource.fetch(); 
    }); 
});

來源

2014-09-23 01:25:54 CodingWithSpike

這是有道理的（並且似乎工作），但我有一個問題：它是如何知道使用的價值和顯示文本的下拉哪個領域？是否按照約定，在下拉數據源中必須有一個名爲「value」的字段和一個名爲「text」的字段？這裏是我測試你的解決方案的蹲點：http://plnkr.co/edit/DWaaHGVAS6YuDcqTXPL8?p=preview – Lars335 2014-09-23 04:02:46

是的，'value'和'text'按慣例使用。我不確定是否有辦法改變這種情況，而無需通過劍道來源進行篩選。 – CodingWithSpike 2014-09-23 12:48:35

我嘗試實施您的解決方案，但在從服務器加載下拉數據時遇到了問題。我編輯了我的問題以包含更多數據。也許你可以再傳授一些你的智慧？ – Lars335 2014-09-23 18:09:41

我問Telerik的這一點，這裏是他們給瞭解決方案。

當下拉的數據是可用的，對電網使用setOptions，像這樣（再次，我用的setTimeout，而不是一個Ajax調用這裏，爲簡單起見）：

setTimeout(function() { 
    categories = [{ 
     "value": 1, 
     "text": "Beverages" 
    },{ 
     "value": 2, 
     "text": "Condiments" 
    },{ 
     "value": 3, 
     "text": "Confections" 
    }]; 
    var grid = $('#grid').data('kendoGrid'); 
    var cols = grid.columns; 
    cols[1].values = categories; 
    grid.setOptions({columns: cols}); 
    $('#grid').data('kendoGrid').refresh(); 
}, 200);

此外，autoBind：假不需要。

這裏是一個更新的plunker： http://plnkr.co/edit/ZjuK9wk3Zq80yA0LIIWg?p=preview

來源

2014-10-01 15:46:40 Lars335

下拉劍道UI電網

回答

相關問題