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

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

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