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.its を使用して、より多くの機能と使いやすい kendoui を提供します 。

于 2013-08-30T11:43:19.460 に答える
0

元の tablesorter プラグインにはupdateCellメソッドの使用に問題があるため、このメソッドは入力値を更新するときに機能しません。しかし、この問題のないテーブルソーターのフォークを試すことができます。

これは、以下のすべてのコードをまとめたデモです。

基本的に、すべてのテーブル セルに適用されるものを使用する代わりにtextExtraction、パーサーを追加するだけです。

$.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 に答える