javascript - 如何在 Iframe 内水平滚动表格

Question

我的 aspx 页面中有一个 iframe。此框架包含一个包含动态列数的 html 表。

我不想在 iframe 中显示滚动，所以我在表格中使用了滚动，但是这种滚动没有显示表格的完整列。

这是html代码

Main Page Code
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>


<style type="text/css">
    #mNav
    {
        background: url("../Content/bg_mNav.jpg") repeat-x scroll 0 100% transparent;
        border-bottom: 1px solid #025776;
        position: relative;
        z-index: 999;
    }

    #admxTitle
    {
        background: url("../Content/dashboard_title.png") no-repeat scroll 0 100% transparent;
        position: relative;
        z-index: 999;
    }
</style>

$(document).ready(function () {

   // alert(screen.width+"X"+screen.height);

    //Populating Report list tree 
    var reportDir = <%=ViewData["ReportDirlist"] %>;
    if(reportDir){
       $('#reporting').empty();
       readDir(reportDir,1,'reporting','reporting');
    }
    $("#reporting").treeview();

    //Populating Analytics list tree 
    var analyticsDir = <%=ViewData["AnalyticsDirlist"] %>;
    if(analyticsDir){
       $('#analytics').empty();
       readDir(analyticsDir,1,'analytics','analytics');
    }
    $("#analytics").treeview();


    //Intiontiate 
    $("#tabs").tabs();
    // alert(json);
    //by default trigger click on first node
    //$('#node-1 span:first').trigger('click')

});



function readDir(obj,level,parentid,container) {

    var tagObj='' ;
    var filename;
    //console.log('DIRECTORY:'+obj.name + ':' + obj.state);

    var file = obj.file;
    if(file){
        if(file.length)
         {
            for (i = 0; i < file.length; i++) {

                tempid=parentid+'-F'+(i+1);
                filename=(file[i].name).replace(/-/gi, " ");
                // tagObj='<li id="li'+tempid+'" ><span class="file" onclick="clickHandler(\''+file[i].name+'\',\''+file[i].data+'\',\'li'+tempid+'\')">'+filename+'</span></li>'
                tagObj='<li id="li'+tempid+'" ><span class="file" onclick="clickHandler(\''+container+'\',\''+file[i].name+'\',\''+file[i].data+'\',\'li'+tempid+'\')">'+filename+'</span></li>'


                if( parentid==container)
                $('#'+container).append(tagObj);
                else
                $('#ul'+parentid).append(tagObj);


                //console.log('FILE :' + file[i].name + ':' + file[i].data);
            }
        }else{

                tempid=parentid+'-F1';
                filename=(file.name).replace(/-/gi, " ");
                tagObj='<li id="li'+tempid+'" ><span class="file" onclick="clickHandler(\''+container+'\',\''+file.name+'\',\''+file.data+'\',\'li'+tempid+'\')">'+filename+'</span></li>'

                if( parentid==container)
                $('#'+container).append(tagObj);
                else
                $('#ul'+parentid).append(tagObj);

            //console.log('FILE :' + file.name + ':' + file.data);
        }
    }


    var dir=obj.directory;
    if(dir){

        if(dir.length)
         {


           for (j = 0; j < dir.length; j++) {

                tempid=parentid+'-D'+(j+1);

                if(dir[j].state=='close')
                tagObj='<li id="li'+tempid+'" class="closed"><span class="folder">'+dir[j].name+'</span></li>'
                else
                tagObj='<li id="li'+tempid+'"><span class="folder">'+dir[j].name+'</span></li>'

                if( parentid==container)
                $('#'+container).append(tagObj);
                else
                $('#ul'+parentid).append(tagObj);

                $("#li"+tempid).append('<ul id="ul'+tempid+'"></ul>');

                readDir(dir[j],(level+1),tempid,container);
            }


        }else{


             tempid=parentid+'-D1'

             if(dir.state=='close')
              tagObj='<li id="li'+tempid+'" class="closed"><span class="folder">'+dir.name+'</span></li>'
             else
              tagObj='<li id="li'+tempid+'"><span class="folder">'+dir.name+'</span></li>'

             if( parentid==container)
                $('#'+container).append(tagObj);
             else
                $('#ul'+parentid).append(tagObj);


              $("#li"+tempid).append('<ul id="ul'+tempid+'"></ul>');


             readDir(dir,(level+1),tempid,container);

        }
    }


    return;

}



