ui-grid如何自定义动态头数和数据?

时间:2017-05-02 04:42:48

标签: javascript angularjs angularjs-directive angular-ui-grid ui-grid

我有一个具有这种结构的ui-grid: http://plnkr.co/edit/qwfPVBfci4qbMEbwdNvM?p=preview 如何自定义此网格以具有不同数量的标头或数据。 实际上,我必须为不同类型的数据集制作动态的功能 例如,对于此dataSet:

{0:["date","numberOfTransaction", "price"],
1:["20170207", "3029223", "5294194476028"],
2:["20170208", "2176469", "1479374036275"],
3:["20170209", "2902111", "6971208095034"],
4:["all", "8107803", "13744776607337"]}

或为此:

{0:["date","numberOfTransaction", "price","total price"],
1:["20170207", "3029223", "5294194476028","3232"],
2:["20170208", "2176469", "1479374036275","223"],
3:["20170209", "2902111", "6971208095034","322"],
4:["all", "8107803", "13744776607337","1321"]}

1 个答案:

答案 0 :(得分:1)

应该是这样的。您应首先创建ui-grid列。然后初始化ui-grid的数据数组。 为此,我创建了一个创建ui-grid行的函数。此函数具有一个数组参数。通过使用此ui-grid的数组和列创建ui-grid行。 装箱后,每行将其推入ui-grid的数据数组中。如下所示。

 var obj = {};
 var row = {};
 angular.forEach($scope.myData[0],function(data,j){
   $scope.gridOptions.columnDefs.push({field:data});
 });
 angular.forEach($scope.myData,function(data,j){
  if(j != 0){
   row = createObject(data);
   $scope.gridOptions.data.push(row);
  }
})  

  function createObject(array){
    var obj = {};
    for(var h=0; h < array.length;h++){
      obj[$scope.gridOptions.columnDefs[h].field] = array[h];
    }
  return obj;
 }

Demo