如何更改窗体中列表项的顺序

How to alter order of list items in a form?

本文关键字：顺序 列表 何更改 窗体      更新时间：2023-09-26

我制作了一个Spring MVC应用程序，可以向用户显示项目列表 - 如何在JSP中更改这些项目的顺序，以便将新订单提交到服务器？

例如，用户将获得以下列表：

  1. 宠物猫
  2. 宠物狗
  3. 宠物鸟

该列表由以下形式组成：

<form:form action="/modifypetlist.do" method="POST" modelAttribute="petList">
  <fieldset>
    <div>
      <ul id="sortable">
        <c:forEach items="${petList.list}" varStatus="vs">
          <li class="ui-state-default">
           <form:label path="list[${vs.index}].pet">Pet</form:label>
           <form:input path="list[${vs.index}].pet" />
          </li>
       </c:forEach>
      </ul>
     </div>
     <input type="submit" value="send">
   </fieldset>
</form:form>

我包含了一些Javascript，使用户能够拖放列表中的行，例如将Dog行移动到Cat行上方。

如何将其传达给服务器？（如何从表单字段重建 petList 模型？提交表单后，我目前可以在服务器中读取列表，但列表项按原始顺序排列，即使我更改了表单中的名称（例如。猫-->老鼠）

那是因为它们自然地按其主键（这是一个索引）排序，所以通常是行的 id。

尝试在表格中添加一个"排名"字段，一旦数据被排序，您将更新该字段，并按排名对结果进行排序。

您需要将订单信息持久化在持久化层中。通过这样做，每次修改顺序时都需要触发一个调用（例如javascript ajax调用）。此调用应向应用程序服务器发送请求，应用程序服务器将调用正确的服务来更新该列表的持久性层。

然后，您还需要调整您的持久性层，以使用您之前在显示页面时保留的"排名"信息对列表进行排序。

我想这是最有效的方法。

祝你好运！

相关文章：