ngGrid 多选取消当前选择答案

【问题标题】：ngGrid multiselect canceling current selectionngGrid 多选取消当前选择
【发布时间】：2014-02-25 22:09:24
【问题描述】：

我想配置ng-grid 以获得以下多选行为：

选择单行会取消之前的选择
使用 Ctrl 或 Shift 选择会添加到当前选择（如例如在 Windows 资源管理器中选择文件）

详情：

如果我选择一行，则选择整行（enableRowSelection）
如果我选择一个持有 Ctrl 的行，除了当前选择的行之外，新行也会被选中
如果我选择按住 Shift 则选择范围
如果我在不按任何键的情况下选择了一行，我希望该行被选中，而其他行不被选中

ng-grid 按预期工作，除了最后一步（单击行时取消选择其他行）

【问题讨论】：

根据他们页面上的所有演示 (angular-ui.github.io/ng-grid)，单击选定的行会取消选择它。您是否在控制台中看到任何 javascript 错误，因为它应该可以工作
@Ronnie 感谢您的评论：再次选择一行确实会取消选择它，但我需要的是单击未选择的行会取消选择所有其他行（并选择单击的行）
那么，您想在使用 Ctrl+Click 时将 $scope.gridOptions {multiSelect:false} 切换为 $scope.gridOptions {multiSelect:true} 吗？听起来与之前的 SO 问题相同的问题：stackoverflow.com/questions/19090613 @Dar 为此制定了一个肮脏的解决方案。（只是用他自己的话:)
是的 @AardVark71 ，正是我要求的行为。我也做了一个像 Dar 一样的临时修复，但希望有一个更清洁的解决方案。恕我直言，这应该是默认的

标签： javascript jquery angularjs ng-grid

【解决方案1】：

您可以将其添加到网格的控制器中：

$scope.multiSelect = false;
// control/shift/meta keydown enables multiselect
$('.your-grid').keydown(function (e) {
    if ((e.keyCode === 16 || e.keyCode === 17 || e.metaKey || e.keyCode === 224 || e.keyCode === 91 || e.keyCode === 93) && !$scope.multiSelect) {
        $scope.multiSelect = true;
    }
});
// keyup disables it
$('.your-grid').keyup(function (e) {
    if (e.keyCode === 16 || e.keyCode === 17 || e.metaKey || e.keyCode === 224 || e.keyCode === 91 || e.keyCode === 93) {
        $scope.multiSelect = false;
    }
});

$scope.gridOptions.beforeSelectionChange = function () {
    // if the shift/ctrl/meta keys aren't pressed, then each selection
    // will clear all the previous ones
    if (!$scope.multiSelect) {
        for (var i = 0; i < $scope.gridOptions.data.length; ++i) {
            $scope.gridOptions.selectRow(i, false);
        }
    }
    return true;
};

你的视图看起来像这样：

<div class="your-grid" ng-grid="gridOptions">

所有不同 keyCode 值的原因是 Mac 的命令键的 keycode 取决于浏览器。您可以使用 e.metaKey，但这并不适用于所有情况（我不相信 Mac 的 Chrome）。因此，为了安全起见，您可以检查 SO 帖子中描述的所有 keyCode 值：How does one capture a Mac's command key via JavaScript?

此解决方案的灵感来自：AngularJS Change multiple row selection ng-grid attribute on key down 和我目前找不到的另一篇 SO 帖子。

【讨论】：