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

Posted 2023-05-07

【中文标题】如何使用嵌套 Json 填充 Kendo UI 网格？

【英文标题】：How can I use nested Json to populate Kendo UI grid?

【发布时间】：2013-06-18 08:14:48

【问题描述】：

如何使用嵌套 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。

提前致谢！

【问题讨论】：

你最好看看here

【参考方案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");

【讨论】：

感谢您的回复。通过使用模式，我如何指定网格的列？我的意思是你能定义网格的列结构吗？

这似乎是一个不同的问题。是吗？有两个不同的问题：一个是模型的定义；另一个是列的定义。像以前一样定义列。

【参考方案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");