function clickHandler(container,name,data,curr_report_id) {

    $('.file').css('color','#4A4344');
    $('#'+curr_report_id+' .file').css('color','Blue');

    if(container=='reporting')
      $('#containerFrame').attr('src', './AdmxReportView?data='+data+'&name='+name);
    else
      $('#containerFrame').attr('src', './AdmxAnalyticsView?data='+data+'&name='+name);

}


</script>
<table style='width: 100%; height: 100%; position: absolute'>
    <tr style='width: 100%; height: 100%;'>
        <td style='width: 20%; height: 100%; vertical-align: top;'>
            <table style='width: 100%; height: 100%;'>
                <tr style='width: 100%; height: 10%;'>
                    <td>
                        <img src="../../Content/admx-dashboard-logo.gif" style="height: 100px; width: 250px;
                            margin-top: 2px; margin-bottom: 5px" alt="" />
                    </td>
                </tr>
                <tr style='width: 100%; height: 80%;'>
                    <td style="vertical-align: top">
                        <div id="tabs" style="height: 100%; width: 95%;">
                            <ul style="width: 95%;">
                                <li><a href="#tabs-reporting">Reporting</a></li>
                                <li><a href="#tabs-analytics">Analytics</a></li>
                            </ul>
                            <div id="tabs-reporting">
                                <div id='reporting_tree_block'>
                                    <!-- rendering directory list -->
                                    <ul id="reporting" class="filetree treeview-famfamfam">
                                    </ul>
                                </div>
                            </div>
                            <div id="tabs-analytics">
                                <div id='analytics_tree_block'>
                                    <!-- rendering directory list -->
                                    <ul id="analytics" class="filetree treeview-famfamfam">
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
        <td style='width: 80%; height: 100%;'>
            <iframe id='containerFrame' frameborder="0" scrolling="no" style="width: 99%; height: 100%;
                position: relative;" src='./AdmxIndexView' />
        </td>
    </tr>
</table>

而这个 iframe src 的代码

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>


<style type="text/css">
    .no_data
    {
        height: 440px;
        width: 705px;
    }
</style>

var columnList;
$(document).ready(function () {

    var myDate = new Date();
    var toDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' +myDate.getFullYear();
    var fromDate =myDate.getMonth() + '/' + myDate.getDate() + '/' +myDate.getFullYear();


    $("#from_date").datepicker({
        showOn: "button",
        buttonImage: "content/calendar.gif",
        buttonImageOnly: true,

    }).val(fromDate);

    $("#to_date").datepicker({
        showOn: "button",
        buttonImage: "content/calendar.gif",
        buttonImageOnly: true,

    }).val(toDate);

    $("#tabs").tabs();


    //$('div[id^="tabs-"]').empty();
    var report='<%=Request.QueryString["data"]%>';
     $('span[id$="_bg"]').find('img').attr('src','/content/dashboard/images/'+report.toLowerCase()+'.png');

    initGridColumnList('<%=ViewData["colList"] %>');
    initChartReportListWidget('piechart');
    initChartReportListWidget('barchart');


});


 function initChartReportListWidget(chartType) {
  var report='<%=Request.QueryString["data"]%>';

         <%
            IList<string> reportNameList = ViewData["ReportList"] as IList<string>;
            int i=0;
            if (reportNameList.Count()>1) { %>

                    $('#td_'+chartType+'_result').append('<div id="'+chartType+'_accordion" />')
                    <%foreach (string title in reportNameList) {
                      string reporttitle=title.Split('|')[0];
                      i++;
                     %>
                    $('#'+chartType+'_accordion').append('<h3><a href="#"><% =reporttitle%></a></h3>') ; 
                    $('#'+chartType+'_accordion').append('<div style="width:706;height:441"><img id="img_'+chartType+'_result_<%=i %>" src="" alt="<% =reporttitle%>" height="440px" width="705px"/></div>'); 

                    <% }
            }else{ 
            foreach (string title in reportNameList) { 
                string reporttitle=title.Split('|')[0];
            %>
                    $('#td_'+chartType+'_result').append('<img id="img_'+chartType+'_result" src="" alt="<% =reporttitle%>" height="440px" width="705px"/>')

                   <%} 
            }%>

             $('#'+chartType+'_accordion').accordion();
             $('#td_'+chartType+'_result div div').css('height','440px');




 }





 function initGridColumnList(col_names) {
    var list = col_names.split('|');
    columnList= new Array();
    var obj;


    for (i = 0; i < list.length; i++) {
        obj=new Object();
        obj["sName"]=list[i];
        obj["bSearchable"]=true;
        obj["bSortable"]=true;
        columnList[i]=obj;
    }


    //reset grid headers
    $("#grid_view").empty();

    var header="<thead><tr>";

    for (i = 0; i < list.length; i++) 
         header=header+'<th'+(i==0?' style="min-width:60px"':'')+'>'+columnList[i].sName+'</th>';


    header=header+'</tr></thead>';
    $("#grid_view").append(header);
    $("#grid_view").append('<tbody></tbody>');
    $('#grid_view').css('width','90%'); 



 }


 var barchartcount=0;
 var piechartcount=0;

 //Event handler when All images loaded
