Kendo ui 如何在剑道网格上显示JSON多维输出数组。？

对于角色，我将作为[object]获得输出

[
    {
        "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"}]
    }
]

您可以使用创建一个字符串形式的角色列表

    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: " ", 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 () {

        })
    })
})

{
字段：“角色”，
标题：“角色”，
模板：“#for（vari=0；i0）{#，#}#：角色[i]['role'+（i+1）]#}”
},

该模板遍历角色并构建一个逗号分隔的角色列表（例如“TEST1、Test2、Test3”）

图片：

您可以使用创建一个字符串形式的角色列表

    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: " ", 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 () {

        })
    })
})

{
字段：“角色”，
标题：“角色”，
模板：“#for（vari=0；i0）{#，#}#：角色[i]['role'+（i+1）]#}”
},

该模板遍历角色并构建一个逗号分隔的角色列表（例如“TEST1、Test2、Test3”）

图片：

---

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

（使用@ezanker作为我的模板）

1） 纯Javascript版本

而不是使用上面给出的

inline

javascript版本，当您获得复杂的模板时，该版本可能会变得笨重，并成为调试的噩梦

因此，将模板声明更改为：

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

然后使用此javascript函数：

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

  <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构建html。因此，我们首先构建模板：

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

这将读入模板，然后传入角色集合，然后执行它，并将生成的html传递回屏幕

我个人更喜欢第一个选项，但是对于大型复杂的html结构，剑道模板可以使内容更容易阅读，特别是如果你想在一个组中或作为下拉列表使用很多按钮

---

使用你觉得最舒服的一种，然后继续使用

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

（使用@ezanker作为我的模板）

1） 纯Javascript版本

而不是使用上面给出的

inline

javascript版本，当您获得复杂的模板时，该版本可能会变得笨重，并成为调试的噩梦

因此，将模板声明更改为：

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

然后使用此javascript函数：

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

  <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构建html。因此，我们首先构建模板：

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

这将读入模板，然后传入角色集合，然后执行它，并将生成的html传递回屏幕

我个人更喜欢第一个选项，但是对于大型复杂的html结构，剑道模板可以使内容更容易阅读，特别是如果你想在一个组中或作为下拉列表使用很多按钮

---

---

使用你觉得最舒服的一种，然后继续使用

我同意您提供了更多可维护的代码，OP应该与这些选项一起使用+1.我采取了一种快速的方式来展示列模板可以用来解决这个问题。我认为你的解决方案对于非常简单的事情来说是非常好的，但是正如我所说的，对于更复杂的事情，比如使用

引导按钮组

，甚至是我在内联javascript时发现的弹出框，我总是会错过一些散列然后花很长时间想弄明白。我们可以分组角色吗？感谢您可以按角色分组，但您必须在服务器端执行分组，因为客户端可能无法按预期工作。还取决于您计划如何进行分组。我同意您提供了更多可维护的代码，并且OP应该与这些选项一起使用+1.我采取了一种快速的方式来展示列模板可以用来解决这个问题。我认为你的解决方案对于非常简单的事情来说是非常好的，但是正如我所说的，对于更复杂的事情，比如使用

引导按钮组

，甚至是我在内联javascript时发现的弹出框，我总是会错过一些散列然后花很长时间想弄明白。我们可以分组角色吗？感谢您可以按角色分组，但您必须在服务器端执行分组，因为客户端可能无法按预期工作。还取决于您计划如何分组。我们可以分组角色吗？Thanks@user2092317，你看过我链接的演示吗？看这个：我已经看了链接。但是，当我尝试拖放组中的角色时，会将其删除。网格越来越大stuck@user2092317，我误解了。我以为您想要分组列中的角色列表…@user2092317，您可以预处理数据以创建字符串字段而不是对象字段：我们可以分组角色吗？Thanks@user2092317，你看过我链接的演示吗？看这个：我已经看了链接。但是，当我尝试拖放组中的角色时，会将其删除。网格越来越大stuck@user2092317，我误解了。我以为您需要分组列中的角色列表…@user2092317，您可以预处理数据以创建字符串字段而不是对象字段：