extremecomponents在web中的使用
eXtremeComponents是一系列提供高级显示的开源JSP定制标签。ec是一系列提供高级显示的开源JSP定制标签，当前的包含的组件为eXtremeTable，用于以表形式显示数据。常用的功能包括排序，导出Excel文件。
一、web.xml添加eXtremeComponents的配置
<context-param> <param-name>extremecomponentsMessagesLocation</param-name> <param-value>ApplicationResources</param-value> </context-param> <filter> <filter-name>eXtremeExport</filter-name> <filter-class> org.extremecomponents.table.filter.ExportFilter </filter-class> </filter> <filter-mapping> <filter-name>eXtremeExport</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <taglib> <taglib-uri>extremecomponents</taglib-uri> <taglib-location> /WEB-INF/tlds/extremecomponents.tld </taglib-location> </taglib>二、staticflight.jsp使用 ec实现Excel导出，字段排序
<%@ 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><fmt:message key="flightInfoList.title" /></title>
<%@ taglib uri="extremecomponents" prefix="ec"%>
<link rel="stylesheet" type="text/css" media="all"
href="<c:url value='/styles/extremecomponents.css'/>" />
<link rel="stylesheet" type="text/css" media="all"
href="<c:url value='/styles/layout.css'/>" />
<script src="<c:url value='/scripts/common.js'/>"
language="javascript"></script>
<script src="<c:url value='/scripts/datePicker/WdatePicker.js'/>"
language="javascript"></script>
<script type="text/javascript">
var GB_ROOT_DIR = "./scripts/greybox/";
</script>
<script src="<c:url value="/scripts/greybox/AJS.js"/>"
language="javascript"></script>
<script src="<c:url value="/scripts/greybox/AJS_fx.js"/>"
language="javascript"></script>
<script src="<c:url value="/scripts/greybox/gb_scripts.js"/>"
language="javascript"></script>
<script src="<c:url value="/scripts/city.js"/>" language="javascript"></script>
<link rel="stylesheet" type="text/css" media="all"
href="<c:url value='/scripts/greybox/gb_styles.css'/>" />
<c:set var="depID" value="${user.depID}" />
<script language="javascript">
function exportExcel(){
document.forms.ec.ec_eti.value='ec';
document.forms.ec.ec_ev.value='xls';
document.forms.ec.ec_efn.value='flightCountInfo.xls';
document.forms.ec.setAttribute('action','./staticreport.html?method=exportXLS');
document.forms.ec.setAttribute('method','post');
document.forms.ec.submit();
}
function checkForm()
{
var beginDate = document.getElementById("fltdate").value.trim();
var endDate = document.getElementById("endDate").value.trim();
if(beginDate.length<8)
{
alert("开始时间为必填项");
document.getElementById("fltdate").focus();
return false;
}
if(endDate.length<8)
{
alert("截至时间为必填项");
document.getElementById("endDate").focus();
return false;
}
return true;
}
</script>
</head>
<body leftmargin="0" topmargin="0">
<html:form action="staticreport.html?method=fltstatic"
styleId="flightCountInfoForm" method="post"
onsubmit="return checkForm();">
<table width="100%" height="100%" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td class="home-content-title">
<img src="images/find.png" align="absmiddle">
航班旅客类型统计
</td>
</tr>
<tr>
<td width="100%" height="40" class="home-search-space">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr height="30" class="home-search-space">
<td align="right" nowrap width="8%">
<fmt:message key="flightNum" />
</td>
<td nowrap width="8%">
<html:text property="fltno" styleClass="home-table-inputbox" styleId="fltno"
size="10" maxlength="7" onkeypress="return specialLetter();" />
</td>
<td align="right" nowrap width="10%">
<font color="red">*</font>开始日期:
</td>
<td nowrap width="10%">
<input name="fltdate" id="fltdate" class="home-table-inputbox"
value="<c:out value="${flightCountInfoForm.fltdate}"/>"
onclick="WdatePicker({minDate:'%y-%M-{%d-1000}',maxDate:'%y-%M-{%d}'})" size="11" />
<img src="images/date.gif" width="16" height="15"
onclick="WdatePicker({el:'fltDate',minDate:'%y-%M-{%d-1000}',maxDate:'%y-%M-{%d}'})"
onPicked="$('endDate').onfocus()" />
</td>
<td align="right" nowrap width="10%">
<font color="red">*</font>截至日期:
</td>
<td nowrap width="10%">
<input name="endDate" id="endDate" class="home-table-inputbox"
value="<c:out value="${flightCountInfoForm.endDate}"/>"
onFocus="WdatePicker({minDate:'#F{$dp.$D(\'fltdate\');}',maxDate:'#F{$dp.$D(\'fltdate\',{M:12});}'})"
size="11" />
<img src="images/date.gif" width="16" height="15"
onclick="WdatePicker({el:'endDate',minDate:'#F{$dp.$D(\'fltdate\')}',maxDate:'#F{$dp.$D(\'fltdate\',{M:1});}'})" />
</td>
</tr>
<tr height="30" class="home-search-space">
<td align="right">
始发站：
</td>
<td align="left">
<html:text property="orig" styleId="orig"
styleClass="home-table-inputbox" size="10"
onchange="this.value=this.value.toUpperCase()" />
</td>
<td align="right">
到达站：
</td>
<td align="left">
<html:text property="dest" styleId="dest"
styleClass="home-table-inputbox" size="11"
onchange="this.value=this.value.toUpperCase()" />
</td>
<td>
</td>
<td colspan="3">
<input type="submit" class="home-inputBtn" id="submit1"
name="Submit232" value="<fmt:message key='button.search'/>"
accesskey="S" title="按 Alt+S 提交查询" onClick="doSubmit();" />
<input name="Submit3" type="button" class="home-inputBtn"
value="<fmt:message key='button.reset'/>"
onClick="doReset('fltno','fltdate','endDate','orig','dest');" />
<p:allow pid="103801"><input type='button' class="home-inputBtn" id="exportbutton"
value='<fmt:message key="button.export"/>'
onclick="exportExcel()" /></p:allow>
</td>
</tr>
</table>
</tr>
<tr>
<td class="home-table-topline">
</td>
</tr>
<tr>
<td class="home-table-leftline">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="home-table-tool-content02">
<sasis:page items="${flightList}" />
</td>
</tr>
</html:form>
<tr>
<td align="center" valign="top" class="home-edittable-space">
<ec:table styleClass="table" items="flightList"
action="./staticreport.html?method=fltstatic"
imagePath="./images/table/compact/*.gif" width="60%"
var="results" filterable="false" showPagination="false"
rowsDisplayed="0" showStatusBar="false">
<ec:exportXls fileName="flightCountInfo.xls" />
<ec:row onmouseover="mover(this)" onmouseout="mout(this)">
<ec:column property="rowcounts" title="序号" cell="rowCount"
sortable="false" width="2%">
</ec:column>
<ec:column property="fltno" title="航班号" sortable="false"
width="4%" />
<ec:column property="fltdate" title="航班日期" cell="date"
format="yyMMdd" sortable="true" width="4%" />
<ec:column property="orig" title="起始地" sortable="false"
width="3%" />
<ec:column property="dest" title="目的地" sortable="false"
width="3%" />
<ec:column property="bookcountf" title="F舱订座"
sortable="false" width="3%">
<c:if test="${results.id!=null&&results.bookcountf!=0}">
<c:out value="${results.bookcountf}" />
</c:if>
<c:if test="${results.id==null}">
<c:out value="${results.bookcountf}" />
</c:if>
</ec:column>
<ec:column property="bookcounty" title="Y舱订座"
sortable="false" width="3%">
<c:if test="${results.id!=null&&results.bookcounty!=0}">
<c:out value="${results.bookcounty}" />
</c:if>
<c:if test="${results.id==null}">
<c:out value="${results.bookcounty}" />
</c:if>
</ec:column>
<ec:column property="checkincountf" title="F舱值机"
sortable="false" width="3%" >
<c:if test="${results.id!=null&&results.checkincountf!=0}">
<c:out value="${results.checkincountf}" />
</c:if>
<c:if test="${results.id==null}">
<c:out value="${results.checkincountf}" />
</c:if>
</ec:column>
<ec:column property="checkincounty" title="Y舱值机"
sortable="false" width="3%" >
<c:if test="${results.id!=null&&results.checkincounty!=0}">
<c:out value="${results.checkincounty}" />
</c:if>
<c:if test="${results.id==null}">
<c:out value="${results.checkincounty}" />
</c:if>
</ec:column>
<ec:column property="checkinchildcount" title="儿童值机"
sortable="false" width="3%" >
<c:if test="${results.id!=null&&results.checkinchildcount!=0}">
<c:out value="${results.checkinchildcount}" />
</c:if>
<c:if test="${results.id==null}">
<c:out value="${results.checkinchildcount}" />
</c:if>
</ec:column>
<ec:column property="checkininfantcount" title="婴儿值机 "
sortable="false" width="3%" >
<c:if test="${results.id!=null&&results.checkininfantcount!=0}">
<c:out value="${results.checkininfantcount}" />
</c:if>
<c:if test="${results.id==null}">
<c:out value="${results.checkininfantcount}" />
</c:if>
</ec:column>
<ec:column property="luggagecount" title="行李数"
sortable="false" width="3%" >
<c:if test="${results.id!=null&&results.luggagecount!=0}">
<c:out value="${results.luggagecount}" />
</c:if>
<c:if test="${results.id==null}">
<c:out value="${results.luggagecount}" />
</c:if>
</ec:column>
<ec:column property="luggageweight" title="行李重量"
sortable="false" width="3%" >
<c:if test="${results.id!=null&&results.luggagecount!=0}">
<c:out value="${results.luggageweight}" />
</c:if>
<c:if test="${results.id==null}">
<c:out value="${results.luggageweight}" />
</c:if>
</ec:column>
</ec:row>
</ec:table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="12">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="home-table-bottom-left">
</td>
<td class="home-table-bottom-bg">
</td>
<td class="home-table-bottom-right">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<script>
function doReset(t1,t2,t3,t4,t5){
document.getElementById(t1).value="";
document.getElementById(t2).value="";
document.getElementById(t3).value="";
document.getElementById(t4).value="";
document.getElementById(t5).value="";
}
function doSubmit(){
document.forms.flightInfoForm.submit();
}
</script>
</html>三、页面
