выберите строки с помощью клавиши Ctrl с помощью нокаута и JQuery

Question

Я использую шаблон Jquery для связывания данных, поступающих из нокаута obervable массива, как этот

<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 ключа. Как я могу достичь этого?

Я пробовал использовать класс clickableRow. При нажатии строки я могу изменить цвет на красный.

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

Но я хочу, чтобы выбрать только 2 строки с помощью Ctrl ключ. Также, если его можно удерживать клавишу , сдвиньте и выберите много строк. Так же, как мы используем окна для выбора нескольких файлов. Но когда я буду использовать ключ , сдвиньте, чтобы выбрать много строк, тогда он должен дать мне значение первой и последней строки в этом выборе.

Надеюсь, что это ясно. Как достичь этого?

UPDATE

Я хочу функциональность так же, как here но без jqgrid

Answer 1

Edit: Окончательный ответ после некоторых исправлений: http://jsfiddle.net/aeeZb/14/

Вы хорошо начали, обнаруживая событие щелчка на списке строки , Теперь вам нужно различать обычный клик, щелчок Ctrl + cmd + и щелчок мышью +.

К счастью, 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()) «выбранных» элементов перед маркировкой выбранный текущий выбор.