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串

回答

相關問題