具有二维 JSON 数据结构的 Kendo UI Grid答案

【问题标题】：Kendo UI Grid with 2-dimensional JSON data structure具有二维 JSON 数据结构的 Kendo UI Grid
【发布时间】：2015-05-09 16:24:22
【问题描述】：

Kendo UI Grid 的大多数示例都显示一维数据网格。我得到的数据中有两个维度。一个“名称”和一组子对象。集合中子对象的数量是随机的，应该动态扩展。 IE。有时该对象可能包含 10 个项目（尽管所有行的数量相同）。

我已经创建了一个我需要实现的示例：

+----------+--------+--------+-----+--------+-------+
|   Name   | Sweden | Norway | USA | Russia | China |
+----------+--------+--------+-----+--------+-------+
| Jesper   |     10 |      2 |  33 |      4 |     5 |
| Yngve    |      2 |     33 |   4 |      5 |    99 |
| Snoddas  |     10 |      2 |  33 |      4 |     5 |
| Herkules |     10 |      2 |  33 |      4 |     5 |
+----------+--------+--------+-----+--------+-------+

数据结构看起来像这样，所有只是虚拟数据，因此可能存在拼写错误：

var data = {
    resultContainer: [
        { name: "Jesper", countries: [{ nr: 2, c: "Sweden" }, { nr: 2, c: "Norway" }, { nr: 32, c: "USA" }, { nr: 34, c: "China" }] },
        { name: "Yngve", countries: [{ nr: 55, c: "Sweden" }, { nr: 1, c: "Norway" }, { nr: 23, c: "USA" }, { nr: 43, c: "China" }] },
        { name: "Herkules", countries: [{ nr: 55, c: "Sweden" }, { nr: 4, c: "Norway" }, { nr: 7, c: "USA" }, { nr: 7, c: "China" }] }
    ]
};

仅仅把它扔进剑道用户界面当然是行不通的：

$(".grid-container").kendoGrid({
    DataSource: {
        data: data.resultContainer
    },
    height: 550,
    groupable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    }
});

这样做将使用名称（正确）呈现第一列，并使用对象 [object Object] 呈现第二列。

实现这一目标的最佳方法是什么？我是否必须更改收到的数据结构？

【问题讨论】：

标签： json multidimensional-array kendo-ui kendo-grid

【解决方案1】：

其实没那么难。我只是在 Kendo UI Grid 初始化之前手动创建了一个列数组......像这样：

        var columns = [];

        // Add dealer column
        columns.push({
            field: "name",
            title: "Name",
            width: "100px"
        });

        // Add columns dynamically
        for (var i = 0; i < data.resultContainer[0].countries.length; i++) {
            var entryIndex = "countries[" + i + "]";
            columns.push({
                field: entryIndex,
                title: (1 + i).toString(),
                width: "auto"
            });
        }

【讨论】：