我有一个可通过 jquery.sortable() 函数排序的表。目前，表中的所有行都是可排序的，行号存储在该行的隐藏元素中，并在行移动时更新。
问题是我现在有几个表需要前半部分行是可排序的，但后半部分是固定的。除了将它们分成两个单独的表之外，还有其他解决方案吗？
我有以下 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;
}
});