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

How do I implement HTML table sorting when table is populated via Struts

本文关键字:实现 排序 HTML 何实现 Struts 填充      更新时间:2023-09-26

我有一个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>

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

你可以使用 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.comparatorjava.util.Comparator 的实现