如何防止自定义元素上的行选择在 UI-GRID 中单击

Question

我在将 UI-GRId 与行 selection 和自定义单元格元素一起使用时遇到问题：

样本 plunker 在这里：http://plnkr.co/edit/Ed6s6CGFGXyUzj2cyx2g?p=preview

$scope.gridOptions = { showGridFooter:true,enableRowSelection: true, enableRowHeaderSelection: false };

$scope.gridOptions.columnDefs = [
{ name: 'id' },
{ name: 'name'},
{ name: 'age', displayName: 'Age (not focusable)', allowCellFocus : false },
{ name: 'address.city' },
{ name:'address.pin',cellTemplate:'<select><option value="122002">122002</option><option value="122001">122001</option></select>'}];

您可以看到，在单击行时，相应的行得到 selected，而如果您倾向于 select 下拉选项，则行 selection 事件也会被触发，我希望在元素上单击像下拉菜单一样，不应触发行 selection 事件。

请指导。

Answer 1

ui-grid 的 API 允许控制行选择。从另一个线程看这个答案：。基本上你可以使用事件 rowSelectionChanged 或 isRowSelectable。如果您需要示例，请告诉我。

Answer 2

有趣的问题，运行还没有进入，但我相信现在是时候了。我创建了一个 plunk 来演示我的解决方案。

基本上，我所做的就是注册一个观察者，正如 AranS 所提到的。从那里，我们有两个对象可以使用：行和发生的事件。由于事件对象公开了哪个元素被 selected（单击），我们可以确定它是 DIV 还是其他元素。如果select列表发生变化，evt.srcElement.tagName的值为'SELECT'。

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

  $scope.gridOptions.onRegisterApi = function( gridApi ) {
    $scope.gridApi = gridApi;

    gridApi.selection.on.rowSelectionChanged($scope,function(row,evt){
      if (evt)
        row.isSelected = (evt.srcElement.tagName === 'DIV');
    });

  };

如何防止自定义元素上的行选择在 UI-GRID 中单击

How to prevent Row selection on custom elements click in UI-GRID

javascript

angularjs

angular-ui-grid

ng-grid

ui-grid