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

Posted 2020-06-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了根据JSON对象动态加载表格--大数据量相关的知识，希望对你有一定的参考价值。

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>

以上是关于根据JSON对象动态加载表格--大数据量的主要内容，如果未能解决你的问题，请参考以下文章

cesium 何如加载大数据量的geojson格式的数据，geojson有切片吗

Android studio 动态片段根据日期

看板ajax动态获取后台传来json数据，加载到页面表格中

用 JavaScript 中的 JSON 数据动态填充表格的快速方法