当通过Struts填充表时,如何实现HTML表排序

时间:2013-09-26 05:19:59

标签: javascript html sorting struts2 html-table

我有一个HTML表格,其中元素通过struts填充(<s:iterator>标记)。代码段如下所示。

<table cellspacing="0" border="0" width="100%" class="select_table margin-top10" id="example_table">
        <thead>
            <tr class="oddRows">
                <th width="300px" align="left">Column A</th>
                <th width="150px" align="left">Column B</th>
                <th width="120px"align="left">Column C</th>
                <th align="left">Action</th>
            </tr>
        </thead>
    </table>
<div style="height:200px;" class="data_holder">
    <table class="select_table" cellspacing="0" cellpadding="0" border="0" style="width: 670px;">
        <tbody>
        <s:iterator value="exampleList" status="searchResultStatus">
            <tr id="exampleRow-<s:property value="#searchResultStatus.index"/>" <s:if test="#searchResultStatus.even">class="oddRows"</s:if> >
                <td id="sName<s:property value="#searchResultStatus.index"/>" width="295px"><span id="scheduleName<s:property value="#searchResultStatus.index"/>" class="ellipsis35" title="<s:property value="exampleName"/>"><s:property value="exampleName"/></span></td>
                <td id="sType<s:property value="#searchResultStatus.index"/>" width="150px"><span id="sType<s:property value="#searchResultStatus.index"/>"><s:property  value="exampleType" /></span></td>
                <td id="sLevel<s:property value="#searchResultStatus.index"/>"><span id="sLevel<s:property value="#searchResultStatus.index"/>"><s:property  value="exampleLevel" /></span></td>
                <td width="10%"><div title="Click to select" id="select-contact-<s:property value="#searchResultStatus.index"/>" ><img  id="select-contact-<s:property value="#searchResultStatus.index"/>" src="../images/popup-select.gif"></div></td>
            </tr>
        </s:iterator>
        </tbody>
    </table>

如何在此表上实现排序?请帮忙!

1 个答案:

答案 0 :(得分:1)

您可以使用struts2 s:sort标记来执行此操作。

<s:sort comparator="your.impl.of.comparator" source="exampleList">
    <s:iterator status="searchResultStatus">
        <tr id="exampleRow-<s:property value="#searchResultStatus.index"/>" <s:if test="#searchResultStatus.even">class="oddRows"</s:if> >
            <td id="sName<s:property value="#searchResultStatus.index"/>" width="295px"><span id="scheduleName<s:property value="#searchResultStatus.index"/>" class="ellipsis35" title="<s:property value="exampleName"/>"><s:property value="exampleName"/></span></td>
            <td id="sType<s:property value="#searchResultStatus.index"/>" width="150px"><span id="sType<s:property value="#searchResultStatus.index"/>"><s:property  value="exampleType" /></span></td>
            <td id="sLevel<s:property value="#searchResultStatus.index"/>"><span id="sLevel<s:property value="#searchResultStatus.index"/>"><s:property  value="exampleLevel" /></span></td>
            <td width="10%"><div title="Click to select" id="select-contact-<s:property value="#searchResultStatus.index"/>" ><img  id="select-contact-<s:property value="#searchResultStatus.index"/>" src="../images/popup-select.gif"></div></td>
        </tr>
    </s:iterator>
</s:sort>

your.impl.of.comparator java.util.Comparator 的实现