ui-grid如何自定义header的动态数字和数据？

Question

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

{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"]}

Answer 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

ui-grid如何自定义header的动态数字和数据？

how ui-grid can customize dynamic number of header and data?

javascript

angularjs

angularjs-directive

angular-ui-grid

ui-grid