DataGrid列cellls从对象集合设置fuelux串

MY fuelux数据网格看上去像这里面的骨干渲染功能DataGrid列cellls从对象集合设置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 
       }); 
      },

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

来源

2013-04-09 Lasang

对于你的列defs每个property应该匹配你的数据源返回的属性名称。试试这个：

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

来源

2013-04-09 09:33:36

感谢您的回答。实际上，它显示[对象对象]。我希望显示第一个模型的infact角色单元格作为角色1，角色2，角色3和角色4，角色5，角色6在单元格内的第二个模型。我甚至尝试了角色[0] .name进行测试，甚至可以显示该剂量。 – Lasang 2013-04-09 09:51:26

我对你的用例不够熟悉以提供细节，但只要属性在到达数据网格时包含一个字符串（包含文本和/或html），就会按照你的预期显示。数据源和格式化函数的作用是将数据转换为数据网格所需的格式。 – 2013-04-09 17:41:42

感谢您在线提示“数据源和格式化程序功能的作用是将数据转换为数据网格所需的格式。”目前，我解决了我的问题。但是，datagird破坏了它的排序，搜索等。我应该把它们放在数据源中吗？ – Lasang 2013-04-10 11:14:08

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

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 { @> 
        <@[email protected]> 
       <@ } @> 
      <@ }); @> 

     </div> 
    </script>

这对我有效。但是，什么样的用户fuelux的要明白的是：

您可以设置属性名以JSON键的名称来设置自己的价值

属性：“身份证”，标签： “ID” //将值id设置为列名ID

如果你有一些JSON值，你喜欢在特定的方式显示出来，邻R您不能在小区一些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     
       }); 
      },

来源

2013-04-10 11:10:56 Lasang

DataGrid列cellls从对象集合设置fuelux串

回答

相关问题