javascript - ngGrid 多选取消当前选择

Question

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

1. 选择单行会取消之前的选择

2. 选择Ctrl或Shift添加到当前选择（例如在 Windows 资源管理器中选择文件）

细节：

• 如果我选择一行，则选择整行（enableRowSelection）
• 如果我选择Ctrl除了当前选定的行之外还选择了包含新行的行
• 如果我选择保持Shift范围被选中
• 如果我在不按任何键的情况下选择一行，我希望该行被选中，而其他行未被选中

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

Answer 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 值： 如何通过 JavaScript 捕获 Mac 的命令键？

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