2

テーブルソーターを使用すると、Firefoxで次の問題が発生します。

テキストボックスにテキストを追加した直後に並べ替えを実行しようとすると、テキストボックスのぼかしイベントが常に発生するとは限りません。

以下のコードをご覧ください。助けてくれてありがとう

// Jscript.js
$(document).ready(function () {

$.tablesorter.addParser({
    id: 'coltwo',
    is: function (s) {
        return false;
    },
    format: function (s, table, cell) {
        var temp = $('input', cell).val();
        return temp.replace(",", "");
    },
    type: 'text'
});
$("#myTable").tablesorter({
    headers: {
        2: {
            sorter: 'coltwo'
        }
    }
});

//http://mottie.github.com/tablesorter/docs/#Events


//update table and focus on table to try fire blur event
$("#myTable").bind("sortBegin", function () {

    $(this).focus();

    $('#myTable').trigger("update");



});


$(".txtInput").blur(function () {

    var txt = $(this).val().replace("-",""); //remove this

    $(this).val(txt + "z"); // add text to test if blur is working

});

}); 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.tablesorter.js" type="text/javascript"></script>

    <script src="js/JScript.js" type="text/javascript"></script>


</head>
<body>
    <form id="form1" runat="server">
    <div>

    <table id="myTable" class="tablesorter" border="1"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td><input type="text" value="aaaa" class="txtInput" /></td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td><input type="text" value="bbbb" class="txtInput" /></td>  
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td><input type="text" value="cccc" class="txtInput" /></td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td><input type="text" value="dddd" class="txtInput" /></td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 


    </div>
    </form>
</body>
</html>
4

3 に答える 3

1

私の記憶が正しければ、問題は、ヘッダーのクリック イベントが Firefox と IE のぼかしイベントの前に発生することです。したがって、より良いアプローチは、keyupイベントを検出することです。

また、テーブル全体を更新する代わりに、updateCellメソッドを使用してセルのみを更新します。この方法の詳細については、tablesorter の不足しているドキュメントに関する私のブログ投稿を参照してください。

または、このデモのパーサー(以下のコード) を試してみてください。元のバージョンで機能しない理由は、メソッドcell内で format 引数の順序が間違っているためです。updateCell

// add parser through the tablesorter addParser method
$.tablesorter.addParser({
    id: 'inputs',
    is: function(s) {
        return false;
    },
    format: function(s, table, cell, cellIndex) {
        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'
});
于 2012-10-12T02:36:50.367 に答える
0

この関数はおそらくより優れている/高速です:

//bind to sort events
$("#yourtable").bind("sortStart",function() {
$(this).find('input:focus').trigger('blur');
});

ちなみに、TableSorter 2.0 (Christian Bach による) には「sortBegin」はありません。代わりに、「sortStart」と「sortEnd」が使用されます。

于 2013-02-27T12:16:58.860 に答える
0

解決策としてはいかがでしょうか。

sortbegin イベント コールバック関数で、テーブルにないフォーム要素に注目しますか?

$("#myTable").bind("sortBegin", function (e, table, cell) {

    $('#myotherinput').focus();


});
于 2012-10-12T16:33:27.307 に答える