#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