我有以下jQuery代码:
var isOk = true;
$('#edit').click(function () {
if (isOk) {
$('table tbody').sortable({
axis: 'y',
update: function (event, ui) {
var data = $(this).sortable('serialize');
$.ajax({
data: data,
type: 'POST',
url: 'updatePagesOrder.php',
success: function (msg) { //re-number the rows from 1 to n
$('table > tbody tr').each(function (i) {
$(this).attr('id', 'item-' + (i + 1)); // use $(this) as a reference to current tr object
});
},
error: function () {
alert("An error occurred");
}
});
}
}, "enable");
}
else {
$("table tbody").unbind();
$('table a').unbind();
}
isOk = !isOk;
在上面的代码中#edit
是一个按钮,在第一次单击时会导致表行可以使用,在第二次单击时它会禁用可排序选项。
我希望在第三次点击时,行可以再次排序。 我尝试了上面的代码,但它没有用。
为什么呢?我该如何解决?谢谢!
答案 0 :(得分:4)
在点击处理程序之外初始化窗口小部件:
$('table tbody').sortable({
disabled: true, // Initially disabled
axis: 'y',
update: function (event, ui) {
var data = $(this).sortable('serialize');
$.ajax({
data: data,
type: 'POST',
url: 'updatePagesOrder.php',
success: function (msg) { //re-number the rows from 1 to n
$('table > tbody tr').each(function (i) {
$(this).attr('id', 'item-' + (i + 1)); // use $(this) as a reference to current tr object
});
},
error: function () {
alert("An error occurred");
}
});
}
});
然后只需在单击按钮时切换“禁用”选项。
$("#edit").click(function() {
var table = $('table tbody');
table.sortable('option', 'disabled', !table.sortable('option', 'disabled'));
});