1

我正在使用 jQuery Tabelsorter，它运行良好。

但我希望在每个字段中都有一个输入标签，其中排序脚本的值位于输入值参数内。

现在： <td><?php echo $value; ?></td>

目标： <td><input value="<?php echo $value; ?>"></td>

如何告诉 jQuery Tablesorter 新的“值”位置？

在 Tablesorter 2.0 示例中找到http://tablesorter.com/docs/example-option-text-extraction.html

例子：

textExtraction: function(node) { 
            // extract data from markup and return it  
            return node.childNodes[0].childNodes[0].innerHTML; 
}

我的尝试但不工作：

textExtraction: function(node) { 
            // extract data from markup and return it  
            return node.childNodes[0].val();
}
4

2 回答 2

1

使用 kendoui 代替表格排序器。它提供了更多功能和易于使用 的 kendoui

于 2013-08-30T11:43:19.460 回答
0

原来的 tablesorter 插件在使用该updateCell方法时存在问题，因此在更新输入值时该方法将不起作用。但是你可以试试我的 tablesorter 叉子，它没有这个问题。

这是下面所有代码放在一起的演示。

基本上不需要使用textExtractionwhich 适用于所有表格单元格，您只需要添加一个解析器：

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

然后告诉 tablesorter 将它应用到哪一列（从零开始的索引）：

$('table').tablesorter({
    headers: {
        0: { sorter: "inputs" } // zero-based index (first column = column 0)
    }
});

然后确保对输入的任何更改（除非您将它们设为只读）都被 tablesorter 识别并发送到您的服务器

var resort = true, // resort table after update

// update all input types within the tablesorter cache when the change event fires.
// This method only works with jQuery 1.7+
// you can change it to use delegate (v1.4.3+) or live (v1.3+) as desired
// if this code interferes somehow, target the specific table $('#mytable'),
// instead of $('table')
$(window).load(function () {
    // this flag prevents the updateCell event from being spammed
    // it happens when you modify input text and hit enter
    var alreadyUpdating = false;
    $('table').find('tbody').on('change', 'input', function (e) {
        if (!alreadyUpdating) {
            var $tar = $(e.target),
                $table = $tar.closest('table');
            alreadyUpdating = true;
            $table.trigger('updateCell', [ $tar.closest('td'), resort ]);

            // *** update your server here ***

            setTimeout(function () {
                alreadyUpdating = false;
            }, 10);
        }
    });
});
于 2013-08-31T14:10:19.870 回答