Angular UI 网格 - 添加或删除列并更新数据

Question

我正在尝试 add/remove 网格中的列并更新数据。这是 Plunker

HTML

<div ng-controller="MainCtrl">
    <div id="grid1" ui-grid="settings" class="grid"></div>

    <button ng-click="add();">Add</button>
  </div>

JS

app.controller('MainCtrl', ['$scope', function($scope) {
  $scope.result = [{
    "firstName": "Cox",
    "lastName": "Carney",
    "company": "Enormo",
    "employed": true
  }, {
    "firstName": "Lorraine",
    "lastName": "Wise",
    "company": "Comveyer",
    "employed": false
  }, {
    "firstName": "Nancy",
    "lastName": "Waters",
    "company": "Fuelton",
    "employed": false
  }];

  $scope.column_defs = [{
    name: 'First Name',
    field: 'firstName'
  }, {
    name: 'Last Name',
    field: 'lastName'
  }, {
    name: 'Company',
    field: 'company'
  }];

  $scope.settings = {
    data: $scope.result,
    columnDefs: $scope.column_defs
  };

  $scope.add = function() {
    $scope.column_defs = [{
      name: 'First Name',
      field: 'firstName'
    }, {
      name: 'Last Name',
      field: 'lastName'
    }, {
      name: 'Company',
      field: 'company'
    }, {
      name: 'Employed',
      field: 'employed'
    }];

    $scope.result = [{
      "firstName": "Cox",
      "lastName": "Carney",
      "company": "Enormo",
      "employed": true
    }, {
      "firstName": "Lorraine",
      "lastName": "Wise",
      "company": "Comveyer",
      "employed": false
    }];
  };
}]);

当我们单击 'Add' 按钮时，没有任何反应，而我希望更新 columnDefs 和 data。

提前致谢。

Answer 1

UI 网格绑定到 $scope.settings。您需要刷新 $scope.settings 变量来刷新网格。在 $scope.add 中添加：

$scope.settings = {
    data: $scope.result,
    columnDefs: $scope.column_defs
  };

Answer 2

这是我的 plunkr：http://plnkr.co/edit/avgavSB3hufCXHfe4nyX?p=preview 它表明您可以在 grid.columnDefs 对象上使用 push/pop/splice。

HTML

  <div ng-controller="MainCtrl">
    <div id="grid1" ui-grid="settings" class="grid"></div>
    <button ng-hide="employedVisible" ng-click="add();">Add</button>
    <button ng-show="employedVisible" ng-click="remove();">Remove</button>
  </div>

JS

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', function($scope) {
  $scope.settings = {
    data: [{
      "firstName": "Cox",
      "lastName": "Carney",
      "company": "Enormo",
      "employed": true
    }, {
      "firstName": "Lorraine",
      "lastName": "Wise",
      "company": "Comveyer",
      "employed": false
    }, {
      "firstName": "Nancy",
      "lastName": "Waters",
      "company": "Fuelton",
      "employed": false
    }],
    columnDefs: [{
      displayName: 'First Name',
      name: 'firstName'
    }, {
      displayName: 'Last Name',
      name: 'lastName'
    }, {
      displayName: 'Company',
      name: 'company'
    }]
  };

  $scope.add = function() {
    for(var i = $scope.settings.columnDefs.length; i--;){
      if ($scope.settings.columnDefs[i].name === 'employed') {
        // Only add it once
        return;
      }
    }
    $scope.settings.columnDefs.push({
      displayName: 'Employed',
      name: 'employed'
    });
    $scope.employedVisible = true;
  };

  $scope.remove = function() {
    for(var i = $scope.settings.columnDefs.length; i--;){
      if ($scope.settings.columnDefs[i].name === 'employed') {
        $scope.settings.columnDefs.splice(i, 1);
        $scope.employedVisible = false;
        return;
      }
    }
  };
}]);

Angular UI 网格 - 添加或删除列并更新数据

Angular UI Grid - Add or remove columns and update data

javascript

angularjs

angular-ui-grid