0
我正在使用Display Tag
庫進行分頁和排序。我還在表格標題旁邊添加了一些圖標圖像(upArrow,downArrow),以便當用戶單擊標題字段對列排序時,圖像將根據訂購標準。最初,圖標不會出現在任何標題列中,但我希望它在我的created date
列中,當頁面加載爲默認時,只是爲了讓用戶知道列已被排序(我不確定該如何實現此目的)。如何在特定的顯示標籤頭上顯示圖像圖標?
一旦用戶點擊一個字段,前一個字段的圖標就會消失並顯示在選定的列上(完成後)。在啓動
如何在頁面加載時在創建的日期列上顯示圖標?
JSP:
<display:table id="data" name="intgList" requestURI="/integration/viewIntegration" class="fieldLabelCell" pagesize="10">
<!-- Setting table properties -->
<display:setProperty name="basic.empty.showtable" value="true"/>
<display:setProperty name="paging.banner.placement" value="top"/>
<display:setProperty name="basic.msg.empty_list_row" value=""/>
<display:setProperty name="paging.banner.group_size" value="2"/>
<display:setProperty name="paging.banner.no_items_found" value=""/>
<display:setProperty name="paging.banner.page.separator" value=" of "/>
<display:setProperty name="paging.banner.first" value='<span class="pagelinks"> |< << | Page {0} <a href="{3}"> | >> </a><a href="{4}">>|</a></span>'/>
<display:setProperty name="paging.banner.last" value='<span class="pagelinks"> <a href="{1}">|< </a> <a href="{2}"> << | Page </a> {0} | >> >| </span>'/>
<display:setProperty name="paging.banner.full" value='<span class="pagelinks"> <a href="{1}">|< </a> <a href="{2}"> << | Page </a> {0}<a href="{3}"> | >> </a><a href="{4}">>| </a></span>'/>
<!-- Displaying columns data -->
<display:column property="lob" title="Line of<br>Business" sortable="true" class="displayColumns" />
<display:column property="insuredName" title="Insured" sortable="true" class="displayColumns"/>
<display:column property="custPhone" title="Customer<br>Phone" sortable="true" class="displayColumns" />
<display:column property="policyNumber" title="Policy #" sortable="true" class="displayColumns" />
<display:column property="createdDate" title="E-Sign<br>Created Date" sortable="true" class="displayColumns" />
<display:column property="custEmail" title="Customer<br>Email" sortable="true" class="displayColumns" />
<display:column title="# of E-Sign Documents" class="displayColumns" >
<c:forEach items="${intgList}" var="list">
<a id="eSignNumDocs" href= "javascript:locateFunc('viewESignDetails', {'url':'<integration:urlAction actionName="/integration/viewDetailsIntegration"><integration:urlParam key="esignIdentifier" value="${list.esignId}"/></integration:urlAction>',
'agencyCode':'${list.agencyCode}',
'policyNumber':'${list.policyNumber}',
'policyState':'${list.policyState}',
'esignIdentifier':'${list.esignId}',
'esignVendorIdentifier':'${list.esignVendorIdentifier}',
'lob':'${list.lob}',
'transId':'${list.transId}',
'customerName':'${list.insuredName}',
'customerPhone':'${list.custPhone}',
'customerEmail':'${list.custEmail}',
'cretedDate':'${list.createdDate}'});">
<c:out value="${list.esignNumDocs}"/>
</a>
</c:forEach>
</display:column>
</display:table>
CSS:
th {
height: 25px;
border: 1px solid #EAEAEA;
}
th.order1 {
background: url("../images/integration/upArrow.gif") no-repeat 30%;
}
th.order2 {
background: url("../images/integration/downArrow.gif") no-repeat 30%;
}