0

我正在使用 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>

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

我尝试使用 class clickableRow。单击行时，我可以将颜色更改为红色。 

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

但我只想使用ctrl键选择 2 行。此外，如果可以按住shift键并选择多行。就像我们使用 windows 选择多个文件一样。但是当我将使用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 回答