Kendo data grid — как установить значение столбца из вложенного объекта JSON?

#json #kendo-ui #nested #kendo-grid

#json #kendo-ui #вложенный #kendo-grid

Вопрос:

У меня есть 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 /

Комментарии:

1. отличный пример. именно то, что мне нужно.

2. Просто обратите внимание, что если адрес иногда равен нулю, это приведет к сбою.

Ответ №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 для доступа к вложенным свойствам.

Ответ №3:

Вы можете использовать шаблон для определения столбца сетки, чтобы отобразить те части адреса, которые вы хотели.

 { 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