douao1854 2011-11-02 20:36
浏览 19
已采纳

由<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.

  • 写回答

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 微信小程序协议怎么写
  • ¥15 c语言怎么用printf（“\b \b”）与getch（）实现黑框里写入与删除？
  • ¥20 怎么用dlib库的算法识别小麦病虫害
  • ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
  • ¥15 java写代码遇到问题，求帮助
  • ¥15 uniapp uview http 如何实现统一的请求异常信息提示？
  • ¥15 有了解d3和topogram.js库的吗？有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar，时序沉降图怎么画
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看