右键点击UI网格选择

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

到目前为止，我有以下解决方案（我已经从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()。所以问题是：“如何在不依赖于角度调试功能的情况下选择右键点击元素”。

来源

2016-05-31 Sjoerd222888

行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

来源

2016-05-31 10:11:58

有趣的解决方案。不幸的是，我在单元格div上没有id。可能是因为我使用自定义行模板。 – Sjoerd222888

也许你可以在单元DOM元素上添加一个自定义属性？还请注意，该id在父元素上，而不是单元格内容。 –

我必须更改我的行模板，使其具有原始行模板的一些属性（请参阅ui-grid源代码中的'ui-grid/ui-grid-row'模板）。谢谢。 – Sjoerd222888

如果你很高兴与重写调试行为，你可以一起去：

angular.reloadWithDebugInfo()

不漂亮，但它的工作。

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

来源

2016-05-31 09:03:56

我looki以获得无调试信息的解决方案。 – Sjoerd222888

公平的警察。见第二个答案。 –

还可以定义行模板与NG-鼠标悬停参照一些范围的方法（见下文$ scope.selectRowOnMouseOver），其将设置行（下鼠标光标）在一定范围可变。然后你就可以使用这个变量来设置选择你右击方法：

定义行模板：

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

使用范围变量：

$scope.rightClick = function (event) { 
     var row = $scope.rowUnderMouse; 
     //clear other selections 
     $scope.gridApi.selection.clearSelectedRows(); 
     //set row as selected 
     row.setSelected(true); 
     //... 
    }

来源

2017-10-04 09:31:50

右键点击UI网格选择

回答

相关问题