Получение интерфейса JQuery Сортируемый для работы на элементах asp.net ListView?

Question

У меня есть следующий ListView, в котором я использую сортируемую функцию JQuery UI, чтобы иметь возможность сортировать элементы в ListView. Проблема в том, что я не могу поместить сортируемый класс в таблицу в ItemTemplate, потому что он не работает, если я помещаю class = "sortable" во внешний div, он работает, но позволяет мне сортировать все внутри ListView, я просто хочу иметь возможность перемещать сортировку таблиц. Вот разметка

  <div>  //Works here, but hr's become sortable too.
            <asp:ListView ID="lvwDocuments" runat="server">
                <LayoutTemplate>
                    <h3>
                        Documents</h3>
                        <asp:PlaceHolder ID="itemPlaceHolder" runat="server">
                        </asp:PlaceHolder>
                </LayoutTemplate>
                <ItemTemplate>
                    <table class="sortable"> //Does not work Here
                        <tr>
                            <td>
                                <p class="title">
                                    <a runat="server" href='<%#Eval("url") %>'>
                                        <%#Eval("title") %></a></p>
                                <br />
                                <p>
                                    <%#Eval("description") %></p>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
                <ItemSeparatorTemplate>
                    <hr />
                </ItemSeparatorTemplate> 
        </div>

Кроме того, как я могу сохранить порядок сортировки даже после обновления страницы.

Answer 1

Чтобы сортировка работала, вы должны применить ее к родительскому элементу (обычно это div).

В сортируемом вызове используйте следующие свойства:

$(".sortable").sortable({ items: "table" });

Порядок сортировки можно сохранить, используя HiddenField и присваивая его значение:

$(".sortable").sortable("toArray");

Затем используйте это значение для упорядочения списка.

Есть проблема с этим подходом, хотя. HR не сортируются, поэтому вы не можете помещать предметы между ними. Было бы лучше использовать погружение вокруг вашего стола с часами внизу.

<div class="sortable">
    <div class="item">
        <table> ... </table>
        <hr />
    </div>
</div>