Question

使用tablesorter我在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>

Answer 1

如果我没记错的话，问题是标题上的点击事件发生在Firefox和IE中的模糊事件之前。因此，更好的方法是检测keyup事件。

此外，不是更新整个表，而是使用updateCell方法更新单元格。您可以在我的blog post about tablesorter's missing documentation中了解有关此方法的更多信息。

或者更好的是，试用this demo中的解析器（下面的代码），该解析器仅适用于我的forked version of tablesorter。它无法在原始版本上运行的原因是因为格式cell参数在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'
});

Answer 2

这作为解决方案怎么样？

在sortbegin事件回调函数上，然后关注不在表中的表单元素？

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

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


});

Answer 3

这个功能可能更好/更快：

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

顺便提一下，TableSorter 2.0（来自Christian Bach）没有 “sortBegin”。而是“ sortStart ”＆amp;使用“ sortEnd ”。

<input />模糊事件未在firefox中的tablesorter“sortBegin”EVENT上触发

3 个答案: