通过 Struts 填充表格时如何实现 HTML 表格排序答案

【问题标题】：How do I implement HTML table sorting when table is populated via Struts通过 Struts 填充表格时如何实现 HTML 表格排序
【发布时间】：2016-03-15 03:31:01
【问题描述】：

我有一个 HTML 表格，其中的元素通过 struts（<s:iterator> 标签）填充。代码sn-p如下所示。

<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 JSON 插件的 jQuery 数据网格，例如参见 trirand.com/blog/jqgrid/jqgrid.html 或使用类似 [jmesa] 的库：code.google.com/p/jmesa 或 [displaytag]：displaytag.org/1.2
我想使用 HTML 表格本身。与上面给出的格式相同。虽然显示标签是一个选项，但我不想使用它。
在上面的代码中你甚至没有尝试编写代码。为了尽快获得更好的帮助，请发布SSCCE

标签： javascript html sorting struts2 html-table

【解决方案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

的实现

【讨论】：