javascript - Angular UI Grid - 单击选定行上的事件

目标

我有一个 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) 。

最佳答案

对于要选择的行，单击时，我使用以下内容:

对所有列使用 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]);
};

我还定义了 multiselect 为 true

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

关于javascript - Angular UI Grid - 单击选定行上的事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40801982/