jquery - Flash PDF 按钮在多个 jQuery 选项卡中的 DataTables TableTools 中不起作用

Question

我正在使用DataTables，TableTools显示2个表。我正在使用Easy Tabs jQuery plug-in对于我的菜单，我在不同的选项卡上显示 2 个表格。由于按钮的元素是 display: none 并且因此没有高度/宽度，因此 Flash 按钮无法正确调整大小，并且您无法单击 0x0 元素。

我需要使用TableTools fnResizeButtons()当选项卡可见时调整按钮大小的方法。

选项卡 (div) 通过 CSS 隐藏:

#tabcontent2, #tabcontent3, #tabcontent4,{ 
    display: none;}

这是我的 fnResizeButtons 脚本并初始化 DataTables 和 TableTools:

/**Begin script to resize buttons when div made visible *******************/ 
$("#tabcontent1, #tabcontent2").tabs( {
"show": function(event, ui) {
   var jqTable = $('table.display', ui.panel);
   if ( jqTable.length > 0 ) {
       var oTableTools = TableTools.fnGetInstance( jqTable[0] );
       if ( oTableTools != null && oTableTools.fnResizeRequired() ){
           /* A resize of TableTools' buttons and DataTables' 
                        * columns is only required on the
            * first visible draw of the table
            */
           jqTable.dataTable().fnAdjustColumnSizing();
           oTableTools.fnResizeButtons();
       } //end if
   } //end 
} //end "show": function(event, ui) {
} ); //end $("#tabcontent1, #tabcontent2").tabs( {
} ); //end $(document).ready(function()

/**Begin Initialisation oTable**************/
var oTable = {};               
$(document).ready( function () {
oTable = $('#claims').dataTable( {
"oLanguage": {
    "sSearch": "Search all columns:"
}, //end <a href="/ref#oLanguage">oLanguage</a>                 
"sPaginationType": "full_numbers",

// initialize Table Tools
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
    // setting SWF path
    "sSwfPath": ["swf/copy_csv_xls_pdf.swf"],
    // buttons
    "aButtons": [                                             
                    {   "sExtends":    "copy",
                         "bFooter": false
                    }, // end sExtends
                    {   "sExtends":    "print",
                         "bFooter": false
                    }, // end sExtends
                    {   "sExtends":    "csv",
                         "bFooter": false
                    }, // end sExtends
                    {   "sExtends":    "xls",
                         "bFooter": false
                    }, // end sExtends
                    {   "sExtends":    "pdf",
                         "bFooter": false,
                         "sPdfOrientation": "landscape"
                    } // end sExtends
    ] //end aButtons                                      
} //end oTableTools
} ); //end #example .dataTable
} ); //end $(document).ready(function()


/**Begin Initialisation froi table****************************/            
var froiTable = {};
$(document).ready( function () {
froiTable = $('#froi').dataTable( {
"bPaginate": false,
"bFilter": false,
"bSort": false,             

// initialize Table Tools
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
    // setting SWF path
    "sSwfPath": ["swf/copy_csv_xls_pdf.swf"],
    // buttons
    "aButtons": [                                             
                        "print",
                        "pdf"
    ] //end aButtons                                      
} //end oTableTools                                  
} ); //end #froi .dataTable
} ); //end $(document).ready(function() 

这是我的菜单和 div 代码:

    <div id="tabs" class="menu"> <!--Start menu -->
<ul>
<li><a href="#" onmouseover="easytabs('1', '1');"   onfocus="easytabs('1', '1');"   onclick="return false;"  title="" id="tablink1" >Tabcontent 1</a></li>
<li><a href="#" onmouseover="easytabs('1', '2');"   onfocus="easytabs('1', '2');"   onclick="return false;"  title="" id="tablink2" >Tabcontent 2</a></li>
<li><a href="#" onmouseover="easytabs('1', '3');"   onfocus="easytabs('1', '3');"   onclick="return false;"  title="" id="tablink3">Tabcontent 3</a></li>
<li><a href="#" onmouseover="easytabs('1', '4');"   onfocus="easytabs('1', '4');"   onclick="return false;"  title="" id="tablink4" >Tabcontent 4</a></li>         
</ul>
</div> <!--End menu -->


<div id="tabcontent1">

            <!--Code for Table goes here -->

</div> <!--End Tabcontent 1-->


<div id="tabcontent2">

            <!--Code for Table goes here -->

</div><!--End Tabcontent 2 -->


<div id="tabcontent3">

</div><!--End Tabcontent 3-->


<div id="tabcontent4">

</div><!--End Tabcontent 4-->

我相信我的问题在于当 div 可见时调整按钮大小的脚本(fnResizeButtons 脚本)。

我错过了什么？

Answer 1

已解决!!!!问题出在 ZeroClipoard.js 的 getDOMObjectPosition 中。这试图确定 Flash 电影所附加的元素的位置和尺寸。问题是使用的 .width 和 .offsetWidth 不适用于不可见元素。更改函数以检查可见性。如果不可见，则将元素克隆到窗口外可见的 200px 临时 div 中，然后对克隆进行尺寸检索，然后销毁临时 div 和克隆元素。解决方案在这里:在 DataTables 论坛上。

getDOMObjectPosition: function(obj) {

   var info = Object();

   // get absolute coordinates for dom element
   if ($(obj).is(":visible")){ //obj.widht and obj.offsetWidth only work on visible elements
       info = {
           left: 0,
           top: 0,
           width: obj.width ? obj.width : obj.offsetWidth,
           height: obj.height ? obj.height : obj.offsetHeight
       };
   } else {
       //clone the object into a div outside of the window
       var tempDiv = $('<div id="__ZeroClipBoard_Object_Temp" style=\"position:absolute; left:-2000px\"></div>');
       var objClone = $(obj).clone();
       objClone.appendTo(tempDiv).appendTo($('body'));
       //get the info needed
       info = {
           left: 0,
           top: 0,
           width: objClone.width ? objClone.width : objClone.offsetWidth,
           height: objClone.height ? objClone.height : objClone.offsetHeight
       };
       //destroy the temporary objects
       objClone.remove();
       tempDiv.remove();

   }

   if ( obj.style.width != "" )
       info.width = obj.style.width.replace("px","");

   if ( obj.style.height != "" )
       info.height = obj.style.height.replace("px","");

   while (obj) {
       info.left += obj.offsetLeft;
       info.top += obj.offsetTop;
       obj = obj.offsetParent;
   }
   return info; 
   };

这解决了问题，我不相信这是解决问题的正确方法，但它有效......