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>