如何在kendo 网格中显示[object Object] 的实际数据

Question

我正在尝试实现 kendo 具有动态列和显示 [object 对象] 的数据的网格。

如何在我的 kendo 网格中显示地址 [object,Object] 数据，我希望样本输出类似于下面的 table:-

Name       |  Phone         |     Address
------------------------------------------------
John Smith | (519) 420-2391 | Address 1: London
           |                | Address 2: 123

 var peoples = [],
   address = [];


 peoples = [{
   id: 1,
   name: "John Smith",
   phone: "(519) 420-2391",
   address: [{
     address1: "london",
     address2: "123"
   }]

 }];

 $("#grid").kendoGrid({
   dataSource: {
     data: peoples,

   },
   scrollable: true,
   sortable: true,
   resizable: true,
   pageable: true,
   columnMenu: true,

   columns: [{
     field: "name",
     title: "Name"
   }, {
     field: "phone",
     title: "Phone number"
   }, {
     field: "address",
     title: "Address"
   }],

 });

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">

  <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>

<body>
  <div id="example">
    <div id="grid"></div>
  </div>

</body>

</html>

Answer 1

您可以利用 columns.template 功能来获得所需的结果。 (Reference)

根据您的数据结构，您可以使用与此类似的模板：

Address 1: <span>#: address[0].address1 # </span>
<br/>
Address 2: <span>#: address[0].address2 # </span>

我还创建了一个 Dojo 示例。

如何在kendo 网格中显示[object Object] 的实际数据

How to show the actual data of [object Object] in kendo grid

javascript

kendo-ui

kendo-grid

kendo-datasource

kendo-template