jQuery EasyUI是一組基於jQuery的UI插件集合體，而jQuery EasyUI的目標就是幫助web開發者更輕鬆的打造出功能豐富並且美觀的UI界面。開發者不需要編寫複雜的javascript，也不需要對css樣式有深入的瞭解，開發者需要了解的只有一些簡單的html標籤。
一、所需資源
二、psgInfoReport.jsp中添加表單驗證
<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>旅客信息統計</title>
<link href="<c:url value='/styles/easyui.css'/>" type="text/css" rel="stylesheet">
<link href="<c:url value='/styles/icon.css'/>" type="text/css" rel="stylesheet">
<script src="<c:url value='/scripts/common.js'/>"></script>
<script src="<c:url value='/scripts/jquery.js'/>"></script>
<script src="<c:url value='/scripts/jquery.easyui.min.js'/>"></script>
<script src="<c:url value='/scripts/easyui-lang-zh_CN.js'/>"></script>
<script src="<c:url value='/scripts/datePicker/WdatePicker.js'/>" language="javascript"></script>
<script language="JavaScript" type="text/JavaScript">
//導出
var exportExcel = function(){
if( $('#psgInfoSearchForm').form('validate')){
//驗證通過
}else{
return false;
}
}
</script>
</head>
<body leftmargin="0" topmargin="0">
<%@include file="/common/loading.jsp"%>
<html:form action="psgInfoSearch.html?method=psgInfoView" method="post" styleId="psgInfoSearchForm">
<input type="hidden" id='export'/>
<table width="100%" height="100%" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td class="home-content-title">
<img src="images/find.png" align="absmiddle" />
旅客信息統計<font color="red">(起止時間段不能超過5天)</font>
</td>
</tr>
<tr>
<td height="30" class="home-search-space">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="30" class="home-search-space">
<td align="right">
航班號：
</td>
<td align="left">
<input type="text" id="flt_num" value="<c:out value="${psgInfoSearchForm.flt_num}"/>" name="flt_num" class="home-table-inputbox" size="12" maxlength="9"
οnchange="this.value=this.value.toUpperCase()" />
</td>
<td align="right" nowrap width="10%">
<font color="red">*</font>起始日期：
</td>
<td nowrap width="10%">
<input name="startDate" id="startDate"
class="easyui-validatebox"
value="<c:out value="${psgInfoSearchForm.startDate}"/>"
onPicked="$('endDate').onfocus();document.getElementById('endDate').value=this.value;"
οnclick="WdatePicker({maxDate:'%y-%M-{%d}'})" size="11" required="true" missingMessage="起始日期爲必填項"/>
<img src="images/date.gif" width="16" height="15"
οnclick="WdatePicker({el:'startDate',maxDate:'%y-%M-{%d}'})" />
</td>
<td align="right" nowrap width="10%">
<font color="red">*</font>截止日期：
</td>
<td nowrap width="10%">
<input name="endDate" id="endDate" class="easyui-validatebox"
value="<c:out value="${psgInfoSearchForm.endDate}" />"
οnclick="WdatePicker({minDate:'#F{$dp.$D(\'startDate\')}',maxDate:'#F{$dp.$D(\'startDate\',{M:12});}'})" size="11" required="true" missingMessage="截止日期爲必填項"/>
<img src="images/date.gif" width="16" height="15"
οnclick="WdatePicker({el:'endDate',minDate:'#F{$dp.$D(\'startDate\')}',maxDate:'#F{$dp.$D(\'startDate\',{M:12});}'})" />
</td>
</tr>
<tr height="30" class="home-search-space">
<td align="right">
始發站：
</td>
<td align="left">
<input type="text" id="orig" name="orig" value="<c:out value="${psgInfoSearchForm.orig}" />" class="home-table-inputbox" size="12" maxlength="9"
οnchange="this.value=this.value.toUpperCase()" />
</td>
<td align="right">
目的站:
</td>
<td align="left">
<input type="text" id="dest" name="dest" value="<c:out value="${psgInfoSearchForm.dest}" />" class="home-table-inputbox" size="12" maxlength="9"
οnchange="this.value=this.value.toUpperCase()" />
</td>
<td align=right width="14%">狀態:</td>
<td width="15%">
<html:select name="psgInfoSearchForm" property="status" size="1" styleId="status">
<html:option value="">全部</html:option>
<html:option value="AC">已值機</html:option>
<html:option value="NA">未值機</html:option>
</html:select>
</td>
<td >
<input name="Submit2" id="queryId" type="button" class="home-inputBtn" value="<fmt:message key="button.search"/>" οnclick="search()" accesskey="S" title="按 Alt+S 提交查詢">
<input type="button" id="resetId" class="home-inputBtn" name="Submit22" value="<fmt:message key="button.reset"/>" onClick="doReset()">
<p:allow pid="132005"><input type='button' id="exprotId" class="home-inputBtn" value='<fmt:message key="button.export"/>' οnclick="exportExcel()" /></p:allow>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>三、效果圖
