如何防止自定義元素行選擇點擊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'); 
    }); 

    };