我希望能够在行上右键单击时选择行。
到目前为止,我有以下解决方案(我有here的想法):
我创建一个这样的右键单击指令:
app.directive('rightClick', function($parse) {
return function(scope, element, attrs) {
var fn = $parse(attrs.rightClick);
element.bind('contextmenu', function(event) {
scope.$apply(function() {
event.preventDefault();
fn(scope, {$event:event});
});
});
};
});
然后我可以在我的控制器中添加一个将被调用的函数:
$scope.rightClick = function (event) {
var scope = angular.element(event.toElement).scope();
if (scope.row.entity !== undefined) {
//... select element by calling gridApi
}
};
当然需要添加带有属性right-click="rightClick($event)"
的指令。
此解决方案的问题在于它依赖element.scope()
这是角度的调试功能,如果在生产中禁用调试信息,则无法使用。
所以现在我正在寻找一种没有element.scope()
的替代解决方案。所以问题是:“如何在不依赖角度调试功能的情况下选择右键单击元素”。
答案 0 :(得分:2)
行id存储在cell元素id上,可用于标识单击了哪个单元格:
$scope.rightClick = function (event) {
var element = angular.element(event.toElement);
//get cellId which for the thrid row should something like this
//1464688691229-2-uiGrid-0006-cell
var id = element[0].parentElement.id;
var regex = /(\d+)/g
var result = id.match(regex);
var rowIndex = parseInt(result[1]); //extract second numeric match
$scope.gridApi.selection.selectRowByVisibleIndex(rowIndex);
};
我想你可能需要尝试查看该id是可见索引还是源数据的索引。我不确定,但我在这里提出了一个有效的例子。
答案 1 :(得分:0)
如果您对覆盖调试行为感到满意,可以选择:
angular.reloadWithDebugInfo()
不漂亮,但它会起作用。
来源:https://www.toptal.com/angular-js/top-18-most-common-angularjs-developer-mistakes
答案 2 :(得分:0)
您还可以使用 ng-mouseover 引用某个范围方法(请参阅下面的$ scope.selectRowOnMouseOver)定义行模板,该方法将行(在鼠标光标下)设置为某个范围变量。然后,您可以使用此变量在rightClick方法中设置选择:
定义行模板:
//define row template with ng-mouseover reference to scope method
$scope.resultsGrid.rowTemplate =
"<div ng-dblclick=\"grid.appScope.doubleClickOnRow(row, $event)\" ng-repeat=\"(colRenderIndex, col) in" +
" colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell':" +
" col.isRowHeader }\" ng-mouseover=\"grid.appScope.selectRowOnMouseOver(row)\" ui-grid-cell></div>";
定义方法,它将在范围变量中设置光标下的行(或立即在此行上设置选择):
$scope.selectRowOnMouseOver = function (row) {
$scope.rowUnderMouse = row;
//you can also select row right here or in other methods using above variable
$scope.gridApi.selection.clearSelectedRows();
row.setSelected(true);
};
在rightClick方法中使用范围变量:
$scope.rightClick = function (event) {
var row = $scope.rowUnderMouse;
//clear other selections
$scope.gridApi.selection.clearSelectedRows();
//set row as selected
row.setSelected(true);
//...
}