在jQuery UI Selectable中启用Shift多选

Enable Shift-Multiselect in jQuery UI Selectable

本文关键字：启用 Shift 多选 Selectable jQuery UI      更新时间：2023-09-26

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

如果鼠标点击时按住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(...)

您可以在没有以下插件的情况下完成此操作：

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.net/mac2000/DJFaL/1/embedded/result/

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

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

下面将写一个简单的描述。

基本用途：

$('ul').multiSelect();

如果按住"Ctrl"或"Command Key"，则可以逐个选择/取消选择元素。

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

有许多选项可用：

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

这是一个开发版本的插件，所以要小心使用

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

  • 在列表中的任意位置单击其中一个元素（shift+Click、cntl+Click或单击+拖动）
  • 按住Shift键并单击列表中的另一个元素
  • 将选中两个端点之间的所有元素

表格用途：

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

几点注意事项。（1） 它目前只支持同级元素。（2） 它将传递配置选项，如您将在表示例中看到的，以及Selectable方法。（3） 我喜欢undercore.js，所以它被使用了，尽管它不是必不可少的。如果你不想使用这个很棒的库，可以随意交换它的简单检查和扩展。不，我与undercore.js没有任何关系。：）

桌面小提琴示例

列表小提琴示例

希望这能帮助其他人！干杯

相关文章：