AngularJS Change multiple row selection ng-grid attribute on key down

问题

I have a following grid defined in my View

<div class="gridStyle hide" ng-grid="resultsOptions" id="resultsGrid"></div>

And I want to allow multiSelect only if a ctrl key is pressed. So I define multiSelect attribute as false in the Controller.

$scope.resultsOptions = {
    data: 'searchData',
    selectedItems: $scope.mySelections,
    multiSelect: false,
    enableHighlighting: true,
    enableRowSelection: true
};

In the same controller I have the following code that sets multiSelect to true.

$("#resultsGrid").keydown(function (e) {
    if (e.ctrlKey) {
        $scope.resultsOptions.multiSelect = true;
        $scope.$apply();
    }
});

When I launch the application multiSelect value changes after pressing ctrl. But I am still can not make a multiple selection.

I tried to use variable for multiSelect, but it doe not change a thing.

The following example also does not change multiSelect attribute. But it changes the grid header. http://plnkr.co/edit/RwYSG4?p=preview

Is there any simple solution? Or what do I miss in my code?

回答1:

The approved "hacky" answer wasn't clean enough for us so we built a slightly more robust version relying on the event parameter on beforeSelectionChange instead of doing nasty key bindings. This also works for any grid you add this event callback to as it does not need to reference any specific custom CSS classes or IDs, but just uses reliable ng-grid classes.

beforeSelectionChange: function(rowItem, event){
    if(!event.ctrlKey && !event.shiftKey && $scope.multiSelect && 
        !$(event.srcElement).is(".ngSelectionCheckbox"))
    {
          angular.forEach($scope.myData, function(data, index){
              $scope.gridOptions.selectRow(index, false);
          });
    }
    return true;
}

What this does is simply checking if we are doing a multiselect operation (holding ctrl key, shift key or using the multiselect checkbox), if yes, let multiselect happen. If the user is just clicking anywhere else on a row, and multiselect is active we remove any current selection so just the one target row will be selected afterwards.

回答2:

Since it is impossible to change some grid options on the fly (https://github.com/angular-ui/ng-grid/issues/386). I decided to manually deselect every element if ctrl is not pressed in beforeSelectionChange attribute of the grid.

The solution is durty, but it works.

Based of mabi's comment...

Without support for Shift key
With support for Shift key

来源：https://stackoverflow.com/questions/19090613/angularjs-change-multiple-row-selection-ng-grid-attribute-on-key-down

标签

angularjs

ng-grid