0

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

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

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

  • 将选择多个复选框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-click-select.js 来自上面提到的答案。

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

4

3 回答 3

2

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

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

于 2013-11-11T21:35:12.737 回答
0

使用这个我能够实现所需的功能

$(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"

于 2013-10-08T17:10:25.660 回答
0

我在我的应用程序上使用了 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
});
于 2016-02-19T21:30:12.103 回答