具有多值的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。