ui-右键单击网格选择

Question

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

到目前为止，我有以下解决方案（我的想法来自 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() 的替代解决方案。所以问题是："How can I select the element on right-click without relying on angular debug features".

Answer 1

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

angular.reloadWithDebugInfo()

不漂亮，但它会工作。

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

Answer 2

行 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

Answer 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);
        //...
    }

ui-右键单击网格选择

ui-grid selection on right click

javascript

angularjs

angular-ui-grid