Spring绑定动态列表成员

最新推荐文章于 2024-11-30 15:16:56 发布

最新推荐文章于 2024-11-30 15:16:56 发布 · 181 阅读

文章标签：

#Spring #Java #Web #Nokia #JSP

Spring 专栏收录该内容

11 篇文章

订阅专栏

最近遇到一个需求，使用Spring MVC 3,需要绑定动态列表成员。Google了好多文章，没有找到完美的解决方案，绑定到不成问题，主要是动态添加、删除导致绑定的列表下标，在提交之前需要进行normalize，使用js进行normalize可行，但是费劲而且如果有对表单新的修改导致已有的js出现错误，本文提供了一个简单可行的易于维护的方法：

在添加的时候，我们根据当前条目的数量，计算新添加条目的下标。
在删除的时候，使用js将删除的条目隐藏，并将删除列表的下标记录到隐藏字段中。
这样在后台，我们只需要将删除的条目，按照记录在隐藏字段的下标删除，然后再保存即可。

关于绑定动态列表，在Spring 2.5中，不能使用普通的List,必须使用AutoPopulatingList进行绑定，否则会导致OutOfBoundException，Spring 3提供了Auto Grown的功能，但还仅限于List和Array，map和set还不能Auto Grown。
下面以一个简单的订单修改的例子说明如何进行动态列表绑定：
一个订单，有很多订单条目，用户可以修改订单，动态删除或者添加订单条目。
先看看model:
订单类，一个订单有一个订单列表：


package com.qunar.advertisement.advertiser.model;

import java.util.List;
/**
 * Author: fuliang
 * http://fuliang.iteye.com
 */
public class Order {
	private Long id;
	private String name;
	private List<OrderItem> orderItems;

	public void setId(Long id) {
		this.id = id;
	}

	public Long getId() {
		return id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public void setOrderItems(List<OrderItem> orderItems) {
		this.orderItems = orderItems;
	}

	public List<OrderItem> getOrderItems() {
		return orderItems;
	}
}

订单条目类：


package com.qunar.advertisement.advertiser.model;
/**
 * Author: fuliang
 * http://fuliang.iteye.com
 */
public class OrderItem {
	private Long id;
	private String product;
	private Integer price;

	public void setId(Long id) {
		this.id = id;
	}

	public Long getId() {
		return id;
	}

	public Integer getPrice() {
		return price;
	}

	public void setPrice(Integer price) {
		this.price = price;
	}

	public void setProduct(String product) {
		this.product = product;
	}

	public String getProduct() {
		return product;
	}
}

我们的控制器使用@ModelAttribute注解和表单绑定：


package com.qunar.advertisement.advertiser.controller;

import java.util.Collections;
import java.util.List;

import javax.validation.Valid;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import com.qunar.advertisement.advertiser.model.Order;
import com.qunar.advertisement.advertiser.service.OrderManger;
/**
 * Author: fuliang
 * http://fuliang.iteye.com
 */
@Controller
@RequestMapping("/orders")
public class OrderController {
	private OrderManger orderManager;

	@Autowired
	public void setOrderManger(OrderManger orderManager){
		this.orderManager = orderManager;
	}


	@RequestMapping("/edit/{id}")
	public ModelAndView edit(@PathVariable("id") Long id){
		return new ModelAndView("/orders/edit_order",Collections.singletonMap("order",  orderManager.getOrderById(id)));
	}

	@RequestMapping("/update")
	public ModelAndView update(@ModelAttribute("order") @Valid Order order,@RequestParam(value="deletedIndexes",required=false) List<Integer> deletedIndexes){
		orderManager.update(order,deletedIndexes);
		return new ModelAndView("/orders/home");
	}
}

edit_order.jsp的表单和js添加、删除：


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jstl/fn" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<jsp:include page="../base.jsp"></jsp:include>
<head>
	<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
	<title>Order Home</title>

	<script type="text/javascript">
		function deleteItem(itemIndex){
			$('#item_' + itemIndex).hide();
			$('#deletedIndexes').append("<input type='hidden' name='deletedIndexes' value='" + itemIndex + "'");
		}

