2

1）下面的代码将在页面加载时对输入框进行排序，但是如果我尝试编辑任何<input>s 然后尝试再次对该列进行排序，那么它会按原始值而不是新值排序，可以你帮忙解决这个问题？

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 回答