[英]Angular UI Grid - Click event on selected row
Target 目标
I've got a UI Grid. 我有一个UI网格。 When I click on a row it should get selected and a function with the row as a parameter should be called.
当我单击一行时,它应该被选中,并且应该调用以行作为参数的函数。
Current Approach 目前的方法
I use the following config code to generate the Grid: 我使用以下配置代码生成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);
});
}
};
Problem 问题
The above code works well when I actually change the selection (as the name of the function suggest). 当我实际更改选择时(作为函数的名称建议),上面的代码很有效。 But it should be possible to add a row multiple times to the queue.
但应该可以多次向队列添加一行。 So I want to call
$scope.addToQueue(name)
even when the row is already selected. 因此,即使已经选择了行,我也想调用
$scope.addToQueue(name)
。
For row to be selected, when it is clicked, I use following: 对于要选择的行,单击它时,我使用以下内容:
Use selectionCellTemplate for all columns: 对所有列使用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 },
];
And then define rowClick() method as: 然后将rowClick()方法定义为:
$scope.rowClick = function (row) {
var index = row.grid.renderContainers.body.visibleRowCache.indexOf(row);
$scope.gridApi.selection.selectRow($scope.gridOptions.data[index]);
};
I have also defined multiselect to be true 我还将多选择定义为真
$scope.gridOptions.multiSelect = true;
So row click will select the row and add it to the selected rows. 因此,行单击将选择该行并将其添加到所选行。 you can access these selected rows as (It is triggered for each row select/unselect) :
您可以访问这些选定的行(它为每行选择/取消选择触发):
$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
});
}
Or selected rows can be accessed anytime: 或者可以随时访问选定的行:
$scope.gridApi.selection.getSelectedRows()
move the call to addToQueue function to gridApi.grid.element.on('click'...)
function, and store row in gridApi.selection.on.rowSelectionChanged
function: 将对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/qtXJ7MUy35QRjYXkEXuG?p=preview plunker: http ://plnkr.co/edit/qtXJ7MUy35QRjYXkEXuG?p = preview
The approved answer worked will for me but for a small bug here... 批准的答案对我有用,但对于这里的一个小错误......
var selectionCellTemplate = '<div class="ngCellText ui-grid-cell-contents">' +
' <div ng-click="grid.appScope.rowClick(row)">{{COL_FIELD}}</div>' +
'</div>';
I needed to change this to... 我需要把它改成......
var selectionCellTemplate = '<div class="ngCellText ui-grid-cell-contents"
ng-click="grid.appScope.rowClick(row)">' +
'<div>{{COL_FIELD}}</div>' +
'</div>';
You will notice I moved the ng-click to the parent div. 您会注意到我将ng-click移动到父div。 This was required as if a cell was empty, the ng-click event would not fire.
这是必需的,好像一个单元格是空的,ng-click事件不会触发。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.