struts2 自定义表单

最新推荐文章于 2025-08-11 09:20:14 发布

最新推荐文章于 2025-08-11 09:20:14 发布 · 92 阅读

文章标签：

#java #javascript #ViewUI

本文深入探讨了如何使用迭代技术自定义表单，以实现问卷调查页面的复杂设计，包括Survey、Page、Question三个模型类的构建与交互，通过实例展示了如何运用<s:iterator/>标签进行多层迭代，以适应不同层级的数据展示与操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义表单一定会涉及<s:iterator/>迭代，一个复杂的自定义表单可能会嵌套n多层迭代。

比如一个自定义一个问卷调查页面涉及3个模型：一个Survey代表一个调查，一个Page代表一个页面，一个Question代表一个问题。每个问题中会包含不同的表单元素，就会涉及迭代。

3个模型类如下：

Survey

package com.atguigu.surveypark.model;

import java.util.Date;
import java.util.HashSet;
import java.util.Set;

/**
 * 调查类
 */
public class Survey {
	private Integer id;
	private String title = "未命名";
	private String preText = "上一步";
	private String nextText = "下一步";
	private String exitText = "退出";
	private String doneText = "完成";
	private Date createTime = new Date();
	
	//建立从Survey到User之间多对一关联关系
	private User user ;
	
	//建立从Survey到Page之间一对多关联关系
	private Set<Page> pages = new HashSet<Page>();

	public Set<Page> getPages() {
		return pages;
	}

	public void setPages(Set<Page> pages) {
		this.pages = pages;
	}

	public User getUser() {
		return user;
	}

	public void setUser(User user) {
		this.user = user;
	}

	public Integer getId() {
		return id;
	}

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

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public String getPreText() {
		return preText;
	}

	public void setPreText(String preText) {
		this.preText = preText;
	}

	public String getNextText() {
		return nextText;
	}

	public void setNextText(String nextText) {
		this.nextText = nextText;
	}

	public String getExitText() {
		return exitText;
	}

	public void setExitText(String exitText) {
		this.exitText = exitText;
	}

	public String getDoneText() {
		return doneText;
	}

	public void setDoneText(String doneText) {
		this.doneText = doneText;
	}

	public Date getCreateTime() {
		return createTime;
	}

	public void setCreateTime(Date createTime) {
		this.createTime = createTime;
	}

}

Page

package com.atguigu.surveypark.model;

import java.util.HashSet;
import java.util.Set;

/**
 * 页面类
 */
public class Page {
	private Integer id;
	private String title = "未命名";
	private String description;

	//简历从Page到Survey之间多对一关联关系
	private Survey survey;

	//简历从Page到Question之间一对多关联关系
	private Set<Question> questions = new HashSet<>();

	public Integer getId() {
		return id;
	}

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

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public String getDescription() {
		return description;
	}

	public void setDescription(String description) {
		this.description = description;
	}

	public Survey getSurvey() {
		return survey;
	}

	public void setSurvey(Survey survey) {
		this.survey = survey;
	}

	public Set<Question> getQuestions() {
		return questions;
	}

	public void setQuestions(Set<Question> questions) {
		this.questions = questions;
	}

}

Question

package com.atguigu.surveypark.model;

/**
 * 问题类
 */
public class Question {
	//
	private Integer id;
	// 题型0-8
	private int questionType;
	//
	private String title;
	// 选项
	private String options;

	// 其他项
	private boolean other;

	// 其他项样式:0-无 1-文本框 2-下拉列表
	private int otherStyle;

	// 其他项下拉选项
	private String otherSelectOptions;

	// 矩阵式行标题集
	private String matrixRowTitles;

	// 矩阵式列标题集
	private String matrixColTitles;
	// 矩阵是下拉选项集
	private String matrixSelectOptions;

	//建立从Question到Page之间多对一关联关系
	private Page page;

	public Integer getId() {
		return id;
	}

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

	public int getQuestionType() {
		return questionType;
	}

