Lưới dữ liệu Kendo - cách đặt giá trị cột từ đối tượng JSON lồng nhau?

Question

Tôi có JSON với cấu trúc như thế này:

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

Làm thế nào tôi nên để vượt qua giá trị của address.street vào cột sử dụng cài đặt trong các lĩnh vực và mô hình?

Rất cám ơn mọi lời khuyên.

Answer 1

Nếu bạn muốn hiển thị tất cả các giá trị trong một cột duy nhất làm những gì @RobinGiltner gợi ý.

Nếu bạn muốn hiển thị mỗi thành viên trong address trong một cột khác nhau mà bạn có thể làm:

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"); 

tức là .: sử dụng address.street như tên gọi của lĩnh vực này. Điều này sẽ cho phép bạn thậm chí chỉnh sửa trường như trong ví dụ: http://jsfiddle.net/OnaBai/L6LwW/

Answer 2

Bạn có thể sử dụng mẫu trên định nghĩa cột lưới để hiển thị bất kỳ phần nào của địa chỉ bạn muốn.

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

Xem tài liệu về mẫu cột kendo. http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.template

mẫu Xem tại http://jsbin.com/gizab/1/edit

Answer 3

@OnaBai Câu trả lời tốt và trực quan. Kendo đáng buồn không phải lúc nào cũng làm việc tốt với các thuộc tính lồng nhau theo cách này. Ví dụ, việc định dạng không hoạt động. Đây là một ví dụ sử dụng shema nguồn dữ liệu để truy cập các thuộc tính lồng nhau. Bằng cách này bạn có thể sử dụng định dạng nhưng bạn phải chỉ định một mô hình lược đồ.

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

Xem thêm Telerik example này để truy cập các thuộc tính lồng nhau.