javascript 在 jQuery UI Selectable 中启用 Shift-Multiselect

Enable Shift-Multiselect in jQuery UI Selectable

提问by bardiir

I want to enable multiselect capabilities in a jQuery UI Selectable table by holding shift.

我想通过在 jQuery UI Selectable 表中启用多选功能shift。

I probably should do something like this if shiftis held down on mouseclick

如果shift按住鼠标单击，我可能应该做这样的事情

• Get topmost selected element
• Get clicked element
• Select all elements in between

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

but i can't find how to do this in a clean way...

但我找不到如何以干净的方式做到这一点......

At the moment i got this inside the selectable configuration:

目前我在可选配置中得到了这个：

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

So oTargetis the clicked element (and e.currentTargetis the whole table) but now what? How can i find which elements are already selected in a way that can tell me if the clicked element is over or below the selected ones and select everything in between?

那么oTarget是被点击的元素（e.currentTarget也是整个表格），但现在呢？我怎样才能找到哪些元素已经被选中，它可以告诉我点击的元素是在所选元素之上还是之下，并选择介于两者之间的所有元素？

I've solved it now like this, added to the selectable element:

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

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(...)

采纳答案by Kane Cohen

I wrote simple plugin for that functionality. It's not dependent on jQuery ui Selectable plugin and as far as i know works fine with it.

我为该功能编写了简单的插件。它不依赖于 jQuery ui Selectable 插件，据我所知，它可以很好地工作。

You can find plugin code and simple example here: http://jsfiddle.net/bMgpc/170/

您可以在这里找到插件代码和简单示例：http: //jsfiddle.net/bMgpc/170/

Going to write simple description below.

下面来写简单的描述。

Basic usage:

基本用法：

$('ul').multiSelect();

If you hold "Ctrl" or "Command Key" then you can select/unselect elements one by one.

如果您按住“Ctrl”或“命令键”，则可以一一选择/取消选择元素。

ul - parent that holds inner elements to be selected.

ul - 包含要选择的内部元素的父级。

There are number of options available:

有多种选择：

• keepSelection - true|false - quite an important flag. If set to true (default), then selection won't be cleared if you click on already selected element (as it works in with multiple prop)
• multiselect - true|false -if false you can select only one element
• selected - 'selected' - class that will be added to selected element
• filter: - ' > *' - what elements are we going to select
• unselectOn - false|'selector' - if set then if clicked on set selector selectio would be removed
• start: false|function - callback on start
• stop: false|function - callback on stop
• unselecting: false|function - callback when clicked on set "unselectOn" option

• keepSelection - true|false - 一个非常重要的标志。如果设置为 true（默认），则如果您单击已选择的元素，则不会清除选择（因为它适用于多个道具）
• 多选 - true|false - 如果为 false，则只能选择一个元素
• selected - 'selected' - 将添加到所选元素的类
• 过滤器： - ' > *' - 我们要选择哪些元素
• unselectOn - false|'selector' - 如果设置，则如果单击 set selector selectio 将被删除
• start: false|function - 开始时回调
• 停止：false|function - 停止回调
• 取消选择：false|function - 单击设置“unselectOn”选项时的回调

---

---

It's a dev version plugin, so use with care

这是一个开发版插件，请谨慎使用

回答by mac

You can do it without plugins like this:

你可以在没有插件的情况下做到这一点：

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
        }
    }
});

Here is live demo: http://jsfiddle.net/mac2000/DJFaL/1/embedded/result/

这是现场演示：http: //jsfiddle.net/mac2000/DJFaL/1/embedded/result/

回答by construct-pylons

After looking around I was unable to find a solution to this problem while still using jQuery UI's Selectable function, so I wrote one up. Essentially it taps into the selected / unselected callbacks of Selectable to manage DOM state while still honoring the callbacks as per the standard Selectable API. It supports the following use case:

环顾四周后，我仍然使用jQuery UI 的Selectable 功能无法找到解决此问题的方法，因此我写了一个。本质上，它利用 Selectable 的已选择/未选择回调来管理 DOM 状态，同时仍然按照标准 Selectable API 执行回调。它支持以下用例：

• Click one of the elements (shift+click, cntl+click, or click+drag also) anywhere in the list
• Shift+click another element in the list
• All elements between plus the two end points become selected

• 单击列表中任意位置的元素之一（shift+单击、cntl+单击或单击+拖动）
• Shift+单击列表中的另一个元素
• 加上两个端点之间的所有元素都被选中

Usage for a table:

表的用法：

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

A few notes. (1) It currently only supports sibling elements. (2) It will pass through configuration options as you will see in the table example as well as the Selectable methods. (3) I heart underscore.js so it is used even though for this it is not essential. Feel free to swap out its simple checks and extends if you don't want to use this awesome library. And no, I have no affiliation with underscore.js. :)

一些笔记。(1) 目前只支持兄弟元素。(2) 它将通过配置选项，如您将在表格示例中看到的以及 Selectable 方法。(3) 我喜欢 underscore.js 所以它被使用，即使它不是必需的。如果您不想使用这个很棒的库，请随意更换它的简单检查和扩展。不，我与 underscore.js 没有任何关系。:)

table fiddle example

表小提琴示例

list fiddle example

列出小提琴示例

Hope this helps someone else! Cheers.

希望这对其他人有帮助！干杯。