目标
我有一个 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/