jquery.sortable() 関数でソート可能なテーブルがあります。現在、テーブル内のすべての行はソート可能であり、その行の隠し要素に行番号が格納され、行が移動されるたびに更新されます。
問題は、行の前半をソート可能にする必要があるが、後半を修正する必要があるテーブルがいくつかあることです。それらを2つの別々のテーブルに分割する以外の解決策はありますか?
私は次のHTMLを持っています:
<table cellspacing="0" cellpadding="5px" class="content" id="sort">
<thead>
<tr>
<td>ID</td>
<td>Title</td>
<td>Created By</td>
<td>Last Modified By</td>
<td>Visiblity</td>
<td>Edit</td>
<td>Copy</td>
<td>Delete</td>
<td>Display Order</td>
</tr>
</thead>
<tbody class="ui-sortable">
<tr class="contentbody">
<td>1</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
<input type="hidden" class="order" id="order_1" name="order_1" value="1">
</tr>
<tr>
More Content
</tr>
</tbody>
</table>
ドキュメント対応関数に次の JQuery があります。
/* table sorting */
var fixHelper = function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
};
var sortable = $("#sort tbody").sortable({
helper: fixHelper,
stop: function(event, ui) {
//create an array with the new order
order = {}
$(this).find('input.order').map(function(index, obj)
{
return order[this.id] = index;
}
);
$.ajax({
type: 'POST',
url: location.href,
data: order,
error: function() {
console.log("Theres an error with AJAX sorting");
},
success: function() {
/* reload table after sort*/
$.get("indexpage_table.php", function(data) {
$("#sort tbody").html(data);
});
console.log("Saved.");
}
});
return true;
}
});