jquery ui сортируемый список не отслеживает обновления атрибутов элементов списка - PullRequest
Новая
       4

jquery ui сортируемый список не отслеживает обновления атрибутов элементов списка

0 голосов
/ 06 мая 2011

Я работаю со списком, элементы которого можно выбирать (используя флажки) и сортировать (используя jquery «сортируемый»).

Список выглядит следующим образом: 

<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") и друзьям как в конце обратного вызова, так и непосредственно перед сортируемым сообщением об обновлении, но без кубиков.

Есть идеи?

Ответы [ 2 ]

0 голосов
/ 09 мая 2011

Таким образом, решение состоит в том, чтобы вообще не беспокоиться о сортируемых методах - просто выберите нужные свойства прямо из флажков: 

$(".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 голосов
/ 06 мая 2011

Вместо использования события "update" вместо этого попробуйте "stop" и объедините свою собственную сортировку 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 () { });
  }
});

Надеюсь, это работает для вас!

...