Question

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

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

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

在排序之后将选择多个复选框 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>

您可能遇到的问题是由准备好的文档上调用的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;
    });
});

通知我changed attr('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;
});

我遇到的问题是关于过滤，如果我过滤掉一些行，并且移位选择，脚本将选择其间的所有隐藏行（有时数千）。因此，我添加了一个小修复：

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

带有tablesorter的多选复选框

3 个答案: