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

发布于 2024-11-05 13:03:15 字数 1357 浏览 3 评论 0原文

我正在处理一个列表，其项目既可以选择（使用复选框）又可以排序（使用 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>

The Problem that I'm running进入的原因是可排序列表没有捕获此更改。当取消选中第二个项目，然后将其拖动到第一个项目之前的位置时，发布到服务器的订单字符串是“1291,1290”，而它应该是“0291,1290”。

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

有什么想法吗？

原文

I'm working with a list whose items are both selectable (using checkboxes) and sortable (using jquery 'sortable').

The list looks like this:

<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>

...and the javascript looks like this:

$(".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 () { });
    }
});

So when the user un-checks the checkbox for, say, the second item (id=291), its list item changes to

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

The problem that I'm running into is that this change is not captured by the sortable list. When the second item is unchecked and then dragged to a position before the first item, the order string that's posted to the server is "1291,1290" when it should be "0291,1290".

I have tried calls to $("#dragdrop").sortable("refresh") and friends both at the end of the toggle callback and also just before the sortable update post, but no dice.

Any ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如梦 2024-11-12 13:03:15

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

$("#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 () { });
  }
});

希望这对你有用！

Instead of using the "update" event, try "stop" instead and concatenate your own sort var.

$("#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 () { });
  }
});

Hopefully that works for you!

回复收藏 0 原文

久夏青 2024-11-12 13:03:15

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

$(".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 () { });
    }
});

So the solution is to not bother with the sortable methods at all--just grab the desired properties directly from the check boxes:

$(".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 () { });
    }
});

回复收藏 0 原文

~没有更多了~