Question

我正在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',
        ]

它产生以下下拉菜单： enter image description here

菜单项不起作用，期望选择/取消选择。当我不使用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

Answer 1

问题在于DIV的定位错误，其中包含了一小部分闪光灯，这使得它成为魔术。

当您将位置属性设置为absolute的DIV放置在LI内时，您必须保证，LI的位置设置为relative

我通过这个CSS使它工作：

.DTTT_button_copy, .DTTT_button_xls, .DTTT_button_pdf,.DTTT_button_csv {
    position: relative
}

Answer 2

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

前

ZeroClipboard_TableToolsMovie_1
ZeroClipboard_TableToolsMovie_2
ZeroClipboard_TableToolsMovie_3

因此，根据您的复制地点＆＃39;按钮出现在序列中。您可以添加以下css样式。

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

这将转换非Flash＆＃39;副本＆＃39;数据表隐藏后立即按钮到基于闪烁的按钮。从而使其无需点击“导出”即可正常工作。（收藏按钮）

Answer 3

尝试添加另一个类：

闪光相对

相对位置：

r.getAs[Array[Double]](70)

然后用按钮创建数据表：

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

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

并在显示下拉列表时尝试使用此buttons: { buttons: [ {extend: 'excel',className: 'dropdown-item flash-relative'}, {extend: 'pdf',className: 'dropdown-item flash-relative'} ] }：

buttons.resize()

@NullPointer：尝试停止关闭下拉列表：

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

我有$('#dropdown_ID a.flash-relative').on("click", function (e) { e.stopPropagation(); e.preventDefault(); });而不是<a>元素

在下拉菜单集合中使用时，jsdatatable TableTools按钮不起作用

3 个答案: