实现页面千条级别数据表格

最新推荐文章于 2023-03-06 21:53:53 发布

转载最新推荐文章于 2023-03-06 21:53:53 发布 · 914 阅读

在ie浏览器下使用前台框架生成表格,当数据量大且不用分页时速度会非常慢,一次显示500条数据(不分页的情况下)就会出现假死.下面是自己实现的数据表格

<html>
<head></head>
<style>
table
{
    border-collapse:collapse;
    table-layout:fixed;
    overflow:hidden;
}
td
{
    overflow:hidden;
    white-space: nowrap;
}
--></mce:style><style mce_bogus="1">table
{
    border-collapse:collapse;
    table-layout:fixed;
    overflow:hidden;
}
td
{
    overflow:hidden;
    white-space: nowrap;
}
</style>
<script src="jquery-1.3.2.min.js"></script>
<body>
<input type=button onclick=createTable() value='创建表格：使用 thead'>
<input type=button onclick=createTable(1) value='创建表格：使用 colgroup'>
<br>
<input type=button onclick=hideCol(1) value='隐藏第 2 列'>
<input type=button onclick=showCol(1) value='显示第 2 列'>
 
<input type=button onclick=hideCol_fast(1) value='快速隐藏第 2 列'>
<input type=button onclick=showCol_fast(1) value='快速显示第 2 列'>
<div id=tableBox></div>
<script type="text/javascript">
var tableRowsLen = 10000; // 创建万行表格

//--------------------------------------------------------
// 时间转为时间戳（毫秒）
function time2stamp(){var d=new Date();return Date.parse(d)+d.getMilliseconds();}

//--------------------------------------------------------
// 创建表格
function createTable(isUseColGroup)
{
    var t1 = time2stamp();
    if (isUseColGroup) // 使用 colgroup 标签
    {
        var str = "<table border=1>" +
                    "<colgroup>" +
                            "<col width=100 class=col1 />" +
                            "<col width=200 class=col2/>" +
                            "<col width=50 class=col3/>" +
                    "<\/colgroup>" +
                    "<tbody>";
    }
    else
    {
        // 使用 thead 标签
        var str = "<table border=1>" +
                    "<thead>" +
                        "<tr>" +
                            "<th width=100 class=col1>col1<\/th>" +
                            "<th width=200 class=col2>col2<\/th>" +
                            "<th width=50 class=col3>col3<\/th>" +
                        "<\/tr>" +
                    "<\/thead>" +
                    "<tbody>";
    }

    var arr = [];
    for (var i=0; i<tableRowsLen; i++)
    {
        arr[i] = "<tr><td class=col1>" + i + "--1<\/td><td class=col2>" + i + "--2</td><td class=col3>" + i + "--3<\/td></tr>";
    }
    str += arr.join("") + "</tbody><\/table>"; // 用 join() 方式快速构建字串，速度极快
    tableBox.innerHTML = str; // 生成 table
    var t2 = time2stamp();
    alert("耗时：" + (t2 - t1) + " 毫秒");

}

//--------------------------------------------------------
// 隐藏/显示指定列
function hideCol(colIdx){hideOrShowCol(colIdx, 0);}
function showCol(colIdx){hideOrShowCol(colIdx, 1);}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function hideOrShowCol(colIdx, isShow)
{
    var t1 = time2stamp(); //
    var table = tableBox.children[0];
    var rowsLen = table.rows.length;
    var lastTr = table.rows[0];

    if (rowsLen > 1001)
    {
        if (!confirm("将要对 1000 行以上的表格操作，这将非常耗时（甚至导致浏览器死掉）。\n您确定要继续吗？"))
            return;
    }

    for (var i=0; i<rowsLen; i++)
    {
        var tr = table.rows[i];
        tr.children[colIdx].style.display = isShow ? "" : "none";
    }
   
    var t2 = time2stamp();
    alert("耗时：" + (t2 - t1) + " 毫秒");
}

//--------------------------------------------------------
// 隐藏/显示指定列 - 快速
function hideCol_fast(colIdx){hideOrShowCol_fast(colIdx, 0);}
function showCol_fast(colIdx){hideOrShowCol_fast(colIdx, 1);}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function hideOrShowCol_fast(colIdx, isShow)
{
    var t1 = time2stamp(); //
    var table = tableBox.children[0];
    var thead = table.children[0]; // 可能是 thead 或者 tbody，也可能是 colgroup
    if (thead.tagName.toLowerCase()=="colgroup") // 对 colgroup 特殊处理
    {
        var td = thead.children[colIdx];
    }
    else
    {
        // 注意：如果表格没有 thead 和 tbody 标签，则 table.children[0] 是 tbody
        var tr = thead.children[0];
        var td = tr.children[colIdx];
    }
    td.style.width = 0;
   
    var t2 = time2stamp();
    alert("耗时：" + (t2 - t1) + " 毫秒");
}

//--------------------------------------------------------
//createTable();
</script>
</html>

用ajax请求后台返回json数据,在前台解析后将每一行填充进去

下边是用jquery实现可拖动列宽:

	         $("th").mouseover(function(Event) {
	             if (Event.offsetX > $(this)[0].offsetWidth - 10) {
	                 $(this).css("cursor", "col-resize");                  
	             }
	             else {
	                 $(this).css("cursor", "default");                    
	             }                
	         }).mouseout(function() {
	             $(this).css("cursor", "default");
	         }).mousedown(function(Event) {
	              if (!window.captureEvents) {
	                  $(this)[0].setCapture();
	               } else {
	                   window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
	               }
	             //按下后才能拖动
	             $(this).data("IsDown", "T");                
	             $(this).data("OldX", Event.clientX);
	             $(this).data("OldoffsetWidth", $(this)[0].offsetWidth);
	         }).mouseup(function(Event) {
	             if (!window.captureEvents) {
	                 $(this)[0].releaseCapture();
	             } else {
	                 window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
	             }                
	             $(this).data("IsDown", "F");
	         }).mousemove(function(event) {
	             if (event.offsetX > $(this)[0].offsetWidth - 10) {
	                 $(this).css("cursor", "col-resize");                    
	             }
	             else {
	                 $(this).css("cursor", "default");                    
	             }
	             if ($(this).data("IsDown") != "T") {
	                 return false;
	             }
	             var newWidth = $(this).data("OldoffsetWidth") * 1 + event.clientX * 1 - $(this).data("OldX");
	             if (newWidth > 40) {
	                 $ (this).width(newWidth);
	               	 for(var i=0;i<$("th[name='td2']").length;i++){
	               		tdwidth[i]=$("th[name='td2']")[i].style.width;
	               	 }
	               	 //表格总宽度
	               	//tdwidth[document.getElementById('databody').length]=document.getElementById('databody').style.width;
	             }
	         });