javascript - 如何使用嵌套 Json 填充 Kendo UI 网格？

Question

如何使用嵌套的 JSON 填充 Kendo UI 网格。

我的意思是我的 JSON 就像

var myJson:
    [{"oneType":[
        {"id":1,"name":"John Doe"},
        {"id":2,"name":"Don Joeh"}
    ]},
    {"othertype":"working"},
    {"otherstuff":"xyz"}]
}];

我想要 Kendo UI Grid，其列为 Id、Name、OtherType 和 OtherStuff。

提前致谢。！

Answer 1

对于复杂的 JSON 结构，您可以使用schema.parse

var grid = $("#grid").kendoGrid({
    dataSource : {
        data    : [
            {
                "oneType": [
                    {"id": 1, "name": "John Doe"},
                    {"id": 2, "name": "Don Joeh"}
                ]
            },
            {"othertype": "working"},
            {"otherstuff": "xyz"}
        ],
        pageSize: 10,
        schema  : {
            parse : function(d) {
                for (var i = 0; i < d.length; i++) {
                    if (d[i].oneType) {
                        return d[i].oneType;
                    }
                }
                return [];
            }
        }
    }
}).data("kendoGrid");

如果您将 JSON 稍微更改为：

{
    "oneType"   : [
        {"id": 1, "name": "John Doe"},
        {"id": 2, "name": "Don Joeh"}
    ],
    "othertype" : "working",
    "otherstuff": "xyz"
}

那么你可以使用：

var grid = $("#grid").kendoGrid({
    dataSource: {
        data    : {
            "oneType"   : [
                {"id": 1, "name": "John Doe"},
                {"id": 2, "name": "Don Joeh"}
            ],
            "othertype" : "working",
            "otherstuff": "xyz"
        },
        pageSize: 10,
        schema  : {
            data: "oneType"
        }
    }
}).data("kendoGrid");

Answer 2

我只是想根据 OnaBai 提交另一个答案。

http://jsfiddle.net/L6LwW/17/

的HTML：

<script id="message-template" type="text/x-kendo-template">
  #for (var i = 0; i
  < ddl.length; i++) {# <li><span>#=ddl[i].value#</li>
    #}#
    </script>

<div id="grid"></div>

JS：

var grid = $("#grid").kendoGrid({
  dataSource: {
    data: [
      [{
        "id": 1,
        "name": "John Doe",
        "ddl": [{
          "key": 1,
          "value": "hello"
        }, {
          "key": 1,
          "value": "hello"
        }]
      }, {
        "id": 2,
        "name": "Don Joeh",
        "ddl": [{
          "key": 1,
          "value": "hello"
        }, {
          "key": 1,
          "value": "hello"
        }]
      }]
     ],
    pageSize: 10,
    schema: {
      parse: function(d) {
        for (var i = 0; i < d.length; i++) {
          if (d[i]) {
            return d[i];
          }
        }
        return [];
      }
    }
  },
  columns: [{
      field: "id",
      title: "ID"
    }, {
      field: "name",
      title: "Name"
    }, {
      field: "ddl",
      title: "DDL",
      width: "180px",
      template: kendo.template($("#message-template").html())
    } //template: "#=ddl.value#" }
  ]
}).data("kendoGrid");