如何防止自定义元素行选择点击UI-GRID

Question

我面对的使用界面，网格行选择和定制电池元件的一个问题：

样品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>'}]; 

你可以看到，在行单击时，相应的行被选中，而如果你倾向于隐式地选择下拉选项，行选择事件也被触发，我希望在元素上点击像下拉列表这样行选择事件不应该被触发。

请指导。

Answer 1

ui-grid的API允许控制行选择。从另一个线程看这个答案：https://stackoverflow.com/a/33788459/5954939。基本上你可以使用事件rowSelectionChanged或isRowSelectable。让我知道你是否需要一个例子。

Answer 2

有趣的问题，还没有碰到它，但我相信这是我做的唯一一次。我创造了一个庞然大物来展示我的解决方案。

基本上，我所做的是注册一个观察者，如AranS所述。从那里，我们有两个工作对象：行和发生的事件。由于事件对象公开哪个元素被选中（点击），我们可以确定它是否是DIV或其他。在选择列表发生更改时，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'); 
    }); 

    };