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对象动态加载表格--大数据量的更多相关文章

  1. jquery.datatable.js与CI整合 异步加载（大数据量处理）

    http://blog.csdn.net/kingsix7/article/details/38928685 1.CI 控制器添加方法 $this->show_fields_array=arra ...

  2. Ajax实现页面动态加载，添加数据

    前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Products ...

  3. vue：使用不同参数跳转同一组件，实现动态加载图片和数据，以及利用localStorage和vuex持久化数据

    需求:通过不同的参数复用同一组件,实现动态加载数据和图片,同时,在页面刷新时,图片依旧可以加载成功. 过程出现的bug和问题: 1.使用params传参后,再次刷新页面,参数丢失导致数据无法再次加载 ...

  4. EasyUI datagrid 动态加载表头和数据

    首先返回到页面的需要是JSON数据: 第一步: 遍历表头,插入到array中 for (var i = 0; i < jsonObj.title.length; i++) { //把返回的数据封 ...

  5. EasyUI datagrid动态加载json数据

    最近做一个项目,要求是两张张表可能查找出10多种不同的结果集. 如果想只用一个表格就把全部的结果不同的显示出来那么就肯定不同使用固定的字段名字,要通过动态加载后台返回来的数据把它显示出来就必须动态加载 ...

  6. 项目总结—jQuery EasyUI-DataGrid动态加载表头

    http://blog.csdn.net/zwk626542417/article/details/19248747 概要 在前面两篇文章中,我们已经介绍了在jQuery EasyUI-DataGri ...

  7. [转]bootstrap的table插件动态加载表头

    原文地址:https://blog.csdn.net/abubu123/article/details/78060321 bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫每个列表 ...

  8. jQuery EasyUI-DataGrid动态加载表头

    项目总结—jQuery EasyUI-DataGrid动态加载表头     目录(?)[-] 概要 实现 总结   概要 在前面两篇文章中,我们已经介绍了在jQuery EasyUI-DataGrid ...

  9. js 动态加载事件的几种方法总结

    本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助   有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添 ...

随机推荐

  1. android 基本知识

    307966990 lyd@itcast.com 13716040037 李印东 东东 通信技术: 1G 模拟制式 语音通话. 2G GSM, CDMA 收发短信和邮件. 2.5G GPRS, EDG ...

  2. jmeter测试某个QPS下的响应时间-设置QPS限制

    本次性能测试的需求中提到测试的目的是“了解博客的首页在负载达到20 QPS时的响应时间”,因此需要控制向博客首页发送请求的负载为20QPS. 一种可行的方法是逐步调整测试计划中的线程计算的数量以及为取 ...

  3. delphi的tserversocket控件如何接收16进制数

    http://bbs.csdn.net/topics/390473005 对方客户端发送数据如:68 00 00··········:接收完成后,数据长度没错(13),但是显示接收结果时,只显示一个字 ...

  4. 安装jdk java -version 不是自己所需要的版本

    原服务器安装有1.4的jdk,应用需要安装1.6的jdk.安装完毕后在/etc/profile里配置1.6jdk的环境变量后使用命令java -version显示还是原来的1.4的版本. 解决办法: ...

  5. Inno Setup设置NT服务

    原文地址:http://stackoverflow.com/questions/16922272/unknown-identifier-and-wpselectdir // Variables Glo ...

  6. echart 图表 在.net中生成图片的方法

    经过中午近两个小时的努力,终于可以实现了:echart 图表 在.net中生成图片 以下源代码: 前台页面: <!DOCTYPE html><html><head> ...

  7. [HDU 4082] Hou Yi's secret (简单计算几何)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4082 题目大意: 给你n个点,问能最多构成多少个相似三角形. 用余弦定理,计算三个角度,然后暴力数有多 ...

  8. Ubuntu Qt arm-linux-androideabi-gcc: Command not found

    :-1: error: /opt/Qt/android-ndk-r9c/toolchains/arm-linux-androideabi-4.8/prebuilt/linux-x86/bin/arm- ...

  9. OC基础(1)

    Objective-C简介 OC和C对比 第一个OC程序 面向对象思想 *:first-child { margin-top: 0 !important; } body > *:last-chi ...

  10. JavaScript事件小结

    我们都晓得JavaScrip事件的重要性,所以下面小结一下以备后用!   序号 事件 描述 备注 onclick 鼠标点击某个对象时触发此事件 是最常用的事件之一 onchange 用户改变域的内容时 ...