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>