	public void setQuestionType(int questionType) {
		this.questionType = questionType;
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public String getOptions() {
		return options;
	}

	public void setOptions(String options) {
		this.options = options;
	}

	public boolean isOther() {
		return other;
	}

	public void setOther(boolean other) {
		this.other = other;
	}

	public int getOtherStyle() {
		return otherStyle;
	}

	public void setOtherStyle(int otherStyle) {
		this.otherStyle = otherStyle;
	}

	public String getOtherSelectOptions() {
		return otherSelectOptions;
	}

	public void setOtherSelectOptions(String otherSelectOptions) {
		this.otherSelectOptions = otherSelectOptions;
	}

	public String getMatrixRowTitles() {
		return matrixRowTitles;
	}

	public void setMatrixRowTitles(String matrixRowTitles) {
		this.matrixRowTitles = matrixRowTitles;
	}

	public String getMatrixColTitles() {
		return matrixColTitles;
	}

	public void setMatrixColTitles(String matrixColTitles) {
		this.matrixColTitles = matrixColTitles;
	}

	public String getMatrixSelectOptions() {
		return matrixSelectOptions;
	}

	public void setMatrixSelectOptions(String matrixSelectOptions) {
		this.matrixSelectOptions = matrixSelectOptions;
	}

	public Page getPage() {
		return page;
	}

	public void setPage(Page page) {
		this.page = page;
	}
}

一个自定义表单

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>设计调查</title>
		<link rel="stylesheet" type="text/css" href='<s:url value="/styles.css" />'>
		<script type="text/javascript" src="<s:url value="/jquery-1.7.1.js" />"></script>
		<script type="text/javascript">
			$(function(){
				$("a[href*=delete]").click(function(){
					return confirm("删除该项?");
				});				
			});
		</script>
	</head>
	<body>
		<s:include value="header.jsp" />
		<s:set var="sId" value="id" />
		<table>
				<tr>
					<td colspan="2" class="tdWhiteLine"></td>
				</tr>
				<tr>
					<td colspan="2" class="tdHeader">设计调查</td>
				</tr>
				<tr>
					<td colspan="2" class="tdWhiteLine"></td>
				</tr>
				<tr>
					<td class="tdSHeaderL">
						<!-- 调查标题 -->
						<s:property value="title" />
					</td>
					<td class="tdSHeaderR">
						增加Logo
						编辑调查
						增加页
					</td>
				</tr>
				<tr>
					<td colspan="2" style="text-align: left;vertical-align: top;">
						<table>
							<tr>
								<td width="30px"></td>
								<td width="*">
									<table>
										<!-- 迭代页面集合 -->
										<s:iterator var="p" value="pages">
										<s:set var="pId" value="#p.id" />
										<tr>
											<td>
												<table>
													<tr>
														<!-- 页面标题 -->
														<td class="tdPHeaderL"><s:property value="#p.title" /></td>
														<td class="tdPHeaderR">
															编辑页标题
															移动/复制页
															增加问题
															删除页
														</td>
													</tr>
												</table>
											</td>
										</tr>
										<tr>
											<td>
												<table>
													<tr>
														<td width="30px"></td>
														<td width="*">
															<table>
																<tr>
																	<td>
																		<table>
																			<!-- 迭代问题集合 -->
																			<s:iterator var="q" value="#p.questions">
																			<s:set var="qId" value="#q.id" />
																			<tr>
																				<!-- 问题题干 -->
																				<td class="tdQHeaderL"><s:property value="#q.title" /></td>
																				<td class="tdQHeaderR">
																					编辑问题
																					删除问题
																				</td>
																			</tr>
																			<tr>
																				<td colspan="2" style="text-align: left;color: black;background-color: white">
																					<!-- 定义变量,设置第一大类的题型 -->
																					<s:set var="qt" value="#q.questionType" />
																					<!-- 判断当前题型是否属于第一大类(0,1,2,3) -->
																					<s:if test='#qt lt 4'>
																						<s:iterator value="#q.optionArr">
																							<input type='<s:property value="#qt < 2?'radio':'checkbox'" />'><s:property />
																							<s:if test="#qt == 1 || #qt == 3"><br></s:if>
																						</s:iterator>
																						<!-- 处理other问题 -->
																						<s:if test="#q.other">
																							<input type='<s:property value="#qt < 2?'radio':'checkbox'" />'>其他
																							<!-- 文本框 -->
																							<s:if test="#q.otherStyle == 1">
																								<input type="text">
																							</s:if>
																							<!--  下拉列表 -->
																							<s:elseif test="#q.otherStyle == 2">
																								<select>
																									<s:iterator value="#q.otherSelectOptionArr" >
																										<option><s:property /></option>
																									</s:iterator>
																								</select>
																							</s:elseif>
																						</s:if>
																					</s:if>
																					
																					<!-- 下拉列表 -->
																					<s:if test="#qt == 4">
																						<select>
																							<s:iterator value="#q.optionArr" >
																								<option><s:property /></option>
																							</s:iterator>
																						</select>
																					</s:if>
																					<!-- text -->
																					<s:if test="#qt == 5">
																						<input type="text">
																					</s:if>
																					
																					<!-- 矩阵问题(6,7,8) -->
																					<s:if test="#qt > 5">
																						<table>
																							<!-- 列头 -->
																							<tr>
																								<td></td>
																								<s:iterator value="#q.matrixColTitleArr">
																									<td><s:property /></td>
																								</s:iterator>
																							</tr>
																							<!-- 输出n多行 -->
																							<s:iterator value="#q.matrixRowTitleArr">
																								<tr>
																									<td><s:property /></td>
																									<!-- 套打控件 -->
																									<s:iterator value="#q.matrixColTitleArr">
																										<td>
																											<!-- radio -->
																											<s:if test="#qt == 6"><input type="radio"></s:if>
																											<s:if test="#qt == 7"><input type="checkbox"></s:if>
																											<s:if test="#qt == 8">
																												<select>
																													<s:iterator value="#q.matrixSelectOptionArr">
																														<option><s:property /></option>
																													</s:iterator>
																												</select>
																											</s:if>
																										</td>
																									</s:iterator>
																								</tr>
																							</s:iterator>
																						</table>
																					</s:if>
																				</td>
																			</tr>
																			</s:iterator>
																		</table>
																	</td>
																</tr>
															</table>
														</td>
													</tr>
												</table>
											</td>
										</tr>
										</s:iterator>
									</table>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
	</body>
</html>

上一个页面引用的头部

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<div class="divOuterFrame">
	<div class="divInnerFrame">欢迎使用SurveyDoor调查系统!</div>
</div>
<div class="divWhiteLine"></div>
<div class="divNavigatorOuterFrame">
	<div class="divNavigatorInnerFrame">
		<s:a action="LoginAction_toLoginPage" namespace="/">[首页]</s:a>
		<s:a action="SurveyAction_newSurvey" namespace="/">[新建调查]</s:a>
		<s:a action="SurveyAction_mySurveys" namespace="/">[我的调查]</s:a>
		[参与调查]
		<s:a action="RegAction_toRegPage" namespace="/">[用户注册]</s:a>
		[用户授权管理]
		[角色管理]
		[权限管理]
		[日志管理]
	</div>
</div>
<div class="divWhiteLine"></div>