10

私はこのようなテーブルを持っています：

|   Update   |   Name  |  Code      | modification date |
|            |   name1 | code1      | 2009-12-09        |
|            |   name2 | otehercode | 2007-09-30        |

[更新]列にチェックボックスが含まれている場合<input type='checkbox' />。

チェックボックスの初期状態は、テーブルをレンダリングする前に、ただし行がデータベースからフェッチされた後に決定されます（サーバー側の一連の条件に基づいています）。

チェックボックスは、デフォルトでオンにするか、デフォルトでオフにするか、（属性disabled='disabled'として）無効にすることができます。input

jQueryのTablesorterを使用してテーブルを並べ替えています。そして、チェックボックスを含む列でソートできるようにしたいと思います。どうすれば可能ですか（役立つ場合は、要素にいくつかの追加属性を渡すことができinputます...）？

それを処理するために独自のパーサーを作成する必要がありますか？

4

8 に答える 8

18

入力の直前に非表示のスパンを追加し、その中にテキストを含めます（列の並べ替えに使用されます）。何かのようなもの：

<td>
    <span class="hidden">1</span>
    <input type="checkbox" name="x" value="y">
</td>

必要に応じて、チェックボックスにイベントを添付して、チェックをオン/オフにしたときに前の兄弟のコンテンツ（スパン）を変更することができます。

$(document).ready(function() {

    $('#tableid input').click(function() {
         var order = this.checked ? '1' : '0';
         $(this).prev().html(order);
    })

})

注：コードを確認していないため、エラーが発生する可能性があります。

于 2009-12-16T07:59:50.783 に答える
12

これは、ハートの答えのより完全で正しいバージョンです。

$(document).ready(function() {
    $.tablesorter.addParser({ 
        id: "input", 
        is: function(s) { 
            return false; 
        }, 
        format: function(s, t, node) {
            return $(node).children("input[type=checkbox]").is(':checked') ? 1 : 0;
        }, 
        type: "numeric" 
    });

    sorter = $("#table").tablesorter({"headers":{"0":{"sorter":"input"}}});
// The next makes it respond to changes in checkbox values 
    sorter.bind("sortStart", function(sorter){$("#table").trigger("update");});

});
于 2013-03-26T15:22:22.047 に答える
5

新しい機能を備えたサポート/フォークされたjQueryTableSorterライブラリを使用しているため、この応答を追加しています。入力/選択フィールド用のオプションのパーサーライブラリが含まれています。

http://mottie.github.io/tablesorter/docs/

次に例 を示します。http： //mottie.github.io/tablesorter/docs/example-widget-grouping.html これは、入力/選択パーサーライブラリ「parser-input-select.js」を含め、ヘッダーオブジェクトを追加することで実行されます。列と解析タイプを宣言します。

headers: {
  0: { sorter: 'checkbox' },
  3: { sorter: 'select' },
  6: { sorter: 'inputs' }
}

含まれる追加のパーサーは、日付解析（Sugar＆DateJS付き）、ISO8601日付、月、2桁の年、平日、距離（フィート/インチ、メートル法）、およびタイトル形式（"A"と"The"を削除）です。

于 2013-09-09T20:06:33.540 に答える
4

tablesorter jQueryプラグインを使用して、すべてのチェックボックス列を並べ替えることができるカスタムパーサーを追加できます。

$.tablesorter.addParser({
        id: 'checkbox',
        is: function (s, table, cell) {
            return $(cell).find('input[type=checkbox]').length > 0;
        },
        format: function (s, table, cell) {
            return $(cell).find('input:checked').length > 0 ? 0 : 1;
        },
        type: "numeric"
    });
于 2013-12-04T10:58:59.783 に答える
1

TableSorterに、次のようなカスタムパーサーを追加できます。

 $.tablesorter.addParser({ 
    // set a unique id 
    id: 'input', 
    is: function(s) { 
        // return false so this parser is not auto detected 
        return false; 
    }, 
    format: function(s) { 
        // Here we write custom function for processing our custum column type 
        return $("input",$(s)).val() ? 1 : 0; 
    }, 
    // set type, either numeric or text 
    type: 'numeric' 
});

そしてそれをあなたのテーブルで使う

$("table").tablesorter(headers:{0:{sorter:input}});
于 2009-12-21T13:06:36.030 に答える
1

私は他の回答で複数のアプローチを試しましたが、テーブルモデルの更新についてのマーティンからのコメントとともに、salgizaから受け入れられた回答を使用することになりました。ただし、最初に実装したときは、提案された表現のように、チェックボックスonchangeトリガー内に更新行を設定しました。これにより、チェックボックスのオン/オフで行が再配置されましたが、非常に混乱していました。クリックすると線が飛び跳ねた。その代わりに、更新機能を実際のチェックボックス列ヘッダーにバインドして、クリックして並べ替えを更新したときにのみ行が再配置されるようにしました。それは私が望むように機能します：

// checkbox-sorter is the assigned id of the th element of the checbox column
$("#checkbox-sorter").click(function(){ 
    $(this).parents("table").trigger("update");
});
于 2018-05-02T10:55:34.510 に答える
0

アーロンの答えを完成させ、スタックオーバーフローエラーを回避するための最後の仕上げです。$.tablesorter.parser()そのため、上記の機能を使用することに加えて、実行時に更新されたチェックボックス値で機能するように、ページに以下を追加する必要がありました。

    var checkboxChanged = false;

    $('input[type="checkbox"]').change(function(){
        checkboxChanged = true;
    });

    // sorterOptions is a variables that uses the parser and disables
    // sorting when needed
    $('#myTable').tablesorter(sorterOptions);
    // assign the sortStart event
    $('#myTable')..bind("sortStart",function() {
        if (checkboxChanged) {
            checkboxChanged = false;
            // force an update event for the table
            // so the sorter works with the updated check box values
            $('#myTable')..trigger('update');
        }
    });
于 2015-05-29T08:11:50.803 に答える
0 

    <td align="center">
    <p class="checkBoxSorting">YOUR DATA BASE VALUE</p>
    <input type="checkbox" value="YOUR DATA BASE VALUE"/>
    </td>

//javascript
$(document).ready(function() {
$(".checkBoxSorting").hide();
});

于 2016-10-17T14:57:23.657 に答える