Struts UI标签的使用

先来看一下日期控件

html5标签中其实已经有日期的类型，用<input type="date">便可调用。

struts里面也自带了日期控件，其使用步骤为：

1. 导入其相关的jar包，我导的是struts2-dojo-plugin-2.2.1.1 ，然后在jsp中导入struts标签库。

<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>

2.使用标签

<sx:datetimepicker name="birthday"></sx:datetimepicker>

3.在head中定义其样式

<sx:head/>

最终效果：               但该插件有个bug,8月后会出现乱码。

所以用到日期插件时还有更好的选择，datapicker，用法更简单，下载好该插件，在script中导入即可

<script type="text/javascript" src="datepicker/WdatePicker.js"></script>

<input type="text" class="Wdate"/>

效果也是很不错的

再看一下struts中自带的表单标签，它自带了样式和效果，如果不想用它的样式，把标签的theme属性改为simple即可。

用它表单的标签好处在于像复选框之类的标签自带list属性，方便传一个list进去，该list可以用json从后台传过来，也可以直接在页面上用ognl表达式构造一个list。

在联系中我写了段ajax，用Struts自带的传json数据的方法，配置好action的xml文件从后台传了一个list过来，当然传json也可以直接导入json的jar包用JSONArray转换成json格式数据传过来，代码如下，action和xml配置文件就不粘了。

代码如下

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>

   <%@taglib prefix="s" uri="/struts-tags" %>

 <%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<sx:head/>
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="datepicker/WdatePicker.js"></script>
<script type="text/javascript">
 $(function(){
     $.get("/Struts/ognl",function(data){
         for(var i=0;i<data.length;i++){
             var optionstr='<option>'+data[i].username+'</option>';
             $("#sel").append(optionstr);
         }
     },'json');

 });
</script>
</head>
<body>
<%-- 日期：<sx:datetimepicker name="birthday"></sx:datetimepicker>
<hr> --%>
日期：<input type="text" class="Wdate" onclick="WdatePicker()">
<hr>
<s:form action="ognl">
<s:textfield name="username" label="用户名"></s:textfield>
<s:textfield name="password" label="密码"></s:textfield>
<s:checkboxlist name="hobby" label="爱好" list="{'basketball','valleyball','ping-pang','swiming'}"></s:checkboxlist>
<s:radio list="#{'1':'男','2':'女'}" name="sex" label="性别"></s:radio>
<select id="sel">
</select>

</s:form>
<form action="upload" method="post" enctype="multipart/form-data">

   <input type="file" name="upload">
   <input type="submit" value="上传">

</form>
</body>
</html>