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