如何在 kendo 网格上显示 JSON 多维输出数组。？

Question

[
    {
        "id": 1,
        "first_name": "Sharon",
        "last_name": "Allen",
        "hired": "George",
        "email": "gallen0@addtoany.com",
        "location": "Ukraine",
        "groups": "Chynadiyovo",
        "roles": [{"role1":"TEST1" },{"role2":"Test2"},{"role3":"Test3"}]
    },
    {
        "id": 2,
        "first_name": "Carl",
        "last_name": "Kelley",
        "hired": "Michael",
        "email": "mkelley1@hubpages.com",
        "location": "Russia",
        "groups": "Proletarskiy",
        "roles": [{"role1":"TEST1" },{"role2":"Test2"},{"role3":"Test3"}]
    }
]

对于角色，我得到的输出是 [object Object]

    angular.module('xenon.controllers').controller('membersctrl', function ($scope, $state, $rootScope, $cookies, $timeout, memberssrvc) {

        memberssrvc.getMembers().success(function (MembersData) {
        //console.log(MembersData);
        console.log(MembersData[0].roles[0]);
            $(angular.element(document.querySelector('#grid'))).kendoGrid({
                dataSource: {
                    data: MembersData,
                     schema: {
                        model: {
                            fields: {
                                id: { type: "number" },
                                first_name: { type: "string" },
                                last_name: { type: "string" },
                                hired: { type: "string" },
                                email: { type: "string" },
                                location: { type: "string" }
                            }
                        }
                    },
                    pageSize: 10
                },
                height: 500,
                columns: [
                                { field:"first_name", title: "First Name" },
                                { field: "last_name", title:"Last Name" },
                                { field: "hired", title:"Hired"},
                                { field: "email",title:"Email"},
                                { field: "roles",title:"Roles"},
                                {  hidden: true,  field: "location",title:"Location"},
                                { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
                                editable: "popup",
                groupable: true,
                sortable: true,
                batch: true,

                selectable: "multiple",
                filterable: true,
                reorderable: true,
                resizable: true,
                EnableAlternatingRowColor: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5


   }
        }).error(function () {

        })
    })
})

Answer 1

您可以使用 column template 将角色列表创建为字符串。

{ 
    field: "roles",
    title:"Roles",
    template: "#for(var i=0;i<roles.length;i++) { if (i > 0) {#,# }# #: roles[i]['role' + (i + 1)]##}#"
},

模板遍历角色并构建逗号分隔的角色列表（例如 "TEST1, Test2, Test3"）

DEMO

图片：

Answer 2

我知道你已经得到了答案，但我个人更喜欢这两种方式中的任何一种：

http://dojo.telerik.com/EKesu（使用@ezanker 作为我的模板）

1) 纯Javascript版本

而不是使用上面给出的 inline javascript 版本，当你得到复杂的模板时，它会变得笨拙并且调试起来是一场噩梦

因此将模板声明更改为：

template: "#=showRoles(data.roles) #"

然后使用此 javascript 函数：

      function showRoles(roles){
        var retString = ''; 

        if(roles !== null && roles.length > 0)
        {
          retString = '<ul>'; 
          var index = 1; 

          roles.forEach(function(item){
            retString += '<li>' + item["role"+ index] + '</li>';
            index++;
          });

          retString += '</ul>'; 


        }
        else 
        {
          retString = '<span>-</span>';
        }

        return retString; 

      }

所有这一切只是循环浏览集合，然后为您创建一个列表。如果不存在列表，则显示默认字符串。

2) Kendo 模板

专栏的第二个版本使用类似的设置，即：

 template: "#= getByTemplate(data.roles) #"

但我们没有在 javascript 中构建 html，而是在 kendo 中使用模板引擎。所以我们首先构建模板：

  <script id="rolesTemplate" type="text/x-kendo-template">

          <ul>
          #for(i = 0; i< data.length; i++){#

          <li> role: #=data[i]["role" + (i + 1)]#</li>

          #}#
          </ul>

  </script>

然后使用此 javascript 函数：

   function getByTemplate(data){
      var rolestemplate = $("#rolesTemplate").html();
      var template = kendo.template(rolestemplate);
      return template(data); 
   }

这会读入模板，然后传递角色集合，然后执行它并传回生成的 html 以呈现在屏幕上。

我个人更喜欢第一个选项，但对于大型复杂的 html 结构，kendo 模板使内容易于阅读，尤其是当你有很多按钮时，你希望在一个组中或作为一个落下。

使用你觉得最舒服的那个，然后就用那个。

如何在 kendo 网格上显示 JSON 多维输出数组。？

how to show the JSON multidimensional array of output on a kendo grid.?

kendo-ui

kendo-grid