Question

我正在使用Display Tag库进行分页和排序。我还在表头旁边添加了一些图标图像（upArrow，downArrow），以便当用户点击标题字段对列进行排序时将根据订购标准显示。最初，该图标不会出现在任何标题列中，但我希望它在我的created date列中，当页面加载为默认时只是为了让用户知道列已经排序（我不知道如何我可以做到这一点）。

一旦用户点击一个字段，前一个字段的图标就会消失并显示在所选列上（完成后）。

启动时的列（没有箭头图标，但我需要在创建日期列中显示它）

用户点击E-Sign 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%;
}

Answer 1

这就是我使用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%;
}

如何在特定的显示标签标题上显示图像图标？

1 个答案: