0

私はjqueryテンプレートを使用して、このようなノックアウト監視可能配列からのデータをバインドしています

<script id="instructorTemplate" type="text/x-jquery-tmpl">
   <tr class="clickableRow">
     <td style="padding: 0px;text-align: left" >${Id}</td>
     <td style="padding: 0px;" >${UserName}</td>
   </tr>
</script>

ここで、キーを使用して最大 2 行を選択したいと考えていますctrl。どうすればこれを達成できますか?

class を使ってみclickableRowました。行をクリックすると、色を赤に変更できます。 

$(".clickableRow").live("click", function () {
  $(".clickableRow").css("backgroundColor", "transparent");
  $(this).css("backgroundColor", "red");
});

ctrlしかし、キーを使用して2行だけを選択したい。また、shiftキーを保持して多くの行を選択できる場合。ウィンドウを使用して複数のファイルを選択するのと同じように。しかし、shiftキーを使用して多くの行を選択すると、その選択の最初と最後の行の値が得られるはずです。

その明確なことを願っています。これを達成する方法は？

アップデート

ここと同じように機能が必要ですが、jqgrid は必要ありません

4

1 に答える 1

2

編集:いくつかの修正後の最終回答: http://jsfiddle.net/aeeZb/14/

リストの行でクリック イベントを検出することから始めました。ここで、通常のクリック、ctrl/cmd + マウス クリック、および Shift + マウス クリックを区別する必要があります。

幸いなことに、jQuery には、e.ctrlKey、e.shiftKey、および e.metaKey を使用してこれらを検出する多くの方法が用意されています。

このフィドルをチェックして、それぞれがどのように機能するかを確認してください: http://jsfiddle.net/aeeZb/

$(function(){
$(document).on('click', '#list li', function(e){
    e.preventDefault();

    var $this = $(this);

    // Detecting ctrl (windows) / meta (mac) key.
    if (e.ctrlKey || e.metaKey)
    {
        if ($this.hasClass('selected'))
        {
           $this.removeClass('selected');
        }
        else
        {
           $this.addClass('selected')
        }                        
    }
    // Detecting shift key
    else if (e.shiftKey)
    {
        // Get the first possible element that is selected.
        var currentSelectedIndex = $('#list li.selected').eq(0).index();

        // Get the shift+click element
        var selectedElementIndex = $('#list li').index($this);

        // Mark selected between them

        if (currentSelectedIndex < selectedElementIndex)
        {
            for (var indexOfRows = currentSelectedIndex; indexOfRows <= selectedElementIndex; indexOfRows++)
            {
                 $('#list li').eq(indexOfRows).addClass('selected');  
            }
        }
        else
        {
            for (var indexOfRows = selectedElementIndex; indexOfRows <= currentSelectedIndex; indexOfRows++)
            {
                 $('#list li').eq(indexOfRows).addClass('selected');  
            }
        }                        
    }        
    else
    {
           $('#list li').removeClass('selected');
           $this.addClass('selected');
    }        
});

});

PS: 最大 2 行の選択を実装する場合は、現在の選択を選択済みとしてマークする前に、「選択された」アイテムの現在の量 ( $('list li.selected').length() ) を確認することで実行できます。

于 2013-07-07T15:32:41.413 に答える