Angular UI Grid - 单击选定行上的事件 [英] Angular UI Grid - Click event on selected row
问题描述
目标
我有一个 UI 网格.当我点击一行时,它应该被选中,并且应该调用一个将该行作为参数的函数.
目前的方法
我使用以下配置代码来生成网格:
$scope.gridOptions = {启用过滤:真,enableRowHeaderSelection: 假,enableRowSelection: 真,多选:假,没有取消选择:真,onRegisterApi: 函数 (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 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) {//在作用域上设置gridApi$scope.gridApi = gridApi;gridApi.selection.on.rowSelectionChanged($scope, doSelection);};功能doSelection(行){_.each($scope.gridApi.selection.getSelectedRows(), 函数(行){//做某事//每行触发选择/取消选择});}
或者可以随时访问选定的行:
$scope.gridApi.selection.getSelectedRows()
Target
I've got a UI Grid. 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:
$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.
解决方案 For row to be selected, when it is clicked, I use following:
Use selectionCellTemplate for all columns:
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:
$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()
这篇关于Angular UI Grid - 单击选定行上的事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文