1

我正在TableTools使用JS Datatable

    tableTools:
        sSwfPath: "/static/external/datatables/copy_csv_xls_pdf.swf"
        sRowSelect: 'multi'
        sSelectedClass: 'row_selected'
        bHeader: true
        aButtons: [
            {
                sExtends: 'collection',
                sButtonText: 'Tools <span class="caret" />',
                aButtons: [
                    {
                        sExtends: 'copy'
                        mColumns: 'visible'
                        bSelectedOnly: true
                    },
                    {
                        sExtends: 'xls',
                        sFileName: '*.xls',
                        mColumns: 'visible',
                        bSelectedOnly: true
                    },
                    {
                        sExtends: 'pdf'
                        mColumns: 'visible'
                        bSelectedOnly: true
                    },
                    {
                        sExtends: 'csv'
                        mColumns: 'visible'
                        bSelectedOnly: true
                    },
                    'select_all',
                    'select_none'
                ]
            }
            'print',
        ]

它产生以下下拉菜单： 在此处输入图像描述

菜单项不工作除了选择/取消选择。当我不使用collection并且只在一行中显示按钮时，一切都很好。

扩展集合时应该如何正确定义按钮？

为下拉菜单生成的 HTML 如下所示：

<ul class="DTTT_dropdown dropdown-menu" style="display: block; position: absolute; left: 551.3125px; top: 553px; opacity: 1;">
   <li class=" DTTT_button_copy" id="ToolTables_agencies_1" tabindex="0" aria-controls="agencies">
      <a>Copy</a>
      <div style="position: absolute; left: 0px; top: 0px; width: 160px; height: 26px; z-index: 99;">
         <embed id="ZeroClipboard_TableToolsMovie_1" src="/static/external/datatables/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="160" height="26" name="ZeroClipboard_TableToolsMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&amp;width=0&amp;height=0" wmode="transparent">
      </div>
   </li>
   <li class=" DTTT_button_xls" id="ToolTables_agencies_2" tabindex="0" aria-controls="agencies">
      <a>Excel</a>
      <div style="position: absolute; left: 0px; top: 0px; width: 160px; height: 26px; z-index: 99;">
         <embed id="ZeroClipboard_TableToolsMovie_2" src="/static/external/datatables/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="160" height="26" name="ZeroClipboard_TableToolsMovie_2" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&amp;width=0&amp;height=0" wmode="transparent">
      </div>
   </li>
   <li class=" DTTT_button_pdf" id="ToolTables_agencies_3" tabindex="0" aria-controls="agencies">
      <a>PDF</a>
      <div style="position: absolute; left: 0px; top: 0px; width: 160px; height: 26px; z-index: 99;">
         <embed id="ZeroClipboard_TableToolsMovie_3" src="/static/external/datatables/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="160" height="26" name="ZeroClipboard_TableToolsMovie_3" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=3&amp;width=0&amp;height=0" wmode="transparent">
      </div>
   </li>
   <li class="DTTT_button_csv" id="ToolTables_agencies_4" tabindex="0" aria-controls="agencies">
      <a>CSV</a>
      <div style="position: absolute; left: 0px; top: 0px; width: 160px; height: 26px; z-index: 99;">
         <embed id="ZeroClipboard_TableToolsMovie_4" src="/static/external/datatables/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="160" height="26" name="ZeroClipboard_TableToolsMovie_4" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=4&amp;width=0&amp;height=0" wmode="transparent">
      </div>
   </li>
   <li class="DTTT_button_text" id="ToolTables_agencies_5" tabindex="0" aria-controls="agencies"><a>Select all</a></li>
   <li class="DTTT_button_text disabled" id="ToolTables_agencies_6" tabindex="0" aria-controls="agencies"><a>Deselect all</a></li>
</ul>

此外，它创建带有背景的 div：

<div class="DTTT_collection_background" style="position: absolute; left: 0px; top: 0px; height: 936px; width: 1054px; opacity: 0.25;"></div>

在 CSS 我设置z-index：

ul.DTTT_dropdown.dropdown-menu
    z-index: 9998
    &li
        z-index: 9999
4

3 回答 3

3

问题在于 DIV 的错误定位，其中包含这片神奇的闪光。

当您将位置属性设置为absolute内部 LI 的 DIV 放置时，您必须隔离，该 LI 的位置设置为relative

我通过这段 CSS 让它工作：

.DTTT_button_copy, .DTTT_button_xls, .DTTT_button_pdf,.DTTT_button_csv {
    position: relative
}
于 2014-09-09T11:46:02.560 回答
0

另一种解决方案是基于按钮具有“id”属性的顺序命名这一事实。

前任 

ZeroClipboard_TableToolsMovie_1
ZeroClipboard_TableToolsMovie_2
ZeroClipboard_TableToolsMovie_3

因此，根据您的“复制”按钮在序列中出现的位置。您可以添加以下 css 样式。

#ZeroClipboard_TableToolsMovie_3 { height: 29px;  width: 43px; }

这将在数​​据表隐藏后立即将非闪存“复制”按钮转换为基于闪存的按钮。从而使其工作而无需单击“导出”（收藏按钮）

于 2015-03-04T00:26:28.040 回答
0

尝试添加另一个类：

闪存相关

相对位置：

<style>
        .flash-relative{
            position: relative;
        }
    </style>

然后使用按钮创建数据表：

buttons: {
  buttons: [
            {extend: 'excel',className: 'dropdown-item flash-relative'},
            {extend: 'pdf',className: 'dropdown-item flash-relative'}
           ]
         }

dropdown-item ：仅用于下拉引导样式

buttons.resize()并在显示下拉菜单时尝试使用它：

$("#dropdown_ID").on("shown.bs.dropdown", function (event) { $.fn.dataTable.tables({api: true}).buttons.resize(); });

@NullPointer：尝试阻止下拉菜单关闭：

$('#dropdown_ID a.flash-relative').on("click", function (e) { e.stopPropagation(); e.preventDefault(); });

我<a>没有<li>元素

于 2017-06-28T15:06:42.653 回答