jQuery UI選択可能なjquery UIでシフトマルチセレクトを有効にします

StackOverflow https://stackoverflow.com/questions/9374743

質問

JQUERY UI選択可能なテーブルでマルチ選択機能を有効にしたい シフト.

私はおそらくこのようなことをする必要があります シフト MouseClickに抑えられます

  • 選択した最上位の要素を取得します
  • クリックされた要素を取得します
  • その間のすべての要素を選択します

しかし、私はこれをきれいな方法で行う方法を見つけることができません...

現時点では、選択可能な構成内でこれを入手しました。

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(...)
役に立ちましたか？

解決

その機能のための簡単なプラグインを書きました。 JQuery UI選択可能なプラグインに依存しておらず、私が知っている限りではうまく機能します。

プラグインコードと簡単な例をここで見つけることができます： http://jsfiddle.net/bmgpc/170/

以下に簡単な説明を書くつもりです。

基本的な使用法：

$('ul').multiSelect();

「Ctrl」または「コマンドキー」を保持している場合は、要素を1つずつ選択/解除できます。

UL-選択される内部要素を保持する親。

利用可能なオプションの数があります：

  • KeepeNection -true | False-非常に重要なフラグ。 true（デフォルト）に設定した場合、既に選択した要素をクリックしても（複数の小道具で動作するため）、選択はクリアされません。
  • MultiSelect -true | false -if false 1つの要素のみを選択できます
  • Selected-「Selected」 - 選択された要素に追加されるクラス
  • フィルター： - '> *' - 選択する要素は何ですか
  • unselecton -false | 'selector' - 設定されている場合、セットセレクターSELECTIOが削除された場合にクリックします
  • start：false | function -callback on start
  • 停止：false |関数 - 停止時のコールバック
  • 解選択：false | function -callback "unselecton"オプションでクリックしたとき

開発版のプラグインなので、注意して使用してください

他のヒント

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

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の選択可能な機能を使用している間、この問題の解決策を見つけることができなかったので、1つを書きました。基本的に、標準の選択可能なAPIに従ってコールバックを尊重しながら、選択可能な選択 /選択可能な選択可能なコールバックを選択可能にします。次のユースケースをサポートしています。

  • リストのどこでも、要素のいずれかをクリックします（シフト+クリック、CNTL+クリック、またはクリック+ドラッグもクリックします）
  • シフト+リスト内の別の要素をクリックします
  • 2つのエンドポイントの間のすべての要素が選択されます

テーブルの使用：

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

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

テーブルフィドルの例

フィドルの例をリストします

これが他の誰かを助けることを願っています！乾杯。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top