用tablesorter多选复选框

Question

我有一个生成HTML表的Python脚本。表格的最后一列包含复选框。我想用Shift键选择多个复选框。所以，我已经纳入this Javascript。

但是，我在排序加载后使用tablesorter（以及调用上面的Javascript后）的表列。此外，用户还可以通过单击列标题对列进行排序。这会导致在用户使用Shift-单击后选中错误的复选框。

到目前为止，我曾尝试：

• 移动选择多个复选框 JavaScript来后排序（这似乎是合乎逻辑的我），但随后的排序功能不起作用
• 的其他JavaScript回答该问题（How can I shift-select multiple checkboxes like GMail?）但多选不起作用
• 其他Google搜索代码（like this） - 但再次多选不起作用

代码：

<script src='shift-click-select.js'></script> 
<script src='jquery-latest.js'></script> 
<script src='jquery.tablesorter.min.js'></script> 
<script> 
//Javascript function to sort table "my_table" by default on first column (0,0) and then on second column (1) in ascending order (0). 
$(function() { 
    $("#my_table").tablesorter({sortList:[[0,0],[1,0]]}); 
}); 
</script> 
<table id="my_table" class="tablesorter" border="0" cellpadding="0" cellspacing="1"> 
    <td><input type="checkbox" name="%s" class="chkbox" /></td> 
    ... 
</table> 

注：shift-click-select.js is from answer mention above。

我的猜测是，我可能需要重新编号复选框，每次表格被推出，但我希望有一个更简单的方法？

Answer 1

我怀疑你从这个post复制的代码几乎一模一样：

<script type="text/javascript"> 
    var lastChecked = null; 

    $(document).ready(function() { 
     var $chkboxes = $('.chkbox'); 
     $chkboxes.click(function(e) { 
      if(!lastChecked) { 
       lastChecked = this; 
       return; 
      } 

      if(e.shiftKey) { 
       var start = $chkboxes.index(this); 
       var end = $chkboxes.index(lastChecked); 

       $chkboxes.slice(Math.min(start,end), Math.max(start,end)+ 1).attr('checked', lastChecked.checked); 

      } 

      lastChecked = this; 
     }); 
    }); 
</script> 

问题你可能是exper在文档准备就绪时调用​​会导致异化。当页面加载时，这是按照它们的初始顺序声明一个.chkbox对象的列表。 tablesorter然后改变顺序。

如果有什么我假设是正确的，那么得到它的正常工作会这么简单改变：

var $chkboxes = $('.chkbox'); 
$chkboxes.click(function(e) ... 

到：

$('.chkbox').click(function(e) { 
    var $chkboxes = $('.chkbox'); 

这样的复选框顺序确定上在页面加载时每次点击而不是一次。

如果我们看到您的shift-click-select.js的内容，这将有所帮助。

Answer 2

利用这一点，我是能够实现所需功能

$(function() { 
    var $table = $('#myTable'); 
    var $chkboxes,lastChecked = null; 
    $table 
    .tablesorter({sortList:[[0,0],[1,0]]}) 
    .on('sortEnd',function() { 
     $chkboxes = $table.find(':checkbox'); 
    }) 
    .on('click',":checkbox",function(e){ 
     if(!lastChecked) { 
      lastChecked = this; 
      return; 
     } 
     if(e.shiftKey) { 
      var start = $chkboxes.index(this); 
      var end = $chkboxes.index(lastChecked); 
      var last = lastChecked.checked; //cache as we might change its value 
      $chkboxes.slice(Math.min(start,end), Math.max(start,end)+ 1).prop('checked', last); 
     } 
     lastChecked = this; 
    }); 
}); 

通知我changedattr('checked'到prop('checked'作为checked="false"是invalid state

Answer 3

我在我的应用程序中使用了senordev的解决方案，但在我的测试中发现了一个很大的缺陷，我在下面解决了这个问题。

senordev的隐含的解决方案：

$('.chkbox').click(function(e) { 
    var $chkboxes = $('.chkbox') 

    if(!lastChecked) 
    { 
     lastChecked = this; 
     return; 
    } 

    if(e.shiftKey) 
    { 
     var start = $chkboxes.index(this); 
     var end = $chkboxes.index(lastChecked); 

     $chkboxes.slice(Math.min(start,end), Math.max(start,end)+1).prop('checked', lastChecked.checked); 
    } 

    lastChecked = this; 
}); 

我跑进了关于过滤，如果我过滤掉一些行，按住Shift键选择的问题，脚本会选择之间，以及在所有的隐藏的行（有时千）。因此，我增加了一个小的修复：

var $chkboxes = $('.chkbox') 

到

var $chkboxes = $('.chkbox').filter(':visible'); 

其他角落情况下，我占了包括重置lastChecked值时的那种变化（因为lastChecked现在可能是一个完全不同的页面上）并且当过滤器改变时（因为lastChecked可能不再可见）。

$("table").tablesorter({ 
    ... 
}) 
// Clear the lastChecked to avoid unexpected selections. 
// e.g. lastChecked might not be on the visible page anymore. 
.bind("sortStart",function() { 
    lastChecked = null 
}).bind("sortEnd",function() { 
    lastChecked = null 
}).bind('filterEnd', function() { 
    lastChecked = null 
});