2017-05-19 146 views
0

我正在使用Display Tag庫進行分頁和排序。我還在表格標題旁邊添加了一些圖標圖像(upArrow,downArrow),以便當用戶單擊標題字段對列排序時,圖像將根據訂購標準。最初,圖標不會出現在任何標題列中,但我希望它在我的created date列中,當頁面加載爲默認時,只是爲了讓用戶知道列已被排序(我不確定該如何實現此目的)。如何在特定的顯示標籤頭上顯示圖像圖標?

一旦用戶點擊一個字段,前一個字段的圖標就會消失並顯示在選定的列上(完成後)。在啓動

柱(沒有箭頭的圖標,但我需要證明它的創建日期列) enter image description here

在E-登錄創建日期列用戶點擊後(出現圖標) enter image description here

如何在頁面加載時在創建的日期列上顯示圖標?

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%; 
} 

回答

0

這是我如何使用CSS做它,它是工作完全正常。

th { 
height: 25px; 
border: 1px solid #EAEAEA; 
} 

th:nth-child(5) { 
background: url("../images/integration/downArrow.gif") no-repeat 30%; 
} 

th.order1 { 
background: url("../images/integration/upArrow.gif") no-repeat 30%; 
} 

th.order2 { 
background: url("../images/integration/downArrow.gif") no-repeat 30%; 
}