Angular UI Grid - 点击已选行的事件

Question

目标

我有一个UI网格。当我点击一行时，应该选择该行并调用一个带有该行作为参数的函数。

当前方法

我使用以下配置代码生成网格：

$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)。

- GuyWithCookies

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()

- Bhavjot

Answer 2

将对 addToQueue 函数的调用移动到 gridApi.grid.element.on('click'...) 函数中，并在 gridApi.selection.on.rowSelectionChanged 函数中存储 row。

$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：{{link1：http://plnkr.co/edit/qtXJ7MUy35QRjYXkEXuG?p=preview}}

（提示：该链接指向一个名为“plunker”的在线代码编辑器）

- Andriy

Answer 3

这个通过的答案对我很有用，但是这里有一个小bug...

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 事件所必需的。

- James Gardiner