Angular UI Grid - 所選行上的Click事件

Question

目標

我有一個UI網格。 當我單擊一行時，它應該被選中，並且應該調用以行作為參數的函數。

目前的方法

我使用以下配置代碼生成Grid：

$scope.gridOptions = {
        enableFiltering: true,
        enableRowHeaderSelection: false,
        enableRowSelection: true,
        multiSelect: false,
        noUnselect: true,
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
            $scope.gridApi.selection.on.rowSelectionChanged($scope, function (row) {
                var name = row.entity.name;
                $scope.addToQueue(name);
            });
        }
    };

問題

當我實際更改選擇時（作為函數的名稱建議），上面的代碼很有效。 但應該可以多次向隊列添加一行。 因此，即使已經選擇了行，我也想調用$scope.addToQueue(name) 。

Answer 1

對於要選擇的行，單擊它時，我使用以下內容：

對所有列使用selectionCellTemplate：

 var selectionCellTemplate = '<div class="ngCellText ui-grid-cell-contents">' +
               ' <div ng-click="grid.appScope.rowClick(row)">{{COL_FIELD}}</div>' +
               '</div>';

 $scope.gridOptions.columnDefs = [        
    { name: 'name', displayName: 'Name', width: '15%', cellTemplate: selectionCellTemplate },       
   ];

然后將rowClick（）方法定義為：

 $scope.rowClick = function (row) {       
    var index = row.grid.renderContainers.body.visibleRowCache.indexOf(row);
    $scope.gridApi.selection.selectRow($scope.gridOptions.data[index]);
};

我還將多選擇定義為真

$scope.gridOptions.multiSelect = true;

因此，行單擊將選擇該行並將其添加到所選行。 您可以訪問這些選定的行（它為每行選擇/取消選擇觸發）：

$scope.gridOptions.onRegisterApi = function (gridApi) {
    //set gridApi on scope
    $scope.gridApi = gridApi;        
    gridApi.selection.on.rowSelectionChanged($scope, doSelection);
};

function doSelection(row) {      
    _.each($scope.gridApi.selection.getSelectedRows(), function (row) {
        //Do something //It is triggered for each row select/unselect         
    });
}

或者可以隨時訪問選定的行：

  $scope.gridApi.selection.getSelectedRows()

Answer 2

將對addToQueue函數的調用移動到gridApi.grid.element.on('click'...)函數，並將行存儲在gridApi.selection.on.rowSelectionChanged函數中：

$scope.gridOptions.onRegisterApi = function (gridApi) {
  //set gridApi on scope
  $scope.gridApi = gridApi;
  gridApi.selection.on.rowSelectionChanged($scope, function (row) {
    $scope.gridApi.grid.appScope.lastSelectedRow = row;
  });

  gridApi.grid.element.on('click', function (ev) {
    if ($scope.gridApi.grid.appScope.lastSelectedRow) {
      // affect only rows (not footer or header)
      if (ev.target.className.includes('ui-grid-cell-contents')) {
        var name = $scope.gridApi.grid.appScope.lastSelectedRow.entity.name;
        $scope.addToQueue(name);
      }
    }
  });
};

$scope.addToQueue = function addToQueue (name) {
  console.log('addToQueue fired, name = ' + name);
};

plunker： http ：//plnkr.co/edit/qtXJ7MUy35QRjYXkE​​XuG？p = preview

Answer 3

批准的答案對我有用，但對於這里的一個小錯誤......

var selectionCellTemplate = '<div class="ngCellText ui-grid-cell-contents">' +
           ' <div ng-click="grid.appScope.rowClick(row)">{{COL_FIELD}}</div>' +
           '</div>';

我需要把它改成......

var selectionCellTemplate = '<div class="ngCellText ui-grid-cell-contents"
           ng-click="grid.appScope.rowClick(row)">' +
           '<div>{{COL_FIELD}}</div>' +
           '</div>';

您會注意到我將ng-click移動到父div。 這是必需的，好像一個單元格是空的，ng-click事件不會觸發。