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

时间:2014-06-26 13:54:38

标签: json kendo-ui nested kendo-grid

我的JSON结构如下:

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

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

非常感谢您的任何建议。

3 个答案:

答案 0 :(得分:12)

如果要在单个列中显示所有值,请执行@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/

答案 1 :(得分:4)

@OnaBai好又直观的回答。可悲的是,剑道并不总是以这种方式很好地处理嵌套属性。例如,格式化不起作用。以下是使用数据源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以访问嵌套属性。

答案 2 :(得分:1)

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

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

请参阅kendo列模板的文档。 http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.template

请参阅http://jsbin.com/gizab/1/edit

上的示例