TA的每日心情 | 开心 2021-3-12 23:18 |
---|
签到天数: 2 天 [LV.1]初来乍到
|
表单标签是 struts2的核心标签库的核心,用于输入数据,提交数据。struts2标签库不仅包括常规的HTML控件如输入框,文本域等,还集成了额外的常用控件,例如日期时间控件,联动下拉框,自动填充下拉菜单等。这些常用控件是集成的Dojo框架,是利用javaScript实现的。
1,form标签输出表单
struts2里的form 标签不仅会生成<form>标签,还会生成<table>标签等布局代码。
[color=#990066,strength=3);]formTag.jsp
<struts:form action="addBook" validate="true" namespace="/"> <!-- Form标签,启用标签 -->
<struts:label value="form标签"></struts:label> <!-- 文字标签 -->
<struts:textfield name="name" label="书名"></struts:textfield> <!-- 文本域标签 -->
<struts:textfield name="author" label="作者"></struts:textfield> <!-- 文本域标签 -->
<struts:submit value=" 提交 " align="center"></struts:submit> <!-- 提交按钮 -->
</struts:form>
2,textfield,textarea,file,checkbox,radio标签
这些标签是最基本的表单标签,会生成HTML里的<input>标签。同form标签一样,这些标签页会根据当前主题生成布局代码,如<TR><TD>等,例如:
[color=#990066,strength=3);]inputTag.jsp
<struts:form action="login">
<struts:textfield name="textfield" label="文本域" required="true" tooltip="这是一个文本框"></struts:textfield>
<struts:password name="textarea" label="密码域" tooltip="这是密码域"></struts:password>
<struts:textarea name="textarea" label="文本域" tooltip="这是文本域"></struts:textarea>
<struts:file name="file" label="文件域" tooltip="这是文件域"></struts:file>
<struts:radio list="#{'male':'男','female':'女'}" name="sex" label="单选框" tooltip="这是单选框"></struts:radio>
<struts:checkbox name="hobby" label="是否精通 Struts2" value="true"></struts:checkbox>
<struts:submit value=" 提交 " method="logout" align="center"></struts:submit>
</struts:form>
注:radio标签的list属性必须是Map类型,key为实际值,value为显示值。如果为List类型,会抛出以常规。
运行如图:
3,select,autocomplete标签下拉框
select标签为标准的下拉框,生成HTML里的<select>标签。autocomplete标签为具有自动完成功能的下拉框,能根据所填的内容筛选下拉框的内容。使用autocomplete标签必须使用Ajax主题,因为它用到了DOJO的JavaScript库。这两个标签的用法完全一样:
[color=#990066,strength=3);]autocompleteTag.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="struts"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<struts:head theme="ajax"/>
<body>
<%
List<String> provinceList = new ArrayList<String>();
provinceList.add("北京");
provinceList.add("上海");
provinceList.add("天津");
provinceList.add("重庆");
provinceList.add("河北");
provinceList.add("河南");
provinceList.add("山东");
provinceList.add("山西");
provinceList.add("江苏");
provinceList.add("浙江");
request.setAttribute("provinceList",provinceList);
%>
<struts:form action="login">
<struts:select list="%{#request.provinceList}" name="province" label="请选择省份"></struts:select>
<struts:autocompleter name="province" label="请选择省份" list="%{#request.provinceList}"></struts:autocompleter>
</struts:form>
</body>
</html>
效果如下:
4,使用动态数据的autocomplete标签
上例中下拉框中的数据都是静态数据,所有的数据都会随页面一块发送到浏览器。autocomplete标签还支持Ajax方式获取动态数据,根据填写的内容动态地显示输入提示。如果下拉框的数据很庞大,只能使用动态数据。
[color=#990066,strength=3);]autocompleteAjaxTag.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="struts" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<struts:head theme="ajax"/>
<body>
<struts:url id="dataUrl" value="/autocompleteAjaxData.jsp"></struts:url> <!-- 获取数据的URL -->
请选择国家:
<!-- 指定HREF -->
<struts:autocompleter name="country" theme="ajax" href="%{dataUrl}"
loadOnTextChange="true" loadMinimumCount="0" autoComplete="false"
showDownArrow="true" indicator="indicator"/> <!-- 指定indicator -->
<img id="indicator" src="images/loading.gif"/>
</body>
</html>
href属性指定获取数据的URL。该URL会根据当前输入的内容动态地筛选内容,返回下拉框数据。indicator属性可以为一个图片或者一段文字,autocomplete获取数据时会显示indicator。获取数据的URL代码如下:
[color=#990066,strength=3);]autocompleteAjaxData.jsp
<%
out.clear();
request.setCharacterEncoding("UTF-8");
response.setHeader("ragma","no-cache"); //禁止缓存
response.setHeader("Cache-Control","no-cache"); //禁止缓存
response.setDateHeader("Expires",0);
String[] countries = {"Aland Islands","Albania","Algeria","American Samoa(USA)","Andorra","Angola","Anguilla","Antarctica","Antigua","Antigua and Barbuda",};
String country = request.getParameter("country"); //当前autocomplete已填写的内容
if(country == null)
country = ""; //如果没有填写,当做空字符串
StringBuffer buffer = new StringBuffer(); //StringBuffer
for(int i = 0; i < countries.length; i++){
if(countries.toLowerCase().startsWith(country.toLowerCase())){ // 遍历所有的国家
if(buffer.length() != 0)
buffer.append(",");
buffer.append("['"+countries+"']");//如果包含已输入的字符串则显示
}
}
Thread.sleep(1000); //为演示indicator,让数据延迟1秒钟显示
out.print("["+buffer+"]"); //输出数据
%>
注:autocomplete标签能够接受JSON格式的数据,因此该JSP会把数据以JSON格式输出,例如:[['Andorra'],['Angola'],['Anguilla'],['Antarctica'],['Antigua and Barbuba']]。运行效果如图:
5,checkboxlist标签多选框组
checkboxlist标签为可以多选的多个复选框。如果Action中对应的属性为List类型或者数组类型,JSP中的checkboxlist标签会自动选中多个值,例如:
[color=#990066,strength=3);]checkboxlistTag.jsp
<%
List<String> favouriteList = new ArrayList<String>(); //List对象
favouriteList.add("苹果");
favouriteList.add("橘子");
favouriteList.add("梨");
favouriteList.add("香蕉");
request.setAttribute("favouriteList",favouriteList); //放到request中
%>
<struts:form action="login">
<struts:checkboxlist list="#request.favouriteList" name="favourite" label="最喜欢的水果"></struts:checkboxlist>
</struts:form>
JSP中会显示4个复选框。各个复选框是否被选中取决于Action.Action代码如下:
[color=#990066,strength=3);]CheckboxlistAction.java
@Results([email=value=%7B@Result(name=%22success%22,value=%22/checkboxlistTag.jsp]value={@Result(name="success",value="/checkboxlistTag.jsp[/email]")})
public class CheckboxlistAction {
private List<String> favourite = new ArrayList<String>(); //选中的数据
public String execute(){
favourite.add("苹果");
favourite.add("梨");
return Action.SUCCESS;
}
public List<String> getFavourite() {
return favourite;
}
public void setFavourite(List<String> favourite) {
this.favourite = favourite;
}
}
效果如下:
6,combobox标签复合框
combobox标签用于生成一个组合框(Combo Box)。ComboBox的特点就是可选择可编辑。代码:
[color=#990066,strength=3);]comboboxTag.jsp
<%
List<String> favouriteList = new ArrayList<String>(); //List对象
favouriteList.add("苹果");
favouriteList.add("橘子");
favouriteList.add("梨");
favouriteList.add("香蕉");
request.setAttribute("favouriteList",favouriteList); //放到request中
%>
<struts:form action="login">
<struts:combobox list="#request.favouriteList" name="favourite" label="最喜欢的水果"/>
</struts:form>
7,datetimepicker标签日期选择器
datetimepicker标签是专门输入日期时间的输入框,它自带一个日历,可以指定日历格式。该标签也使用了DOJO框架的Javascript类库。代码如下:
[color=#990066,strength=3);]datetimepickerTag.jsp
<struts:form action="login">
<struts:datetimepicker name="date" displayFormat="yyyy-MM-dd" label="请选择日期"></struts:datetimepicker>
</struts:form>
效果如下:
8,doubleselect标签联动选择框
doubleselect标签为联动下拉框,选择第一个下拉框,第二个下拉框的值会随第一个下拉框的值改变而改变。
[color=#990066,strength=3);]doubleselectTag.jsp
<%
List<String> provinceList = new ArrayList<String>(); //List对象,存放省份
provinceList.add("北京");
provinceList.add("上海");
provinceList.add("天津");
provinceList.add("重庆");
provinceList.add("河北");
provinceList.add("河南");
provinceList.add("山东");
provinceList.add("山西");
provinceList.add("江苏");
provinceList.add("浙江");
request.setAttribute("provinceList",provinceList); //存放到request中
Map<String,List<String>> cityMap = new HashMap<String,List<String>>(); //Map对象
List<String> cityList = new ArrayList<String>(); //添加北京市的城区
cityList.add("东城区");
cityList.add("西城区");
cityList.add("海淀区");
cityList.add("朝阳区");
cityMap.put("北京",cityList);
List<String> cityList1 = new ArrayList<String>();
cityList1.add("青岛");
cityList1.add("济南");
cityList1.add("潍坊");
cityList1.add("烟台");
cityList1.add("淄博");
cityMap.put("山东",cityList1);
request.setAttribute("cityMap",cityMap); //放到request中
%>
<struts:form action="login">
<struts:doubleselect name="province" list="#request.provinceList" doubleName="city" doubleList="#request.cityMap.get(top)" label="请选择省份,市"></struts:doubleselect>
</struts:form>
该标签使用的关键是,list属性(代表一个下拉框)里为集合类型或者数组类型,而doubleList属性(代表第二个下拉框)为Map类型,并且Map的value也为集合类型或者数组类型。
效果如下:
9,optiontransferselect标签
optiontransferselect标签左右各有一个列表,右边的选项可以转到左边,左边的选项也可以转到右边。optiontransferselect标签是利用两个<select>实现的。
[color=#990066,strength=3);]optiontransferselectTag.jsp
<struts:head theme="ajax"/>
<body>
<%
List<String> provinceSelected = new ArrayList<String>(); //List对象,存放省份
provinceSelected.add("北京");
provinceSelected.add("上海");
provinceSelected.add("天津");
provinceSelected.add("重庆");
provinceSelected.add("河北");
provinceSelected.add("河南");
provinceSelected.add("山东");
provinceSelected.add("山西");
provinceSelected.add("江苏");
provinceSelected.add("浙江");
request.setAttribute("provinceSelected",provinceSelected); //存放到request中
List<String> provinceUnselected = new ArrayList<String>(); //没有选中的省份的List
provinceUnselected.add("湖南");
provinceUnselected.add("湖北");
provinceUnselected.add("云南");
provinceUnselected.add("广东");
provinceUnselected.add("广西");
request.setAttribute("provinceUnselected",provinceUnselected);
%>
<struts:form action="login">
<strutsptiontransferselect name="province" list="#request.provinceUnselected" doubleName="city" doubleList="#request.provinceSelected"
leftUpLabel="向上" leftDownLabel="向下" rightDownLabel="向下" rightUpLabel="向上" leftTitle="已经选中的省份" rightTitle="剩余的省份" headerKey=""
headerValue="---请选择省份---"></struts:optiontransferselect>
</struts:form>
效果如下:
10,optgroup标签选项组
<OptGroup>是个标准的HTML标签,用于给<select>选项分组。optgroup标签可生成<OptGroup>标签,例如:
[color=#990033,strength=3);]optiongroupTag.jsp
<struts:head theme="ajax"/>
<body>
<%
request.setAttribute("cityList",new ArrayList<String>(){
{
add("北京");
add("上海");
add("天津");
add("重庆");
}
});
Map provinceMap = new HashMap(); //二级数据放到Map中
provinceMap.put("山东",new HashMap(){
{
put("济南","济南");
put("青岛","青岛");
put("烟台","烟台");
put("淄博","淄博");
put("潍坊","潍坊");
}
});
provinceMap.put("河北",new HashMap<String,String>(){
{
put("石家庄","石家庄");
put("唐山","唐山");
put("疮州","疮州");
put("邯郸","邯郸");
}
});
request.setAttribute("provinceMap",provinceMap);//二级数据放到request中
%>
<struts:form action="login">
<struts:select list="#request.cityList" name="city" label="请选择城市">
<struts:iterator value="#request.provinceMap">
<struts:optgroup label="%{key}" list="%{value}"></struts:optgroup> <!-- list属性只接受Map -->
</struts:iterator>
</struts:select>
</struts:form>
注意:optgroup标签的list属性接受的不是List类型数据,而是接受Map类型数据。
|
|