可能比你想的要复杂,但我希望这能有帮助。
https://jsfiddle.net/Twisty/9aes8omr/
javascript
$(function() {
function showIndex(tb) {
var fields = $(tb).find("input[name='order']");
console.log(fields);
fields.each(function(ind, el) {
console.log(ind, el);
$(el).val(ind + 1);
});
}
function spliceRow(tb, r, i) {
var ind = i - 1;
var ln = $("tr", tb).length;
var rows = [];
$("tr", tb).each(function(ind, el) {
rows.push(el);
});
rows.splice(ind, 0, r);
tb.html("");
$.each(rows, function(k, v) {
tb.append(v);
});
}
// Fix the width of the cells
$('td, th', '#sortFixed').each(function() {
var cell = $(this);
cell.width(cell.width());
});
$('#sortFixed tbody').sortable({
items: "> tr",
update: function(e, ui) {
console.log("Sort Update.");
showIndex($(this));
}
}).disableSelection();
$("#sortFixed tbody").on("change", "input[name='order']", function(e) {
var me = $(this);
var orig = me.parents("tr");
var row = orig.clone();
var t = parseInt(me.val());
console.log(t, row);
orig.remove();
spliceRow($("#sortFixed tbody"), row, t);
$("#sortFixed tbody").sortable("refresh");
showIndex($("#sortFixed tbody"));
});
});
如果创建一个HTML行数组,则可以使用
.splice()
是的。如果要使用可排序并手动输入索引,则以上代码将执行此操作。您可以拖动它们,它将求助或您可以输入一个数字,它将改变位置(也刷新可排序)。
这意味着最终,你可以使用
.sortable("serialize")
或
.sortable("toArray")
随你喜欢。
希望能有所帮助。
