右键单击ui-grid选择答案

【问题标题】：ui-grid selection on right click右键单击ui-grid选择
【发布时间】：2016-05-31 08:52:35
【问题描述】：

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

到目前为止，我有以下解决方案（我的想法来自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 的调试功能，如果在生产中禁用调试信息，则将无法使用。

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

【问题讨论】：

标签： javascript angularjs angular-ui-grid

【解决方案1】：

行 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

【讨论】：

有趣的解决方案。不幸的是，我在单元格 div 上没有 id。可能是因为我使用了自定义行模板。
也许您可以在单元格 DOM 元素上添加自定义属性？另请注意，id 位于父元素上，而不是单元格内容上。
我不得不更改我的行模板，使其具有原始行模板的一些属性（请参阅 ui-grid 源代码中的 'ui-grid/ui-grid-row' 模板）。谢谢。
当您在网格中进行分页时，我发现此实现存在一些问题。滚动网格时，不同行的索引将保持不变。因此，滚动后一行的 rowIndex 5 将与另一行的 rowIndex 5 相同。知道如何克服这个问题吗？？
@VinayGayakwad 抱歉，我没有关于该用例的任何其他信息。但是，如果您确实找到了答案，请务必将其发回此处。

【解决方案2】：

如果您对覆盖可以使用的调试行为感到满意：

angular.reloadWithDebugInfo()

不漂亮，但它会工作。

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

【讨论】：

我正在寻找一种无需调试信息即可工作的解决方案。
公平的警察。见第二个答案。

【解决方案3】：

您还可以使用 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);
        //...
    }

【讨论】：