ng网格多选取消当前选择

ngGrid multiselect canceling current selection

本文关键字：选择 取消 选取 网格 ng      更新时间：2023-09-26

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

    选择

  1. 单行将取消上一个选择

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

详：

  • 如果我选择一行，则选择整行（启用行选择）
  • 如果我选择按住 Ctrl 的行，则除了当前选定的行外，还会选择新行
  • 如果我选择按住 Shift 范围被选中
  • 如果我在没有按任何键的情况下选择一行，我希望选择该行而取消选择其他行

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

您可以将以下内容添加到网格的控制器中：

$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">

所有不同键码值的原因是 Mac 的命令键的键码取决于浏览器。 你可以使用e.metaKey，但这并不适用于所有事情（我相信Mac的Chrome不适用）。 因此，为了安全起见，您可以检查SO帖子中描述的所有键代码值：如何通过JavaScript捕获Mac的命令键？

该解决方案的灵感来自：AngularJS在键向下更改多行选择ng-grid属性以及我目前找不到的另一个SO帖子。

相关文章：