2

使用 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>
4

3 回答 3

1

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

此外，不要更新整个表格，而是使用该updateCell方法来更新单元格。您可以在我关于 tablesorter 的缺失文档的博客文章中阅读有关此方法的更多信息。

或者更好的是，在这个演示中试用解析器（下面的代码），它只适用于我的 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'
});
于 2012-10-12T02:36:50.367 回答
0

这个作为解决方案怎么样？

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

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

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


});
于 2012-10-12T16:33:27.307 回答
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 回答