在 jQuery UI 可选中启用 Shift-Multiselect

Question

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

如果在 mouseclick 上按住 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(...)

Answer 1

您可以在没有插件的情况下做到这一点，如下所示：

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

这是现场演示：http://jsfiddle。网/mac2000/DJFaL/1/嵌入/结果/

Answer 2

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

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

下面写简单的描述。

基本用法：

$('ul').multiSelect();

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

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

有许多可用选项：

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

---

这是一个开发版本插件，因此请小心使用

Answer 3

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

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

选中对于表格：

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

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

表小提琴示例

列表小提琴示例

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