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

时间:2016-06-13 12:11:44

标签: angular-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(); }; 并分配数据。第一次,电网工作正常。但是,当我尝试动态更改列和数据时,它无法正常工作。

order by

请查看plunkr

任何人都可以调查此问题并建议我如何做到这一点吗?

1 个答案:

答案 0 :(得分:6)

我认为你可以删除代码:$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();