jqueryのTablesorter - <入力>要素を有する列を並び替え
-
19-09-2019 - |
質問
私はこのようなテーブルを持っています
| Update | Name | Code | modification date |
| | name1 | code1 | 2009-12-09 |
| | name2 | otehercode | 2007-09-30 |
ここで、更新列は、チェックボックスの<input type='checkbox' />
が含まれています。
チェックボックスの初期状態は、テーブルをレンダリングする前に決定されるが、行がデータベースからフェッチされた後(これは、サーバー側で、条件のセットに基づいています)。
チェックボックスは、デフォルトまたは無効(disabled='disabled'
属性としてinput
)によってチェックされない、デフォルトでチェックすることができます。
私は jQueryのTablesorterが私のテーブルをソートするを使用しています。そして私は、チェックボックスを含む列でソートできるようにしたいと思います。どのようにそれは(それが助けになるならば、私は、多分私のinput
要素にいくつかの追加の属性を渡すことができます...)可能ですか?
私はそれを処理するために、自分のパーサを書くべきですか?
解決
(つまり、列をソートするために使用されます)だけ入力する前に隠されたスパンを追加し、その中にいくつかのテキストが含まれています。ような何かます:
<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);
})
})
注:それはエラーがあるかもしれないので、私は、コードをチェックしていません。
。他のヒント
これは、HAARTの答えのより完全な/正しいバージョンがあります。
$(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");});
});
私はこの応答を追加しています。入力/選択フィールド用のオプションのパーサライブラリが含まれています。
http://mottie.github.io/tablesorter/docs/する
ここでは例です: http://mottie.github.io/tablesorter/docs/example-widget -grouping.htmlする そしてそれは、入力/選択パーサライブラリ「パーサ入力-select.js」を含むヘッダオブジェクトを追加すると列と解析タイプを宣言することで行われます。
headers: {
0: { sorter: 'checkbox' },
3: { sorter: 'select' },
6: { sorter: 'inputs' }
}
付属追加パーサは以下のとおりです。日付(W /シュガー&DateJS)の解析、ISO8601の日付、月、2桁の年、平日、距離(フィート/インチ&メトリック)とタイトルフォーマットは( "A" & "ザ・" を削除します) 。
あなたは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"
});
あなたはこのようになめらか、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}});
ちょうど1最後の仕上げは、アーロンの答えは完全なものとスタックオーバーフローエラーを回避します。だから、上記のように$.tablesorter.parser()
機能を使用することに加えて、私はそれが実行時に更新され、チェックボックスの値を使用して動作させるために、私のページに以下を追加する必要がありました。
var checkboxCahnged = 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');
}
});
<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();
});
私は他の回答でのアプローチの複数を試してみましたが、テーブルモデルの更新についてマーティンからのコメントで、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");
});