2

1）以下のコードは、ページの読み込み時に読み込まれたときと同じように入力ボックスを並べ替えますが、いずれかを編集して<input>から列を再度並べ替えようとすると、新しい値ではなく元の値で並べ替えられます。あなたはこれを修正するのに役立ちますか？

2) に新しい数値を<input>入力し、列ヘッダーをクリックして並べ替えると、入力のぼかしイベントが発生しません。なぜですか、これを修正する方法を知っていますか?

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>Amounts</th> 

</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith1</td> 
    <td><input type="text" value="1"/></td> 
</tr> 
<tr> 
    <td>Smith2</td> 
    <td><input type="text" value="2"/></td> 
</tr> 
<tr> 
    <td>Smith3</td> 
    <td><input type="text" value="3"/></td> 
</tr> 
<tr> 
    <td>Smith4</td> 
    <td><input type="text" value="4"/></td> 
</tr> 
</tbody> 
</table> 

$(document).ready(function() {

    $.tablesorter.addParser({
        id: 'input',
        is: function(s) {
            return false;
        },
        format: function(s, table, cell) {
              return $('input', cell).val();
        },
        type: 'numeric'
    });

    $("#myTable").tablesorter({

        headers: {
            1: {
                sorter:'input'
            }
        }
    });


   $('input').blur(function(){

        alert($(this).val());

   });

});
4

2 に答える 2

5

モッティの答えは私のために働いた - ありがとう！バインドの重複を防ぐためにクラスを追加するのは好きではなかったので、ロジックを外部に移動しました。

$("#mytable tbody").on("keyup", "input", function(event){
    var table = $(this).closest("table");
    var cellElement = $(this).closest("td")[0];
    table.trigger("updateCell", [cellElement, false]);
});
于 2012-11-15T03:53:09.560 に答える
2

パーサーは、初期化時に入力値のみを取得します。入力値が変更されるたびに、それらを更新する必要があります。そうは言っても、私は常に入力を使用して不運に見舞われてきました。変更を確認するためblurに使用する方が良いと思います。keyup

とにかく、ここに動的入力パーサーのデモがあります。tablesorter の元のバージョンで動作するはずですが、リゾート オプションは利用できません。それ以外の場合は、tablesorter のフォークで動作することがわかっています。

// add parser that dynamically updates input values
$.tablesorter.addParser({
    id: 'inputs',
    is: function(s) {
        return false;
    },
    format: function(s, table, cell) {
        var $c = $(cell);
        // return 1 for true, 2 for false, so true sorts before false
        if (!$c.hasClass('updateInput')) {
            $c
            .addClass('updateInput')
            .bind('keyup', function() {
                $(table).trigger('updateCell', [cell, false]); // false to prevent resort
            });
        }
        return $c.find('input').val();
    },
    type: 'text'
});

$(function() {
    $('table').tablesorter({
        widgets: ['zebra'],
        headers: {
            3: {
                sorter: 'inputs'
            }
        }
    });
});​
于 2012-10-07T12:12:04.320 に答える