如何在 Prime ng 选择列表中启用 shift 键 - 多选？答案

【问题标题】：How to enable shift key - multi selection in prime ng pick list?如何在 Prime ng 选择列表中启用 shift 键 - 多选？
【发布时间】：2018-02-09 08:41:19
【问题描述】：

我正在使用 prime ng api 中的 prime ng 选择列表：https://www.primefaces.org/primeng/#/picklist

我在这里面临的一个问题是选择列表不支持多选。

多选示例：http://jsfiddle.net/bMgpc/170/

在小提琴中，给出的代码是：

$(document).ready(function() {
    $('ul').multiSelect({
        unselectOn: 'body',
        keepSelection: false,
    });
});

如何使用 shift 键启用多选，在哪里可以执行范围选择？

非常感谢任何帮助...

【问题讨论】：

如果您可以使用 shift 键启用多选，请改进代码。只需在函数 onItemClick 中，检查是否按下了shith 键并将索引保存在两个变量中。如果你有两个索引，选择这个索引之间的所有项目
@Eliseo 并不是说我反对改进代码，只是我目前正在处理的工作对时间非常敏感。所以我要么使用选择列表，要么依赖其他插件来获得我想去哪里。

标签： angular multi-select primeng shift

【解决方案1】：

首先，在 Angular 中使用 JQuery 是一种反模式。所以避免这种情况，不要使用这个小提琴提供的解决方案。

其次，来自文档：

多选

可以使用 metaKey 选择多个项目，也可以根据 metaKeySelection 属性值的值单独切换，默认情况下为 true。在启用触摸的设备上，metaKeySelection 会自动关闭。

显然默认情况下启用了多项选择。

你没有成功，因为元键实际上是 Ctrl，而不是 Shift :)

您也可以使用[metaKeySelection]="false" 让您的用户直接单击项目来选择它们，而不需要元键（如果我理解正确的话）。

【讨论】：

1> 是的.. 我知道不应该使用 jquery 的事实。我提供了jquery的例子让围观的人明白我在说什么。 2> 我也知道这里的元键是指 CTRL-Key 而不是 shift 。这就是为什么我问这个问题是否可以在这里使用 shift 多选。
那么，您的问题应该更加具体！我不认为你可以在本地做到这一点。但是您可能可以围绕onSourceSelect事件编写一些逻辑：获取鼠标事件（以了解是否按下了shift），获取最后一个选定的项目，如果按下了shift，则选择从先前选定的项目到新选定的所有项目物品。如果你能提供一个primeng的沙盒，我可以试着和你一起做！