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

Multi-select checkboxes with tablesorter

本文关键字：复选框 表格 排序      更新时间：2023-09-26

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

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

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

  • 将"选择多个"复选框 JavaScript 移动到排序之后(这对我来说似乎是合乎逻辑的(，但排序功能不起作用
  • 另一个 JavaScript 回答了这个问题(如何像 GMail 一样移位选择多个复选框？(，但随后多选不起作用
  • 其他谷歌代码(像这样( - 但再次多选不起作用

代码：

<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-单击-选择.js来自上面提到的答案。

我的猜测是，每次重新调整表格时，我可能需要重新编号复选框，但我希望有更简单的方法？

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

<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对象的列表。然后，表排序器更改顺序。

如果我假设是正确的，那么让它正常工作就像更改一样简单：

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

自：

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

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

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

使用它，我能够实现所需的功能

$(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"因为状态无效

我在我的应用程序上使用 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
});
相关文章：