jQuery UIのShift-Multiselectを選択可能にする

Question

シフトを保持してjQuery UIの選択可能なテーブルで複数選択機能を有効にしたい。

シフトをマウスクリック

• に押されている場合、私はおそらく、一番上の選択された要素
• がクリックされた要素
• をゲットこのような何かを行う必要があります

の間のすべての要素を選択しますしかし、私はクリーンな方法でこれを行う方法を見つけることができません...

私が選択可能な構成の内部でこれを得た瞬間

：

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

。それは、jQueryとSelectableプラグインに依存していません。以下の簡単な説明を書くつもりhttp://jsfiddle.net/bMgpc/170/

：

あなたはプラグインのコードと、ここで簡単な例を見つけることができます。

基本的な使用法：

$('ul').multiSelect(); 

あなたは「Ctrlキー」または「コマンドキー」を開催した場合、あなたは非選択要素に/一つ一つを選択することができます。

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

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

• keepSelection - 真|偽 - 非常に重要フラグ。true（デフォルト）に設定すると、すでに選択されている要素をクリックすると選択がクリアされません（複数の小道具で機能するように）
• multiselect - true | false -if falseは1つの要素のみを選択できます
上のクリックしたならば、設定している場合 - 「セレクタ」|「> *」 - - - どのような要素我々は
• unselectOn選択しようとしている偽の：
• 選択 - - 「選択された」選択された要素
• フィルタに追加されるクラスセットセレクタが削除されます
• start：false | function - 開始時のコールバック
• stop：false | function-callbaストップのCK
• 選択解除：偽|機能 - コールバック「unselectOn」オプション

---

それはdevのバージョンのプラグインですので、私はできませんでした周りを探した後のケア

Answer 2

で使用セットをクリックjQuery UIのSelectable関数を使用しているときにこの問題の解決策を見つけるために、私はこれを書きました。基本的には、Selectableの選択/非選択のコールバックをタップし、標準のSelectable APIに従ってコールバックを引き続き維持しながらDOM状態を管理します。それは以下のユースケースをサポートします。

• クリックして要素の1（シフト+クリックし、CNTLを+クリック、またはも+ドラッグをクリックしてください）、リスト内のどこにでも
• Shiftキーを+リスト内の別の要素をクリックし

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

F：

• 間のすべての要素と2つのエンドポイントがテーブルの

使用を選択なりますewノート。 （1）現在、兄弟要素のみをサポートしています。 （2）表の例とSelectableメソッドに表示されるように、設定オプションを渡します。 （3）私は心配している.jsので、これは必須ではないが使用されている。この素晴らしいライブラリを使用したくない場合は、簡単なチェックを交換してください。そして、いいえ、私はアンダースコアとの所属はありません.js。 :)

table fiddle example

list fiddle example

希望、これは他の誰かに役立ちます！乾杯。

Answer 3

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

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/