Question

我正在处理一个列表，其项目既可以选择（使用复选框）又可以排序（使用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")和朋友，但没有骰子。

有什么想法吗？

Answer 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 () { });
  }
});

希望这适合你！

Answer 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 () { });
    }
});

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

2 个答案: