23

を押したままにして、jQueryUISelectableテーブルで複数選択機能を有効にしたい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(...)
4

3 に答える 3

29

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

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/

于 2013-01-22T22:39:39.360 に答える
13

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

プラグインコードと簡単な例はここにあります：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-「unselectOn」オプションの設定をクリックするとコールバック

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

于 2012-02-21T09:30:30.457 に答える
5

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

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

テーブルの使用法：

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

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

テーブルフィドルの例

リストフィドルの例

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

于 2012-09-19T01:23:41.697 に答える