显示标签导出选项横幅 - 放置在表格顶部

Question

我正在使用 displaytag 标签库，到目前为止它的效果非常好。 但是，我没有看到将导出横幅放在表格顶部而不是底部的简单选项或方法。 如何才能做到这一点？

谢谢， 罗伊

Answer 1

我和你有同样的问题。
我使用 jquery 解决了这样的问题：

我的 displaytag.properties ：

export.banner=<div id="export" class="exportlinks">Exporter : {0}</div>

我在 JSP 中使用 DisplayTag 创建的表：

<div id="datagrid">
    <div class="datagrid">
        <display:table name="sessionScope.resultats" sort="list" defaultsort="2" pagesize="<%=nombreLignes %>" export="true">
            <display:column property="code" title="<%=codeLabel %>" sortable="true" href="javascript:edition(document.forms[0], '#')" paramId="code" paramProperty="code" style="width:20%;" />
            <display:column property="nom" title="<%=nomLabel %>" sortable="true" href="javascript:edition(document.forms[0], '#')" paramId="code" paramProperty="code" style="width:80%;" />
            <display:setProperty name="export.pdf" value="true" />
            <display:setProperty name="export.csv.filename" value="${nomExport }.csv"/>
            <display:setProperty name="export.pdf.filename" value="${nomExport }.pdf"/>
        </display:table>
    </div>
</div>

jquery 中的函数：

$(function()
{
    var export1 = document.getElementById('export');
    if(export1 != null)
    {
        // 2 duplications
        var export2 = export1.cloneNode(true);
        var export3 = export1.cloneNode(true);
        var datagrid = document.getElementById('datagrid');

        // Placement on top 
        datagrid.insertBefore(export2, datagrid.firstChild);

        // Placement on bottom
        datagrid.parentNode.insertBefore(export3, datagrid.nextSibling);

        // Delete node generated by DisplayTag
        export1.parentNode.removeChild(export1);
    }
});

结果：

Answer 2

请添加以下代码：

$(function()
  {

  // Placement on top.#row is display tag id
  $( ".exportlinks" ).insertBefore( "#row" );

});

Answer 3

我们已经能够使用一些针对“exportTypes”id 的 css 将导出菜单放置在顶部。 我不是我们团队中做这件事的前端人员，所以可能还有更多，但看起来你可以做类似的事情：

div.framed-outer.guttered #exportTypes {
    *top: -10px;
}

其中framed-outer和guttered只是我们使用的桌子周围的一些div id。

在 displaytag.properties 中，我们定义了：

export.banner=<div id="exportTypes"><span class="label">Export: </span>{0}</div>

这可能不是全部，但我可以看到在我们的项目中可以做到这一点。 希望这个对你有帮助。

Answer 4

我知道这已经有 10 年历史了，但为了以防万一有人去寻找一个简单而有效的答案，以下内容对我有用。 我注意到 displaytag 将所有内容都放在 TBODY 中，因此我决定尝试将 Export 包装在 THEAD 中，果然它有效。

我将以下内容放入 displaytag.properties 文件中：

export.banner=<thead><tr><td><div class="exportlinks">Download: {0}</div></td></tr></thead>