对于要选择的行,单击时,我使用以下命令:
对所有列使用 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]);
};
我还将多重选择定义为 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()