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

如您所见，我必须使用外部自定义过滤器字段。这是因为网格的默认内置列过滤器不能过滤数组，也不能过滤dataSource的filter()方法。

因此，在模板中，我让kendo在每个dataSource项目中创建一个新属性，名为tagsString，我设置tags.join(", ")的结果，与中显示的相同标签列。使用该属性集，我可以使用filter()方法进行过滤，将field设置为tagsString。

具有多值的Kendo UI网格

1 个答案: