角度UIのグリッド -

Question

ターゲット

私はUIグリッド持って選択した行の上にイベントをクリックします。行をクリックすると、その行が選択され、その行をパラメータとして持つ関数を呼び出す必要があります。

現在のアプローチ

私はグリッドを生成するには、次の設定コードを使用します。

$scope.gridOptions = { 
     enableFiltering: true, 
     enableRowHeaderSelection: false, 
     enableRowSelection: true, 
     multiSelect: false, 
     noUnselect: true, 
     onRegisterApi: function (gridApi) { 
      $scope.gridApi = gridApi; 
      $scope.gridApi.selection.on.rowSelectionChanged($scope, function (row) { 
       var name = row.entity.name; 
       $scope.addToQueue(name); 
      }); 
     } 
    }; 

問題は

私は実際として（選択を変更する時には、上記のコードがうまく機能関数の名前が示唆します）。しかし、行に複数回行を追加することは可能でなければなりません。そこで、行がすでに選択されている場合でも$scope.addToQueue(name)に電話したいと思います。

Answer 1

を選択することが、私は以下を使用します：

すべての列にselectionCellTemplateを使用してください：

私もそう行クリックで行を選択し、選択に追加します真

$scope.gridOptions.multiSelect = true; 

ように複数選択が定義されている

$scope.rowClick = function (row) {  
    var index = row.grid.renderContainers.body.visibleRowCache.indexOf(row); 
    $scope.gridApi.selection.selectRow($scope.gridOptions.data[index]); 
}; 

：

var selectionCellTemplate = '<div class="ngCellText ui-grid-cell-contents">' + 
       ' <div ng-click="grid.appScope.rowClick(row)">{{COL_FIELD}}</div>' + 
       '</div>'; 

$scope.gridOptions.columnDefs = [   
    { name: 'name', displayName: 'Name', width: '15%', cellTemplate: selectionCellTemplate },  
    ]; 

そしてとしてrowClick（）メソッドを定義します行。承認された答えは私のためではなくのための意志を働い

$scope.gridApi.selection.getSelectedRows() 

Answer 2

移動gridApi.selection.on.rowSelectionChanged関数でaddToQueue機能行関数gridApi.grid.element.on('click'...)に、店舗への呼び出し：

$scope.gridOptions.onRegisterApi = function (gridApi) { 
    //set gridApi on scope 
    $scope.gridApi = gridApi; 
    gridApi.selection.on.rowSelectionChanged($scope, function (row) { 
    $scope.gridApi.grid.appScope.lastSelectedRow = row; 
    }); 

    gridApi.grid.element.on('click', function (ev) { 
    if ($scope.gridApi.grid.appScope.lastSelectedRow) { 
     // affect only rows (not footer or header) 
     if (ev.target.className.includes('ui-grid-cell-contents')) { 
     var name = $scope.gridApi.grid.appScope.lastSelectedRow.entity.name; 
     $scope.addToQueue(name); 
     } 
    } 
    }); 
}; 

$scope.addToQueue = function addToQueue (name) { 
    console.log('addToQueue fired, name = ' + name); 
}; 

plunker：それがクリックされたときに行に対してhttp://plnkr.co/edit/qtXJ7MUy35QRjYXkEXuG?p=preview

Answer 3

：

$scope.gridOptions.onRegisterApi = function (gridApi) { 
    //set gridApi on scope 
    $scope.gridApi = gridApi;   
    gridApi.selection.on.rowSelectionChanged($scope, doSelection); 
}; 

function doSelection(row) {  
    _.each($scope.gridApi.selection.getSelectedRows(), function (row) { 
     //Do something //It is triggered for each row select/unselect   
    }); 
} 

または選択した行は、いつでもアクセスすることができます（これは、非選択/選択行ごとにトリガーされる）として、あなたはこれらの選択された行にアクセスすることができますここでは、小さなバグ...

var selectionCellTemplate = '<div class="ngCellText ui-grid-cell-contents">' + 
      ' <div ng-click="grid.appScope.rowClick(row)">{{COL_FIELD}}</div>' + 
      '</div>'; 

私は

var selectionCellTemplate = '<div class="ngCellText ui-grid-cell-contents" 
      ng-click="grid.appScope.rowClick(row)">' + 
      '<div>{{COL_FIELD}}</div>' + 
      '</div>'; 

...にこれを変更するために必要な

ng-clickを親divに移動したことがわかります。 これは、セルが空で、ng-clickイベントが発生しなかったかのように必要でした。