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

时间：2022-02-27 03:25:55

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>

相关文章