jquery ui可排序列表不跟踪列表项属性的更新答案

【问题标题】：jquery ui sortable list not tracking updates to attributes of list itemsjquery ui可排序列表不跟踪列表项属性的更新
【发布时间】：2011-05-06 03:10:41
【问题描述】：

我正在处理一个列表，其项目既可以选择（使用复选框）又可以排序（使用 jquery 'sortable'）。

列表如下所示：

<ul id="dragdrop">
    <li id="1290"><input type="checkbox" id="290" checked class="slideToggle" /><img ... /></li>
    <li id="1291"><input type="checkbox" id="291" checked class="slideToggle" /><img ... /></li>
</ul>

...javascript 看起来像这样：

$(".slideToggle").click(function () {
    var slideId = $(this).attr("id");
    var checked = $(this).attr("checked");
    if (slideId) { 
        $.post("ToggleInclusion", { "slideId": slideId, "isChecked": checked },
            function () {
                var newId = checked ? "1" : "0" + slideId;
                $(this).parent().attr("id", newId);
            });
    }
});

$("#dragdrop").sortable({
    update: function() {
        var order = $(this).sortable("toArray").toString();
        $.post("UpdateOrder", { "order": order }, function () { });
    }
});

因此，当用户取消选中第二个项目 (id=291) 的复选框时，其列表项将变为

<li id="0291" ... ></li>

我遇到的问题是可排序列表未捕获此更改。当取消选中第二项然后将其拖到第一项之前的位置时，发布到服务器的订单字符串是“1291,1290”，而应该是“0291,1290”。

我已经尝试在切换回调结束时以及在可排序更新帖子之前致电$("#dragdrop").sortable("refresh") 和朋友，但没有骰子。

有什么想法吗？

【问题讨论】：

标签： jquery ajax jquery-ui-sortable

【解决方案1】：

不要使用“更新”事件，而是尝试“停止”并连接您自己的排序变量。

$("#dragdrop").sortable({
  stop: function() {
    var order = "";
    $("#dragdrop").find("tr").each(function() {
        order = order + $(this).attr("id") + ",";
    });
    if(order.length > 0) order = order.substr(0, order.length - 1); // remove the last comma
    $.post("UpdateOrder", { "order": order }, function () { });
  }
});

希望对你有用！

【讨论】：

谢谢，但不幸的是没有这样做。使用停止事件和手动连接都不会捕获更新的 id 属性。我真的很惊讶，$('#dragdrop li').each(... 没有得到正确的 id 值。我在想我缺少一些更基本的东西，比如列表项的属性仅在页面加载时才被缓存，因此在那之后无法更新？当我取消选中某些框并刷新页面并然后重新排序时，更新的属性就可以正常使用了。

【解决方案2】：

因此，解决方案是根本不用理会可排序的方法——只需直接从复选框中获取所需的属性：

$(".slideToggle").click(function () {
    var slideId = $(this).attr("id");
    var checked = $(this).attr("checked");
    if (slideId) { 
        $.post("ToggleInclusion", { "slideId": slideId, "isChecked": checked },
            function () { });
    }
});

$("#dragdrop").sortable({
    update: function() {
        var order = $(".slideToggle").map(function() {
            return ($(this).attr("checked") ? "1" : "0" + $(this).attr("id");
        }).get().join(",");
        $.post("UpdateOrder", { "order": order }, function () { });
    }
});

【讨论】：