function onLoadComplete(obj) {
    var reportCount=<%=reportNameList.Count() %>;

    if(obj=='pie'){

        piechartcount=piechartcount+1;
        if(piechartcount==reportCount){
            piechartcount=0;
            $('#span_pie_bg').css('display','none');
            $('#span_pie_wait').css('display','none');
            $('#span_pie_result').css('display','block');
        }

    }else if(obj=='bar'){
        barchartcount=barchartcount+1;
        if(barchartcount==reportCount){
            barchartcount=0;
            $('#span_bar_bg').css('display','none');
            $('#span_bar_wait').css('display','none');
            $('#span_bar_result').css('display','block');
        }
    }
}


function getReportData() {

       //Enable wait Icon & disable others
       $('#span_bar_bg').css('display','none');
       $('#span_bar_wait').css('display','block');
       $('#span_bar_result').css('display','none');
       $('#span_pie_bg').css('display','none');
       $('#span_pie_wait').css('display','block');
       $('#span_pie_result').css('display','none');


       var report='<%=Request.QueryString["data"]%>';
       var subreport='<%=Request.QueryString["name"]%>';


        if( report.toLowerCase()=='ctss' )
        {
         alert('Report is temporarily Un-available');
         return;
        }

        if ($("#from_date").val() == "" || $("#to_date").val() == "") {
            alert("Invalid Date Range !!!");
            return;
        }


        $("#span_grid_bg").css('display','none');
        $("#span_grid_view").css('display', 'block');



           // "sScrollX": "100%",
           // "sScrollXInner": "101%",
           // "bScrollCollapse": true,


        $('#grid_view').dataTable({
            "sScrollX": "100%",
            "bAutoWidth": true,
            "bServerSide": false,
            "sAjaxSource": "fetchGridReport?&from_date=" + $("#from_date").val() + "&to_date=" + $("#to_date").val() + "&report="+report+"&subreport="+subreport,
            "bProcessing": true,
            "bRetrieve": false,
            "bDestroy": true,
            "iDisplayLength": 17,
            "aoColumns": columnList
        });

         //$("#tabs-grid").css('width','90%');
         $('#grid_view').dataTable().fnAdjustColumnSizing();




        //Request for reports 
         <%
           foreach (string title in reportNameList) { 
           string reporttitle=title.Split('|')[0];
           string displayformat= title.Split('|')[1];

         %>
           $('#span_bar_result img[alt="<%=reporttitle%>"]').attr('src','/fetchChartReport?chartType=<%=System.Web.UI.DataVisualization.Charting.SeriesChartType.Bar %>&from_date=' + $("#from_date").val() + '&to_date=' + $("#to_date").val() +  '&report='+report+'&subreport='+subreport+'&reporttitle=<%=reporttitle %>&displayformat=<%=displayformat %>&filterParamList=no');
           $('#span_pie_result img[alt="<%=reporttitle%>"]').attr('src','/fetchChartReport?chartType=<%=System.Web.UI.DataVisualization.Charting.SeriesChartType.Pie %>&from_date=' + $("#from_date").val() + '&to_date=' + $("#to_date").val() +  '&report='+report+'&subreport='+subreport+'&reporttitle=<%=reporttitle %>&displayformat=<%=displayformat %>&filterParamList=no');
        <%} %>


        //register call back functionality invoked when result image response complete
         $('img[id^="img_barchart_result"]').bind('load',function(){
             onLoadComplete('bar');

         });

         $('img[id^="img_piechart_result"]').bind('load',function(){
              onLoadComplete('pie');
         });



    }



