我想配置 ng-grid
以获得以下多选行为:
选择单行取消之前的选择
使用 Ctrl 或 Shift 选择添加到当前选择(如 例如在 Windows 资源管理器中选择文件)
详细信息:
- 如果我选择一行,则整行都被选中 (enableRowSelection)
- 如果我选择按住 Ctrl 的行,除了当前选择的行之外,新行也会被选中
- 如果我选择按住 Shift 则范围被选中
- 如果我选择一行而不按任何键,我希望该行被选中而其他行未被选中
ng-grid
除最后一步外按预期工作(单击一行时取消选择其他行)
最佳答案
您可以将其添加到网格的 Controller 中:
$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;
};
您的 View 看起来像这样:
<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 帖子。
关于javascript - ngGrid 多选取消当前选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19409585/