Question

我正在使用jquery模板绑定来自knockout obervable array的数据，如此

<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>

现在我想使用 ctrl 键选择最多2行。我怎样才能做到这一点？

我尝试使用课程clickableRow。点击行我可以将颜色更改为红色。

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

但我想用 ctrl 键只选择2行。如果它可以保持 shift 键并选择许多行。就像我们使用Windows来选择多个文件一样。但是，当我使用 shift 键选择多行时，它应该给我该选择中第一行和最后一行的值。

希望清楚。怎么做到这一点？

更新

我想要的功能就像here但没有jqgrid

Answer 1

编辑：一些修复后的最终答案：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');
    }        
});

}）;

P.S：如果要实现最多2行选择，可以通过在将当前选择标记为选中之前检查“选定”项目的当前数量（$（'list li.selected'）。length（））来实现。

使用ctrl键使用knockout和jquery选择行

1 个答案: