0

HTML テーブルを生成する Python スクリプトがあります。表の最後の列にはチェックボックスが含まれています。Shift キーを使用して複数のチェックボックスを選択したい。そこで、この Javascriptを組み込みました。

ただし、tablesorterを使用してロードした後 (および上記の Javascript を呼び出した後) 、テーブルの列を並べ替えています。さらに、ユーザーは列ヘッダーをクリックして列をソートすることもできます。これにより、ユーザーが Shift キーを押しながらクリックした後、間違ったチェックボックスが選択されます。

これまでのところ、私は試しました：

コード：

<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 に答える