angularjs UI 网格 - 动态分配列和数据

Question

我正在尝试向 ui-grid 动态添加列并分配数据。第一次，网格运行良好。但是，当我尝试动态更改列和数据时，它没有按预期工作。

$scope.myfunc = function() {

alert("Rebinding the data");
$scope.gridOptions = {};

$scope.gridOptions.columnDefs.push({
 name: 'firstName'
  });
  $scope.gridOptions.columnDefs.push({
 name: 'lastName'
  });
  $scope.gridOptions.columnDefs.push({
 name: 'company'
  });
  $scope.gridOptions.columnDefs.push({
 name: 'employed'
  });

  alert("added new columns");
  $scope.gridOptions.data = data1;

  $scope.gridApi.grid.refresh();
};

请检查 plunkr

有人可以调查这个问题并建议我怎么做吗？

Answer 1

我认为您可以删除代码：$scope.gridOptions = {};

最新plunker

第二个data1应该被推到第一个data

我已经用最新代码修改了plunker，请查看！

 $scope.myfunc = function()
  {

    alert("Rebinding the data");
     $scope.gridOptions.columnDefs = new Array();

    $scope.gridOptions.columnDefs.push({
     field: 'firstName'
      });
      $scope.gridOptions.columnDefs.push({
     field: 'lastName'
      });
      $scope.gridOptions.columnDefs.push({
     field: 'company'
      });
      $scope.gridOptions.columnDefs.push({
     field: 'employed'
      });

      alert("added new columns");
      $scope.gridOptions.data = data1;

     /* for(var i=0; i<$scope.gridOptions.data.length; i++){
        $scope.gridOptions.data[i].firstName = data1[i].firstName;
        $scope.gridOptions.data[i].lastName = data1[i].lastName;
        $scope.gridOptions.data[i].company = data1[i].company;
        $scope.gridOptions.data[i].employed = data1[i].employed;
      } */


      $scope.gridApi.grid.refresh();
  };

如果要删除旧列，可以使用

$scope.gridOptions.columnDefs = new Array();

然后使用以下方式刷新数据：

$scope.gridOptions.data = data1;

$scope.gridApi.grid.refresh();

angularjs UI 网格 - 动态分配列和数据

angularjs UI grid - assign columns and data dynamically

angular-ui-grid