代码之家 › 专栏 › 技术社区 › Sjoerd222888

右键单击时的ui网格选择

angular-ui-grid angularjs javascript

Sjoerd222888 · 技术社区 · 8 年前

我希望能够在行上单击鼠标右键时选择该行。

到目前为止,我有以下解决方案(我的想法来自 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() 这是angular的调试功能,如果在生产中禁用调试信息,则不可用。

因此,现在我正在寻找一种替代解决方案 元素.scope() 所以问题是:“如何在不依赖角度调试功能的情况下,在右键单击时选择元素”。

3 回复 | 直到 8 年前

Tom Makin 8 年前

行id存储在单元格元素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是可见索引还是源数据的索引。我不确定,但我在这里举了一个有效的例子。

http://plnkr.co/edit/b2RKW0hdtFk1ZOLn1XsS?p=preview

Tom Makin 8 年前

如果您愿意覆盖调试行为,可以使用:

angular.reloadWithDebugInfo()

不太好看,但会有用的。

资料来源: https://www.toptal.com/angular-js/top-18-most-common-angularjs-developer-mistakes

Tomasz Szymanski 7 年前

还可以使用定义行模板 ng鼠标悬停 引用某个范围方法(参见下面的$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);
        //...
    }