如何更改表单中列表项的顺序？

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

例如，用户得到以下列表：

宠物猫
宠物狗
宠物鸟

名单是由这种形式：

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

我已经加入了一些Java cript，使用户能够拖放列表中的行，例如将Cat线移动到Cat线以上。

如何与服务器通信？（我怎么能从表单字段重建petList模型？）我可以在提交表单后在服务器上读取列表，但是列表项目以原始顺序出现，即使我在表单中更改名称（例如。Cat - > Mouse）

来源

2012-06-15 wannabeartist

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

尝试在表格中添加一个“排名”字段，一旦数据被排序，您将更新“排名”字段并按秩排序您的结果。

来源

2012-06-15 12:13:02

听起来像一个计划，但有没有一种方法来改变从javascript的“排名”（当列表项被拖动）？或者我必须在表格中解决一个古老的数字领域？ – wannabeartist

当然，有一种方法可以在JavaScript中移动，但是你到底该如何保留该命令？您可能想尝试交换数据库bu中列表中项目的ID，这对我来说听起来不是一个好主意。 –

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

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

我想这是最有效的方法。

祝你好运！

来源

2012-06-15 13:20:22

嗯，有道理。我认为我的问题根源在于我希望一次修改列表（添加，删除项目并更改顺序 - >然后一次保存新列表）。似乎除了分别处理每个更改之外，真的没有其他明智的方法。 – wannabeartist

以下是您可以做的事情。在列表上发生的每个事件中，都会触发对应用程序服务器的调用。该调用将包含整个列表状态，并且您的持久层每次都会覆盖所有内容。这样，列表中的一项操作就可以处理所有可能性。 –

如何更改表单中列表项的顺序？

回答

相关问题