实现页面千条级别数据表格
2014-12-18 18:08
218 查看
在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;
}
});
<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;
}
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery页面的表格数据的增加与分页的实现
- html页面中，表格数据可以固定表头，表数据部分做滚动条显示，如何实现
- 在Web页面中实现数据表格的排序功能(全部数据，非当前页)
- 从数据库读取数据。在页面用表格显示，并实现隔行换色
- JQuery页面的表格数据的增加与分页的实现
- 页面上实现表格数据排序
- 用JAVA实现将execl表格中多行数据复制粘贴到现有页面上（js控制）
- JQuery实现页面的表格数据的增加与分页
- 【JSP页面】利用数据库中的表格中的数据实现验证用户名和密码
- JavaScript实现动态添加页面的表格行数并获取数据
- Vue2.0实现将页面中表格数据导出excel的实例
- JQuery实现页面的表格数据的增加与分页
- JavaScript实现的数据表格：冻结列、调整列宽和客户端排序
- 在ASP.NET页面中实现数据棒图
- 在ASP.NET页面中实现数据饼图
- 在JSP页面中轻松实现数据饼图
- 通过URL实现在不同页面间传输数据
- 在ASP.NET页面中实现数据饼图
- 用Swing实现数据表格功能
- 用Swing实现数据表格功能