Javascript 在jQuery UI中启用Shift Multiselect可选

我想通过按住shift键在jQuery UI可选表中启用多选功能

如果按住shift键，我可能应该这样做

• 获取最顶端的选定元素
• 点击元素
• 选择中间的所有元素

但是我找不到一个干净的方法来做这件事

此时，我在可选配置中得到了以下信息：

start: function(e)
        {
            var oTarget = jQuery(e.target);
            if(!oTarget.is('tr')) oTarget = oTarget.parents('tr');
        }

因此，

oTarget

是单击的元素（而

e.currentTarget

是整个表），但是现在呢？我怎样才能找到哪些元素已经被选中，从而可以告诉我单击的元素是在所选元素之上还是之下，并选择介于两者之间的所有元素

我现在已经这样解决了，添加到可选元素中：

jQuery(table).mousedown(function(e)
    {
        //Enable multiselect with shift key
        if(e.shiftKey)
        {
            var oTarget = jQuery(e.target);
            if(!oTarget.is('.ui-selectee')) oTarget = oTarget.parents('.ui-selectee');

            var iNew = jQuery(e.currentTarget).find('.ui-selectee').index(oTarget);
            var iCurrent = jQuery(e.currentTarget).find('.ui-selectee').index(jQuery(e.currentTarget).find('.ui-selected'));

            if (iCurrent < iNew) {
                iHold = iNew;
                iNew = iCurrent;
                iCurrent = iHold;
            }

            if(iNew != '-1')
            {
                jQuery(e.currentTarget).find('.ui-selected').removeClass('ui-selected');
                for (i=iNew;i<=iCurrent;i++) {
                    jQuery(e.currentTarget).find('.ui-selectee').eq(i).addClass('ui-selected');
                }
                e.stopImmediatePropagation();
                e.stopPropagation();
                e.preventDefault();
                return false;
            }
        }
    }).selectable(...)

jQuery（表）.mousedown（函数（e）
{
//使用shift键启用multiselect
如果（如换档键）
{
var-oTarget=jQuery（e.target）；
如果（！oTarget.is（'.ui selectee'））oTarget=oTarget.parents（'.ui selectee'）；
var iNew=jQuery（e.currentTarget）.find（'.ui selectee'）.index（oTarget）；
var iccurrent=jQuery（e.currentTarget）.find（'.ui selectee'）.index（jQuery（e.currentTarget）.find（'.ui selected'））；
if（iCurrent对于（i=iNew；i我为该功能编写了简单的插件。它不依赖于jQueryUI可选插件，据我所知，可以很好地使用它

您可以在此处找到插件代码和简单示例：

下面写一个简单的描述

基本用法：

$('ul').multiSelect();

如果按住“Ctrl”或“Command键”，则可以逐个选择/取消选择图元

ul-保存要选择的内部元素的父级

有许多可用选项：


keepSelection-true | false-一个非常重要的标志。如果设置为true（默认），则如果您单击已选择的元素，则选择将不会被清除（因为它与多属性一起工作）
multiselect-true | false-如果为false，则只能选择一个元素
selected—“selected”-将添加到选定元素的类
过滤器：-'>*'-我们要选择哪些元素
取消选择-错误|“选择器”-如果设置，则如果单击设置选择器，则将删除选择
开始：false |函数-开始时回调
停止：false |函数-停止时回调
取消选择：false |函数-单击设置“取消选择”选项时回调


这是一个dev版本的插件，所以请小心使用
环顾四周后，我无法找到这个问题的解决方案，但仍然使用jQuery UI的可选功能，所以我写了一个。本质上，它利用Selectable的选中/未选中回调来管理DOM状态，同时仍然按照标准Selecta接受回调ble API。它支持以下用例：


在列表中的任意位置单击其中一个元素（按住shift键并单击、按住cntl键并单击或同时单击并拖动）
按住Shift键并单击列表中的另一个元素
加上两个端点之间的所有图元都将被选中

表的用法：

$('table').shiftSelectable({filter: 'tr'});

几点注意。（1）它目前只支持同级元素。（2）它将传递配置选项，正如您将在表示例中看到的，以及可选的方法。（3）我喜欢下划线.js，所以即使它不是必需的，也可以使用它。如果您不想使用这个很棒的库，请随意替换它的简单检查和扩展。不，我与下划线.js没有任何关联。：）



希望这对其他人有帮助！干杯。
您可以不用这样的插件：

var prev = -1; // here we will store index of previous selection
$('tbody').selectable({
    selecting: function(e, ui) { // on select
        var curr = $(ui.selecting.tagName, e.target).index(ui.selecting); // get selecting item index
        if(e.shiftKey && prev > -1) { // if shift key was pressed and there is previous - select them all
            $(ui.selecting.tagName, e.target).slice(Math.min(prev, curr), 1 + Math.max(prev, curr)).addClass('ui-selected');
            prev = -1; // and reset prev
        } else {
            prev = curr; // othervise just save prev
        }
    }
});

这是一个现场演示：
谢谢，我没有直接使用它，但我可以从源代码中获得解决它所需的想法。：）@bardiir，这是最好的方法。当我写这段代码时，我想到了非常具体的事情，所以为你自己的目的重写它是最好的方法。这对我来说非常有效。唯一缺少的是“拖动选择范围”框，它确实显示在
jqueryui#selective
上。但我相信有一个简单的解决方法。谢谢！This是一个非常干净和基本的实现，我喜欢它。将其扩展为多个选择（使用shift单击部分多次）也可以通过一些额外的检查轻松完成。谢谢！如果您“拖动”，这会显示一些奇怪的行为表中的第一个选择。拖动会导致事件发生在
td
而不是
tr
上，因此索引会更改为更高的值。可选择的事件同时触发
td
和
tr
，因此您可以返回
ui.selected.tagName=='td'
嗨！我偶然发现了这一点，我发现了t通过将prev设置为0而不重置它（删除prev=-1；行）将使它更像“文件系统”也就是说，它将允许重复多选，如果您将“选择”移向元素，它将取消选择元素，并且将在未选择任何元素时从一开始进行选择。我看不出这有任何缺点，因此可能会有人对此感兴趣伟大的解决方案，并集成@valepu建议的内容，使其变得更好！