将fuelux datagrid列单元格设置为来自对象集合的字符串答案

【问题标题】：setting fuelux datagrid column cellls to string from object collection将fuelux datagrid列单元格设置为来自对象集合的字符串
【发布时间】：2013-03-31 14:57:11
【问题描述】：

我的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、角色和组。它应该如下所示：

    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 
                });
            },

如果这里有人可以帮助我，那将是很大的帮助。

【问题讨论】：

标签： javascript jquery datagrid fuelux

【解决方案1】：

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

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

【讨论】：

感谢您的回答。实际上，它显示 [object object]。我想将第一个模型的实际角色单元格显示为角色 1、角色 2 、角色 3，并将单元格内的第二个模型显示为角色 4、角色 5 和角色 6。我什至尝试了角色[0].name 进行测试，甚至显示了那个dosent。
我对您的用例不够熟悉，无法提供详细信息，但只要属性在到达数据网格时包含字符串（带有文本和/或 html），它将显示为你期望。数据源和格式化函数的工作是将数据转换为数据网格所期望的格式。
感谢您在“数据源和格式化程序功能的工作是将数据转换为数据网格所期望的格式”这一行的提示。目前，我解决了我的问题。但是，datagird 破坏了它的排序、搜索等。我应该将它们设置在数据源中吗？
是的，在所有分页和排序时，数据网格将再次调用您的数据源的data 函数并传递选择的选项。然后返回网格要求的数据。

【解决方案2】：

我已经能够解决我的问题如下

 formatter: function (items) {
                $.each(items, function (index, item) {
                    var roleCell = new app.RoleSupplier({ model: item      });
                    roleCell.render();
                    item.roles = roleCell.$el; //set property name above to roles
                });
            },

然后，我创建了 RoleSupplier，如下所示

 app.RolesSupplier = Backbone.View.extend({
    template: _.template($('#roles-cell-template').html()),
    render: function (eventName) {
        this.$el.html(this.template(this.model.toJSON()));
    }
});

我创建了如下模板

 <script type="text/template" id="roles-cell-template">
        <div>
            <@ _.each(roles.toJSON(), function( role, index, list ){ @>
                <@ if(index < (list.length - 1)) { @>
                    <@=role.authority + ','@>
                <@ } else { @>
                    <@=role.authority@>
                <@ } @>
            <@ }); @>

        </div>  
    </script>

这对我有用。但是，fuelux 的用户必须明白的是：

你可以将属性名设置为json中的键名来设置它们的值

属性：'id', label:'ID' //将id值设置为列名ID

如果你有一些 json 值并且你想以特定的方式显示它们，或者你不能在单元格中显示一些 html，你可以将它们格式化如下

formatter: function (items) {
                $.each(items, function (index, item) {
                     item.yourPropertyName1= format your html here that you want  appear in label1
                     item.yourProeprtyName 2= fromat your html like button , anything you want inside column cell of label2                 
                });
            },

【讨论】：