您的位置：首页 > 大数据

根据JSON对象动态加载表格--大数据量

2016-01-28 18:03 525 查看

EasyUI的DataGrid加载数据的时候，如果列数过多（300列以上），数据渲染及其缓慢。

JSON对象格式：

1：rowno

2：title

3：colspan

4：rowspan

5：backgroundcolor

五项属性必须设置

ar json={total:3,rows:[{'rowno':1,'title':'ceshi','colspan':1,rowspan:1,'backgroundcolor':'red'},{'rowno':1,'title':'ceshi1','colspan':1,rowspan:1,'backgroundcolor':'red'},{'rowno':1,'title':'ceshi2','colspan':1,'rowspan':1,'backgroundcolor':'red'}]};

原生态利用datatable循环加载标签

<html>
<head>
<title>test page</title>
<script type='text/javascript'>
<!--
function createTable() {
var t = document.createElement('table');
for (var i = 0; i < 2000; i++) {
var r = t.insertRow();
for (var j = 0; j < 5; j++) {
var c = r.insertCell();
c.innerHTML = i + ',' + j;
}
}

document.getElementById('table1').appendChild(t);
t.setAttribute('border', '1');
}

function createTable2() {
var t = document.createElement('table');
var b = document.createElement('tbody');
for (var i = 0; i < 2000; i++) {
var r = document.createElement('tr');
for (var j = 0; j < 5; j++) {
var c = document.createElement('td');
var m = document.createTextNode(i + ',' + j);
c.appendChild(m);
r.appendChild(c);
}
b.appendChild(r);
}

t.appendChild(b);
document.getElementById('table1').appendChild(t);
t.setAttribute('border', '1');
}

function createTable3() {
var data = '';

data += '<table border=1><tbody>';
for (var i = 0; i < 2000; i++) {
data += '<tr>';
for (var j = 0; j < 5; j++) {
data += '<td>' + i + ',' + j + '</td>';
}
data += '</tr>';
}
data += '</tbody><table>';

document.getElementById('table1').innerHTML = data;
}
function createTable4() {
var data = new Array();

data.push('<table border=1><tbody>');
for (var i = 0; i < 2000; i++) {
data.push('<tr>');
for (var j = 0; j < 5; j++) {
data.push('<td>' + i + ',' + j + '</td>');
}
data.push('</tr>');
}
data.push('</tbody><table>');

document.getElementById('table1').innerHTML = data.join('');
}
function createJSONObject(){
var jsonObj={total:3,rows:[]};
for(var i=1;i<100;i++){
for(var j=1;j<1440;j++){
var cell={'rowno':i,'title':'ceshi'+j,'colspan':1,'rowspan':1,'backgroundcolor':'red'};
jsonObj.rows.push(cell);
}
}
return jsonObj;
}
function createTableByJSON(){
//var json={total:3,rows:[{'rowno':1,'title':'ceshi','colspan':1,rowspan:1,'backgroundcolor':'red'},{'rowno':1,'title':'ceshi1','colspan':1,rowspan:1,'backgroundcolor':'red'},{'rowno':1,'title':'ceshi2','colspan':1,'rowspan':1,'backgroundcolor':'red'}]};
alert("test");
var json=createJSONObject();
alert("test1");
alert(json.rows.length);
alert(json.rows[2876].title);
var htmls=[];
for(var i=0;i<json.rows.length;i++)
{
//alert(json.rows[i].title);
if(i==0)
{
var cell =appendRowFirstCell(json.rows[i]);
htmls.push(cell.join(''));
}
else if(i==json.rows.length-1)
{
var cell=appendRowLastCell(json.rows[i]);
htmls.push(cell.join(''));
}
else
{
var cell;
var cellPre=json.rows[i-1];
var cellCurrent=json.rows[i];
var cellNext=json.rows[i+1];
if(cellCurrent.rowno!=cellPre.rowno)
{
cell=appendRowFirstCell(cellCurrent);
htmls.push(cell.join(''));
}
else if(cellCurrent.rowno!=cellNext.rowno)
{
cell=appendRowLastCell(cellCurrent);
htmls.push(cell.join(''));
}
else
{
cell=appendRowMiddleCell(cellCurrent);
htmls.push(cell.join(''));
}
}
}
htmls.push();
document.getElementById('tabledy').innerHTML=htmls.join('');
};

function appendRowFirstCell(jsonCell){
var firstCell=[];
if(typeof jsonCell!="undefined"){
firstCell.push('<tr><td colspan='+jsonCell.colspan +' rowspan=' + jsonCell.rowspan + ' style="background-color:' + jsonCell.backgroundcolor+'">' +jsonCell.title+'</td>');
}
return firstCell;
};
function appendRowMiddleCell(jsonCell){
var middleCell=[];
if(typeof jsonCell!="undefined"){
middleCell.push('<td colspan='+jsonCell.colspan +' rowspan=' + jsonCell.rowspan + ' style="background-color:' + jsonCell.backgroundcolor+'">' +jsonCell.title+'</td>');
}
return middleCell;
};

function appendRowLastCell(jsonCell){
var lastCell=[];
if(typeof jsonCell!="undefined"){
lastCell.push('<td colspan='+jsonCell.colspan +' rowspan=' + jsonCell.rowspan + ' style="background-color:' + jsonCell.backgroundcolor+'">' +jsonCell.title+'</td></tr>');
//lastCell.push('');
}
return lastCell;
};

function showFunctionRunTime(f) {
var t1 = new Date();
f();
var t2 = new Date();
alert(t2 - t1);
}
//-->
</script>
</head>
<body>
<input type="button" value="Click Me" onclick="createTableByJSON();">
<div id="table1" style="border: 1px solid black">
</div>
<table id="tabledy" style="border: 1px solid black">
</table>

<script>
//showFunctionRunTime(createTable);
//showFunctionRunTime(createTable2);
//showFunctionRunTime(createTable3);
//showFunctionRunTime(createTable4);
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航