web-dev-qa-db-ja.com

jQuery UISelectableでShift-Multiselectを有効にする

JQueryUIの選択可能なテーブルで複数選択機能を有効にしたい shift。

私はおそらくこのようなことをする必要があります 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(...)
javascriptjqueryjquery-uimulti-selectjquery-ui-selectable
23
bardiir

その機能のための簡単なプラグインを書きました。それはjQueryui Selectableプラグインに依存しておらず、私が知る限り、それでうまく機能します。

プラグインコードと簡単な例はここにあります： http://jsfiddle.net/bMgpc/170/

以下に簡単な説明を書きます。

基本的な使用法：

$('ul').multiSelect();

「Ctrl」または「CommandKey」を押したままにすると、要素を1つずつ選択/選択解除できます。

ul-選択する内部要素を保持する親。

利用可能なオプションがいくつかあります。

  • keepSelection-true | false-非常に重要なフラグ。 true（デフォルト）に設定されている場合、すでに選択されている要素をクリックしても選択はクリアされません（複数の支柱で機能するため）
  • multiselect --true | false -falseの場合、選択できる要素は1つだけです
  • selected-'selected'-選択された要素に追加されるクラス
  • フィルタ：-'> *'-どの要素を選択するか
  • unselectOn-false | 'selector'-設定されている場合、setselectorをクリックするとselectioが削除されます
  • start：false | function-開始時のコールバック
  • stop：false | function-停止時のコールバック
  • unselecting：false | function-set "unselectOn"オプションをクリックしたときのコールバック

これは開発バージョンのプラグインなので、注意して使用してください

13
Kane Cohen

あなたはこのようなプラグインなしでそれを行うことができます：

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/

28
mac

周りを見回した後、jQuery UIのSelectable関数を使用しているときにこの問題の解決策を見つけることができなかったので、1つ書きました。基本的に、Selectableの選択済み/未選択のコールバックを利用して、標準のSelectable APIに従ってコールバックを尊重しながら、DOM状態を管理します。次のユースケースをサポートします。

  • リスト内の任意の要素の1つをクリックします（shift + click、cntl + click、またはclick + dragも）
  • Shiftキーを押しながらリスト内の別の要素をクリックします
  • プラス2つのエンドポイント間のすべての要素が選択されます

テーブルの使用法：

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

いくつかのメモ。 （1）現在、兄弟要素のみをサポートしています。 （2）表の例に示されているように、構成オプションと選択可能なメソッドを通過します。 （3）underscore.jsが大好きなので、必須ではありませんが使用されます。この素晴らしいライブラリを使用したくない場合は、簡単なチェックと拡張を自由に交換してください。いいえ、underscore.jsとは提携していません。 :)

テーブルフィドルの例

フィドルの例をリスト

これが他の誰かに役立つことを願っています！乾杯。

5
construct-pylons