Kendo 数据网格 - 如何从嵌套的 JSON 对象设置列值？

Posted 2023-05-07

【中文标题】Kendo 数据网格 - 如何从嵌套的 JSON 对象设置列值？

【英文标题】：Kendo data grid - how to set column value from nested JSON object?

【发布时间】：2014-08-17 10:06:14

【问题描述】：

我的 JSON 结构如下：

"id":1,
"user_role":"ADMIN",
"state":"ACTIVE",
"address":
   "street":"test 59",
   "city":"City test",
   "post_number":"25050"
,

我应该如何使用字段和模型中的设置将 address.street 的值传递到列中？

非常感谢您的建议。

【参考方案1】：

如果您想在单个列中显示所有值，请按照 @RobinGiltner 的建议进行操作。

如果您想在不同的列中显示address 的每个成员，您可以这样做：

var grid = $("#grid").kendoGrid(
    dataSource: data,
    editable: true,
    columns   : [
         field: "id", title: "#" ,
         field: "user_role", title: "Role" ,
         field: "address.street", title: "Street" ,
         field: "address.city", title: "City" ,
         field: "address.post_number", title: "Post#" 
    ]
).data("kendoGrid");

即：使用address.street 作为字段名称。这甚至可以让您像示例中那样编辑该字段：http://jsfiddle.net/OnaBai/L6LwW/

【讨论】：

很好的例子。正是我需要的。

请注意，如果地址有时为空，这将失败。

【参考方案2】：

@OnaBai 很好且直观的答案。遗憾的是，Kendo 并不总是以这种方式很好地处理嵌套属性。例如格式化不起作用。这是一个使用数据源 shema 访问嵌套属性的示例。这样你可以使用格式化，但你必须指定一个模式模型。

  var grid = $("#grid").kendoGrid(
  dataSource: 
    data: data,
    schema: 
      model: 
        id: "id",
        fields: 
          id:  type: "number" ,
          user_role:  type: "string" ,
          address_street:  from: "address.street" ,
          address_city:  from: "address.city" ,
          address_post_number: 
            type: "number",
            from: "address.post_number"
          
        
      
    
  ,
  columns: [
    field: "id",
    title: "#"
  , 
    field: "user_role",
    title: "Role"
  , 
    field: "address_street",
    title: "Street"
  , 
    field: "address_city",
    title: "City"
  , 
    field: "address_post_number",
    title: "Post#",
    format: "0:0#######"
  ]
).data("kendoGrid");

Jsfiddle：http://jsfiddle.net/wtj6mtz2

另请参阅此 Telerik example 以访问嵌套属性。

【参考方案3】：

您可以在网格列定义上使用模板来显示您想要的任何地址。

 field: 'address', title: 'Address', template: '#= address.street#  #= address.city#, #= address.post_number# ' ,

参见剑道栏模板的文档。 http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.template

在http://jsbin.com/gizab/1/edit查看示例