由<DIV>制成的表非常慢

I decided to write my own markup for a table that has a static header and scrollable tbody (using Jquery), so i decided to write my own markup using divs.

Here are the 2 problems :

given any query to select x rows, it prints a resultset on two rows, so a counting error might have occured
this markup is very slow when we're talking about huge ammounts of data, lots of DOM elements, when using some static markup, it's ok, but when I'm supposed to fetch it from a DB, it's lagging a lot

I was wondering if you guys might have an idea, days of searching have failed me

The code is below :

<?php include("connect.inc.php"); ?>

<html>

<head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

    <script>

        $(document).ready(function()
        {
        $(".thead").scroll(function () { 
                $(".tbody").scrollLeft($(".thead").scrollLeft());
            });
        $(".tbody").scroll(function () { 
                $(".thead").scrollLeft($(".tbody").scrollLeft());
            });
        });

    </script>

</head>

<body>

<?php

    /* $syntax = ANY USUAL MYSQL SELECT QUERY, EVEN A JOIN */

    $query  = mysql_query($syntax) or die(mysql_error());
    $cols   = mysql_num_fields($query)+1;
    $td_w   = 150;  $tr_w = $cols*$td_w;    /* td_width default 150px :) */

?>

<style type="text/css">

*   {

    font-size:12px;
    font-family:verdana;

}

/* defines table wrap, max width and height */

.tbl_wrap   {

    width:800px;
    height:400px;

}

/* inner wrapper */

.tbl    {

    width:100%;
    height:100%;

}

.thead {

    height:35px;
    overflow:hidden;

}

.tbody {

    height:400px;
    overflow:auto;

}

/* defines table row and table header settings */

.th,.tr {

    width:<?=$tr_w."px"?>;
    display:block;
    clear:both;
    height:35px;

}

/* optional settings for th */

.th {

    background-color: rgb(220,220,220);
    font-weight: bold;
    border-bottom:1px solid black;

}

/* cell element styling */

.td {

    float:left; 
    display:inline;
    width:<?=$td_w."px"?>;
    height:35px;
    overflow:auto;
    border: 1px solid rgb(250,250,250);

}

</style>    

<div class='tbl_wrap'>

    <div class='tbl'>

        <div class='thead'>

            <div class='th'>

            <?php

                for($i=0; $i<mysql_num_fields($query);$i++) 
                echo "<div class='td'>".mysql_field_name($query,$i)."</div>";

            ?>

            </div>

        </div>

        <div class='tbody'>

        <?php
        while($res = mysql_fetch_assoc($query))     {
            /* If two or more columns of the result have the same field names, the last column will take precedence. */
            echo "<div class='tr'>";
            for($i=0; $i<mysql_num_fields($query);$i++) echo "<div class='td'>".$res[mysql_field_name($query,$i)]."</div>
";
            echo "</div>
";    
        }
        ?>

        </div>

    </div>

</div>

</body>

</html>

<?php include("close.inc.php");

Thank you and kudos for the guy who can provide an explanation for this mess.

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

2条回答默认最新

dopq87915 2011-11-13 10:50

关注

I actually ended up doing this

    <script>

    $(function () {
        $(".edt").click(function (event) {
            $(this).editable('ajax_save.php?table=date_vpn',{
                id      : 'id',
                name        : $(this).attr('col'),
                submit      : 'Save',
                cancel      : 'Cancel',
                tooltip     : ''
            });
        });
    });     


    $(document).ready(function(){
        $(".tblh_wrap").scroll(function () { 
                $(".tblb_wrap").scrollLeft($(".tblh_wrap").scrollLeft());
        });
        $(".tblb_wrap").scroll(function () { 
                $(".tblh_wrap").scrollLeft($(".tblb_wrap").scrollLeft());
        });
    });

    </script>

</head>

<body>

<?php

    $syntax = 'your usual mysql query';

    $query  = mysql_query($syntax) or die(mysql_error());
    $cols   = mysql_num_fields($query);
    $td_w   = 150;  $tr_w = $cols*$td_w;    /* td_width default 150px :) */

?>

<style type='text/css'>

    table   {

        width           :100%;
        table-layout    :fixed;

    }

    tr      {

        width           :<?=$tr_w."px"?>

    }

    td      {

        width           :<?=$td_w."px"?>;
        overflow        :hidden;
        white-space     :nowrap;

    }

    .tblh_wrap  {

        width           :1000px;
        overflow        :hidden;

    }

    .tblb_wrap  {

        height          :500px;
        width           :1000px;
        overflow        :auto;

    }       

</style>

<div class='tblh_wrap'>

<table>

        <tr>
        <?php

            for($i=0; $i<mysql_num_fields($query);$i++) 
            echo "<td>".mysql_field_name($query,$i)."</td>";

        ?>
        </tr>

</table>

</div>

<div class='tblb_wrap'>

<table>

        <?php

        while($res = mysql_fetch_assoc($query))     {
            /* If two or more columns of the result have the same field names, the last column will take precedence. */
            echo "<tr>";
            for($i=0; $i<mysql_num_fields($query);$i++) echo "<td class='edt' id='' col=''>".$res[mysql_field_name($query,$i)]."</td>
";
            echo "</tr>
"; 
        }

        ?>

</table>

</div>

My solution works because it is a table with fixed header, scrollable horizontally and tbody content that synchronizes with header horizontally and has vertical scrolling features, done with jquery, regular html and php

本回答被题主选为最佳回答 , 对您是否有帮助呢?