установка ячеек столбца Fuelux DataGrid в строку из коллекции объектов

Моя сетка данных 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 datagrid был идентификатор столбца, роли и группы. это должно выглядеть так, как показано ниже:

    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
person Lasang    schedule 09.04.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

для определения вашего столбца каждый property должен соответствовать именам свойств, возвращаемым вашим источником данных. Попробуй это:

{
    property: 'id',
    label: 'ID',
    sortable: true
},
{
    property: 'roles',
    label: 'Roles',
    sortable: true
},
{
    property: 'groups',
    label: 'Groups',
    sortable: true
}
person Adam Alexander    schedule 09.04.2013
comment
Спасибо за ответ. На самом деле, это отображает [объект объект]. Я хочу отобразить ролевую ячейку для первой модели как role1, role2, role3 и как role4, role5, role 6 для второй модели внутри ячейки. Я попробовал даже roles[0].name для теста, и даже это не отображается. - person Lasang; 09.04.2013
comment
Я недостаточно знаком с вашим вариантом использования, чтобы предоставить подробности, но пока свойство содержит строку (с текстом и/или html), к тому времени, когда оно достигнет сетки данных, оно будет отображаться так, как вы ожидаете. Работа вашего источника данных и функции форматирования заключается в преобразовании данных в формат, ожидаемый сеткой данных. - person Adam Alexander; 09.04.2013
comment
спасибо за ваши подсказки в сети. Работа вашего источника данных и функции форматирования заключается в преобразовании данных в формат, ожидаемый сеткой данных. В настоящее время я решил свою проблему. Но datagird сломал его сортировку, поиск и т. д. Должен ли я установить их внутри источника данных? - person Lasang; 10.04.2013
comment
Да, при всех разбиениях на страницы и сортировке сетка данных будет снова вызывать функцию data вашего источника данных и передавать выбранные параметры. Затем вы возвращаете данные, которые запрашивает сетка. - person Adam Alexander; 10.04.2013

arrow_upward
1
arrow_downward

Я смог решить свою проблему следующим образом

 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:

  • #P5#
    #P6#
  • #P7# 
    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                 
                });
            },
person Lasang    schedule 10.04.2013