javascript - 将 Fuelux Datagrid 列单元格设置为对象集合中的字符串

Question

我的fuelux数据网格在主干渲染函数中看起来像这样

    var dataSource = new StaticDataSource({
            columns: [
                                     {
                                           property: 'id',
                                           label: 'id',
                                          sortable: true
                                     },
                {
                    property: 'name',
                    label: 'groups',
                    sortable: true
                },
                {
                    property: 'name',
                    label: 'Roles',
                    sortable: true
                }
            ],
            data: this.collection,
            delay: 250
        });
        $('#sectionName').html('Groups');
        $('#MyGrid').datagrid({
            dataSource: dataSource,
            stretchHeight: true
        });

this.collection返回json如下

[
{
    "id":1,
    "roles":[
                {"id":1,"authority":"ROLE1"},
                {"id":2,"authority":"ROLE2"},
                {"id":3,"authority":"ROLE3"}
            ],
    "groups":[
                {"id":1,"name":"A"},
                {"id":2,"name":"B"},
                {"id":3,"name":"C"}
          ]
},
{
    "id":2,
    "roles":[
                {"id":5,"authority":"ROLE4"},
                {"id":5,"authority":"ROLE5"},
                {"id":6,"authority":"ROLE6"}
            ],
    "groups":[
                {"id":4,"name":"D"},
                {"id":5,"name":"E"},
                {"id":6,"name":"F"}
          ]
}

]

我希望 Fuelux 数据网格具有列 ID、 Angular 色和组。它应该如下所示:

    id        roles                        groups
    1         role1, role2 , role3          A, B, C
    12        role3, role4 , role5          D, E, F

我尝试编写类似这样的格式化函数，但它不起作用

 var dataSource = new StaticDataSource({
        columns: [
            {
                property: 'id',
                label: 'id',
                sortable: true
            },
            {
                property: 'name',
                label: 'groups',
                sortable: true
            },
            {
                property: 'name',
                label: 'Roles',
                sortable: true
            }
        ], 

       formatter: function (items) {
                $.each(items, function (index, item) {
                                    item.roles= //string made from groups with comma
                    item.groups= //string made from roles with comma

            },
        data: this.collection,
        delay: 250
    });

    $('#MyGrid').datagrid({
       //as above
    });
  formatter: function (items) {
                $.each(items, function (index, item) {
                   item.roles= //string of roles made from roles with comma
                                   item.groups= /string of groups made from groups with comma 
                });
            },

如果这里有人能帮助我，那就太好了。

Answer 1

对于您的列定义，每个属性应与数据源返回的属性名称匹配。试试这个:

{
    property: 'id',
    label: 'ID',
    sortable: true
},
{
    property: 'roles',
    label: 'Roles',
    sortable: true
},
{
    property: 'groups',
    label: 'Groups',
    sortable: true
}