Question

我在页面中有两个 ng-grid ，我想使用两个相应的ngGridEventEndCellEdit事件：

 <div id="grid1" class="gridStyle" ng-grid="gridOptions1"></div>
 <div id="grid2" class="gridStyle" ng-grid="gridOptions2"></div>

function HomeCtrl($scope, $http) {
 $scope.columns = [{ field: 'name', displayName: 'Name', enableCellEdit: false }, { field: 'age', displayName: 'Age', enableCellEdit: false }];        

 $scope.gridOptions1 = {
    data: 'myData', enablePinning: true, enableCellEdit: true, enableRowSelection: false,
    columnDefs: 'columns'
 };

 $scope.columns2 = [{ field: 'name1', displayName: 'Name', enableCellEdit: false }, { field: 'Age1', displayName: 'Age', enableCellEdit: false }];        

 $scope.gridOptions2 = {
    data: 'myData2', enablePinning: true, enableCellEdit: true, enableRowSelection: false,
    columnDefs: 'columns2'
 };
 $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];

$scope.myData2 = [{name1: "Moroni", age1: 50},
                         {name1: "Tiancum", age1: 43},
                         {name1: "Jacob", age1: 27},
                         {name1: "Nephi", age1: 29},
                         {name1: "Enos", age1: 34}];
}

有两个网格，我希望基于网格ID在单元格编辑上有两个不同的ngGridEventEndCellEdit事件。我怎么能这样做？

//for  grid1
$scope.$on('ngGridEventEndCellEdit', function (data) {

};

//for  grid2
$scope.$on('ngGridEventEndCellEdit', function (data) {

};

Answer 1

对于这个特殊事件，我们可以采取的一种方式是：

$scope.gridOptions1 = {
   //options for grid 1
}

$scope.gridOptions2 = {
   //options for grid 2
}

$scope.$on('ngGridEventEndCellEdit', function(event) {
   switch(event.targetScope.gridId) {
      case $scope.gridOptions1.$gridScope.gridId:
         //handle the event for grid 1
         break;
      case $scope.gridOptions2.$gridScope.gridId:
         //handle the event for grid 2
         break;
   }
});

如何在单页中区分ng-grid事件和两个网格

1 个答案: