具有多值的Kendo UI網格

Question

我想向我的頁面添加一個kendo-ui-grid，它應該包含一個具有多值的列。

想象後續數據：

| Name | Tag     | 
|--------|---------------------| 
| John | C#, JavaScript, PHP | 
| Oliver | UI, SQL    | 
| Mark | SQL, Windows Server | 

的tag列是實際的標籤陣列。

在一天結束時，我希望能夠篩選包含sql標記的所有記錄。

這甚至有可能使用kendo-ui嗎？

Answer 1

試試這個網格設置：

var grid = $("#grid").kendoGrid({ 
    dataSource: { 
    data: [ 
     { name: "John", tags: ["C#", "JavaScript", "PHP"] }, 
     { name: "Oliver", tags: ["UI", "SQL"] }, 
     { name: "Mark", tags: ["SQL", "Windows Server"] }] 
    }, 
    columns: [{ 
     field: "name", 
     title: "Name" 
    }, { 
     template: "# var t=tags.join(', '); data.tagsString=t; # #=t #", 
     title: "Tags", 
     field: "tags" 
    }] 
}).data("kendoGrid"); 

$("#filter").on("keydown", function() { 
    grid.dataSource.filter({ 
     field: "tagsString", 
     operator: "contains", 
     value: $(this).val() 
    }); 
}); 

Demo。

正如你所看到的，我必須使用外部自定義過濾器字段。這是因爲網格的默認內置列過濾器無法過濾數組，無論是數據源的filter()方法。

所以，在模板中，我做了劍道來創建數據源的每個項目的新特​​性，稱爲tagsString，這是我設置的tags.join(", ")結果，同樣顯示在標籤列。使用該屬性集，我可以使用filter()方法進行過濾，將field設置爲tagsString。