在jQuery UI Selectable中启用Shift-Multiselect [英] Enable Shift-Multiselect in jQuery UI Selectable

问题描述

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

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

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

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

• 获取最上面的选定元素


• 获取点击元素


• 选择中间的所有元素

但我找不到怎么做这是一个干净的方式......

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

所以 oTarget 是点击的元素（和 e.currentTarget 是整个表格），但现在是什么？我怎样才能找到哪些元素已经被选中，可以告诉我点击的元素是否超过所选元素并选择其中的所有元素？

So oTarget is the clicked element (and e.currentTarget is 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?

我'我现在解决了这个问题，添加到可选元素中：

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

推荐答案

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

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.

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

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

Going在下面写下简单的描述。

Going to write simple description below.

基本用法：

$('ul').multiSelect();

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

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

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

ul - parent that holds inner elements to be selected.

有多种选择：

• keepSelection - true | false - 非常重要的标志。如果设置为true（默认值），那么如果单击已选择的元素（因为它适用于多个道具），则不会清除选择。


• multiselect - true | false -if false您只能选择一个元素


• 已选中 - 已选择 - 将添加到所选元素的类


• 过滤器： - '> *' - 我们将选择哪些元素


• unselectOn - false |'selector' - 如果设置则如果点击set selector selectio将被删除


• start ：false | function - 启动时回调


• 停止：false |函数 - 停止回调


• 取消选择：false | function - 单击set时回调unselectOn选项

• 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

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

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

这篇关于在jQuery UI Selectable中启用Shift-Multiselect的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！