Struts2的標籤庫大全(案例+用法+解析)

一、通用標籤庫

在這裏插入圖片描述

1、判斷標籤

<s:if>        <s:elseif>            <s:else>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<s:set var="i" value="3" scope="request"></s:set>
	
	<s:if test="#request.i>3">
		i  大於  3
	</s:if>
	
	<s:elseif test="#request.i<3">
		i  小於  3
	</s:elseif>
	
	<s:else>
		i  等於  3
	</s:else>
</body>
</html>

2、遍歷標籤

<s:iterator></s:iterator>
(1)list集合
<s:iterator var="i" value="{'aa','bb','cc'}">
		<s:property value="#i"/>
</s:iterator>
(2)Map集合
<s:iterator var="entry" value="#{'aaa':'111','bbb':'222','ccc':'333' }">
		<s:property value="#entry.key"/>--<s:property value="#entry.value"/>
</s:iterator>
(3)迭代標籤iterator 循環遍歷
<s:iterator var="i" begin="1" end="10" step="1">
		<s:property value="#i"/> 
</s:iterator>

每到第三數字就變爲紅色 status在context當中

<!-- step="5"設置每次加5 -->
	<s:iterator var="i" begin="100" end="300" step="5" status="status">
		<!-- 每到第三數字就變爲紅色 status在context當中 -->
		<s:if test="#status.count % 3 == 0">
			<font color="red"><s:property value="#i"/></font>
		</s:if>
		<s:else>
			<s:property value="#i"/>	
		</s:else>
	</s:iterator>

頁面效果
在這裏插入圖片描述

(4)其他常用的標籤
<s:property/>
<s:debug/>
<s:date/>   在頁面上進行日期的格式化。

二、UI標籤庫(方便的進行數據的回顯)

在這裏插入圖片描述

1、單選按鈕的表單元素類型

傳統:

性別:<input type="radio" name="sex" value="男"/><input type="radio" name="sex" value="女"/>

Struts2 UI標籤

<s:radio list="{'男','女'}" name="sex" label="性別"></s:radio>

效果
在這裏插入圖片描述

2、下拉列表

傳統的下拉列表

籍貫:<select name="city">
			<option value="">-請選擇-<option>
			<option value="北京">-北京-<option>
			<option value="上海">-上海-<option>
			<option value="深圳">-深圳-<option>
			<option value="南京">-南京-<option>
	</select>

Struts2 UI標籤

<s:select list="{'北京','上海','深圳','南京'}" name="city" label="籍貫" headerKey="" headerValue="-請選擇-"></s:select>

3、多選按鈕的表單元素類型

傳統的

愛好:<input type="checkbox" name="hobby" value="basketball">籃球
		<input type="checkbox" name="hobby" value="football">足球
		<input type="checkbox" name="hobby" value="volleyball">排球
		<input type="checkbox" name="hobby" value="pingpang">乒乓球<br/>

Struts2 UI標籤

<s:checkboxlist list="#{'basketball':'籃球','football':'足球','volleyball':'排球','pingpang':'乒乓球'}" name="hobby" label="愛好"></s:checkboxlist>

4、多行文本輸入框

傳統的

介紹:<textarea name="info" rows="2" cols="8">默認值</textarea>

Struts2 UI標籤

<s:textarea name="info" rows="2" cols="8" label="介紹" value="默認值"></s:textarea>

5、隱藏字段

傳統的

<input type="hidden" name="id"/>

Struts2 UI標籤

<s:hidden name="id" value=""></s:hidden>

6、表單和提交

傳統的

<form action="" method="post">
	<input type="submit" value="提交"/>	
</form>

Struts2 UI標籤

<s:form action="" method="post">
	<s:submit value="提交"></s:submit>
</s:form>

三、 傳統表單和UI標籤的表單提交數據的區別和使用

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>UI標籤</h1>
	<h3>傳統的表單</h3>
	<form action="${pageContext.request.contextPath }/uiAction.action" method="post">
	
		<input type="hidden" name="id"/>

		用戶名:<input type="text" name="name" /><br/>
		密碼:<input type="password" name="password"/><br/>
		年齡:<input type="text" name="age"/><br/>
		性別:<input type="radio" name="sex" value="男"/><input type="radio" name="sex" value="女"/><br/>
		籍貫:<select name="city">
			
			<option value="">-請選擇-<option>
			<option value="北京">-北京-<option>
			<option value="上海">-上海-<option>
			<option value="深圳">-深圳-<option>
			<option value="南京">-南京-<option>
		
		</select><br/>
		愛好:<input type="checkbox" name="hobby" value="basketball">籃球
		<input type="checkbox" name="hobby" value="football">足球
		<input type="checkbox" name="hobby" value="volleyball">排球
		<input type="checkbox" name="hobby" value="pingpang">乒乓球<br/>
		介紹:<textarea name="info" rows="2" cols="8"></textarea>
		
		<input type="submit" value="提交"/>
		
	</form>

	<h3>UI標籤的表單:使用默認樣式</h3>
	<s:form action="uiAction" namespace="/" method="post">
		<s:hidden name="id" value=""></s:hidden>
		<s:textfield name="name" label="用戶名"></s:textfield>
		<!--  showPassword="true" 設置密碼回顯  -->
		<s:password name="password" label="密碼" showPassword="true"></s:password>
		<s:textfield name="age" label="年齡"></s:textfield>
		<s:radio list="{'男','女'}" name="sex" label="性別"></s:radio>
		<s:select list="{'北京','上海','深圳','南京'}" name="city" label="籍貫" headerKey="" headerValue="-請選擇-"></s:select>
		<s:checkboxlist list="#{'basketball':'籃球','football':'足球','volleyball':'排球','pingpang':'乒乓球'}" name="hobby" label="愛好"></s:checkboxlist>
		<s:textarea name="info" rows="2" cols="8" label="介紹" value=""></s:textarea>
		<s:submit value="提交"></s:submit>
	</s:form>
	<h3>UI標籤的表單   theme="simple"  設置不使用默認樣式</h3>
	<s:form action="" method="post" theme="simple">
		<s:textfield name="name" label="用戶名"></s:textfield>
		<s:password name="password" label="密碼"></s:password>
	</s:form>
</body>
</html>

在這裏插入圖片描述
測試類UIAction

package com.itzheng.web.action;
import com.opensymphony.xwork2.ActionSupport;
public class UIAction extends ActionSupport {
	private String name;
	private String password;
	private Integer age;
	private String sex;
	private String city;
	private String[] hobby;
	private String info;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public Integer getAge() {
		return age;
	}
	public void setAge(Integer age) {
		this.age = age;
	}
	public String getSex() {
		return sex;
	}
	public void setSex(String sex) {
		this.sex = sex;
	}
	public String getCity() {
		return city;
	}
	public void setCity(String city) {
		this.city = city;
	}
	public String[] getHobby() {
		return hobby;
	}
	public void setHobby(String[] hobby) {
		this.hobby = hobby;
	}
	public String getInfo() {
		return info;
	}
	public void setInfo(String info) {
		this.info = info;
	}
	@Override
	public String execute() throws Exception {
		// TODO Auto-generated method stub
		return NONE;
	}
}

UI表單提交的數據,當數據發送錯誤會回顯原本的數據
在這裏插入圖片描述

值棧當中有數據,對應的數據
在這裏插入圖片描述
UI標籤當中name的屬性和值棧當中屬性一致,就會自動回顯內容

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章