		function addItem(){
			var itemCnt = parseInt($('#itemCnt').val());

			var newItem = 
			'<tr id="item_' + itemCnt + '">' + 
				'<th>订单条目' + (itemCnt + 1)+ '</th>' +
				'<td><input type="hidden" name="orderItems[' + itemCnt + '].id"/>' +
					 '<input type="text" name="orderItems[' + itemCnt + '].product"/>' + 
			    '</td>' + 
				'<td><input type="text" name="orderItems[' + itemCnt + '].price"/></td>' +
				'<td><a href="javascript:void(0)" onclick="deleteItem('+ itemCnt + ')">删除条目</a></td>' + 
			'</tr>';

			$('#item_' + (itemCnt-1)).after(newItem);
			$('#itemCnt').val(itemCnt + 1);
		}
	</script>
</head>
<body>
	<div id="form">
		<form:form commandName="order" id="orderForm" action="orders/update" method="post">
			<form:hidden path="id"/>
			<div id="deletedIndexes" style="display:none;">

			</div>
			<input type="hidden" value="${fn:length(order.orderItems)}" id="itemCnt"/>
			<table>
				<tr>
					<th>订单名</th>
					<td colspan="3"><form:input path="name"/></td>
				</tr>
				<c:forEach varStatus="vs" items="${order.orderItems}">
					<tr id="item_${vs.index}">
						<th>订单条目${vs.index + 1}</th>
						<td><form:hidden path="orderItems[${vs.index}].id"/>
							<form:input path="orderItems[${vs.index}].product"/>
						</td>
						<td><form:input path="orderItems[${vs.index}].price"/></td>
						<td><a href="javascript:void(0)" onclick="deleteItem('${vs.index}')">删除条目</a></td>
					</tr>
				</c:forEach>
				<tr>
					<td colspan="4" style="text-align:center">
						<input type="submit" value="保存"/>
						<input type="button" value="添加订单条目" onclick="addItem()"/>
					</td>
				</tr>
			</table>
		</form:form>
	</div>
</body>
</html>

在Serice类中我们只是简单的准备数据和打印出结果查看效果：


package com.qunar.advertisement.advertiser.service;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Service;

import com.qunar.advertisement.advertiser.model.Order;
import com.qunar.advertisement.advertiser.model.OrderItem;
/**
 * Author: fuliang
 * http://fuliang.iteye.com
 */
@Service
public class OrderManger {
	//Simple data for test
	public Order getOrderById(Long id){
		Order order = new Order();
		order.setId(id);
		order.setName("手机订单");
		List<OrderItem> orderItems = new ArrayList<OrderItem>();
		order.setOrderItems(orderItems);

		OrderItem orderItem1 = new OrderItem();
		orderItem1.setId(1L);
		orderItem1.setProduct("iPhone 4");
		orderItem1.setPrice(5000);
		orderItems.add(orderItem1);

		OrderItem orderItem2 = new OrderItem();
		orderItem2.setId(2L);
		orderItem2.setProduct("Nokia N97");
		orderItem2.setPrice(4000);
		orderItems.add(orderItem2);

		return order;
	}
	/**
	 * 
	 * @param order should be updated
	 * @param deletedItemIndexes orderItem indexes should be deleted
	 * 简单的在控制台打印出结果，如果存入到数据库，可以根据orderItem id
         * 是否为null，进行更新或者保存。
         */
	public void update(Order order, List<Integer> deletedItemIndexes) {
		if(deletedItemIndexes != null){
			for(int i = deletedItemIndexes.size() - 1; i >= 0; i--){
				order.getOrderItems().remove(deletedItemIndexes.get(i).intValue());
			}
		}
		StringBuilder sb = new StringBuilder();
		sb.append("Order Id: ").append(order.getId()).append("\tName: ").append(order.getName()).append("\n");
		List<OrderItem> items = order.getOrderItems();
		for (OrderItem orderItem : items) {
			sb.append("Item Id: ").append(orderItem.getId()).append("\tName: ").append(orderItem.getProduct()).append("\tprice: ").append(orderItem.getPrice()).append("\n");
		}
		System.out.println(sb.toString());
	}
}