</script>
<table style="margin: 5px; height: 100%; width: 100%;">
    <tr style="height: 20%; width: 97%; font-size: large;">
        <td align="left">
            <table style="margin: 5px;">
                <tr>
                    <td style="padding-right: 5px;">
                        <p>
                            <label style="font-family: Verdana; font-size: small; font-weight: bold">
                                Date Range:
                            </label>
                            <input type="text" id="from_date" style="width: 70px" /></p>
                    </td>
                    <td style="padding-right: 5px;">
                        <strong>- </strong>
                    </td>
                    <td style="padding-right: 20px;">
                        <p>
                            <input type="text" id="to_date" style="width: 70px" /></p>
                    </td>
                    <td style="padding-right: 20px">
                        <div>
                            <label style="font-family: Verdana; font-size: small; font-weight: bold">
                                Report By :
                            </label>
                            <select id="reportby" onchange="changeOnReportBy()" disabled="disabled">
                                <option value="daily">Daily</option>
                                <option value="weekly">Weekly</option>
                                <option value="monthly">Monthly</option>
                                <option value="yearly">Yearly</option>
                            </select>
                        </div>
                    </td>
                    <td>
                        <input type="button" value="GO" onclick="getReportData();" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr style="height: 80%; width: 97%; position: relative">
        <td align="left">
            <div id="tabs" style="height: 100%; width: 96%;">
                <span id="span_chart" style="height: 100%; width: 95%; display: block">
                    <ul style="width: 95%;">
                        <li><a href="#tabs-grid">Grid</a></li>
                        <li><a href="#tabs-bar">Bar</a></li>
                        <li><a href="#tabs-pie">Pie</a></li>
                    </ul>
                    <div id="tabs-grid" style="width: 95%;">
                        <span id="span_grid_bg" style="display: block; padding-top: 10px">
                            <p>
                                <img src='' style="height: 50%; width: 90%;" alt="" />
                            </p>
                        </span><span id="span_grid_view" style="display: none;">
                            <table id="grid_view" class="display" style="overflow-x: scroll; width: 90%;">
                            </table>
                        </span>
                    </div>
                    <div id="tabs-bar">
                        <span id="span_bar_bg" style="display: block">
                            <p>
                                <img src='' style="height: 50%; width: 90%;" alt="" />
                            </p>
                        </span><span id="span_bar_wait" style="display: none">
                            <p>
                                <img src='/content/dashboard/images/wait.gif' style="height: 80px; width: 200px;"
                                    alt="" />
                            </p>
                        </span><span id="span_bar_result" style="display: none">
                            <table>
                                <tr>
                                    <%if (!ViewData["filter"].Equals("none"))
                                      {%>
                                    <td style="vertical-align: top; padding-top: 30px">
                                        <a href="#" id="BarChart_filter">
                                            <img id="img_barchart_filter" src="/content/dashboard/images/filter_icon.png" style="width: 40px;
                                                height: 50px" title="Filter" alt=""></img>
                                        </a>
                                    </td>
                                    <%} %>
                                    <td style="vertical-align: top" id="td_barchart_result">
                                    </td>
                                </tr>
                            </table>
                        </span>
                    </div>
                    <div id="tabs-pie">
                        <span id="span_pie_bg" style="display: block">
                            <p>
                                <img src='' style="height: 50%; width: 90%;" alt="" />
                            </p>
                        </span><span id="span_pie_wait" style="display: none">
                            <p>
                                <img src='/content/dashboard/images/wait.gif' style="height: 80px; width: 200px;"
                                    alt="" />
                            </p>
                        </span><span id="span_pie_result" style="display: none">
                            <table>
                                <tr>
                                    <%if (!ViewData["filter"].Equals("none"))
                                      {%>
                                    <td style="vertical-align: top; padding-top: 30px">
                                        <a href="#" id="PieChart_filter">
                                            <img id="img_piechart_filter" src="/content/dashboard/images/filter_icon.png" style="width: 40px;
                                                height: 50px" title="Filter" alt=""></img>
                                        </a>
                                    </td>
                                    <%} %>
                                    <td style="vertical-align: top;" id="td_piechart_result">
                                    </td>
                                </tr>
                            </table>
                        </span>
                    </div>
                </span>
            </div>
        </td>
    </tr>
</table>
<!-- Advance Componant Block -->
<span id="span_bar_chart" style="display: none"></span><span id="span_pie_chart"
    style="display: none"></span>
<!-- Advance Componant Block -->
<%if (!ViewData["filter"].Equals("none"))
  {
      //Dynamic View Componants based on ViewData["filter"] argument
      Html.RenderPartial(ViewData["filter"].ToString(), "BarChart");
      Html.RenderPartial(ViewData["filter"].ToString(), "PieChart");
  }
%>

提前致谢