带有表排序器的多选复选框

Question

我有一个生成HTML表的Python脚本。 该表的最后一列包含复选框。 我想使用Shift键选择多个复选框。 因此，我已经合并了这个Javascript 。

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

到目前为止，我已经尝试过：

• 移动选择多个复选框 JavaScript来后排序（这似乎是合乎逻辑的我），但随后的排序功能不起作用
• 该问题的其他javascript答案（ 如何移位选择多个复选框（例如GMail？ ），但后来多选不起作用
• 其他Google代码（ 像这样 ）-但是再次进行多重选择不起作用

编码：

<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来自上面的答案 。

我的猜测是，每次重新使用表时，我可能都需要对复选框重新编号，但是我希望有一种更简单的方法吗？

Answer 1

我怀疑您几乎完全从这篇文章中复制了代码：

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

您可能遇到的问题是由var $chkboxes = $('.chkbox'); 在准备好的文档上调用。 这就是在页面加载时按初始顺序声明.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;
    });
});

请注意，我将 attr('checked' 更改为prop('checked'因为checked="false"是无效状态

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-Selected，则脚本还将选择之间的所有隐藏行（有时为数千行）。 因此，我添加了一个小修正：

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
});