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

jquery.datatable.js与CI整合异步加载（大数据量处理）
http://blog.csdn.net/kingsix7/article/details/38928685 1.CI 控制器添加方法 $this->show_fields_array=arra ...
Ajax实现页面动态加载，添加数据
前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Products ...
vue：使用不同参数跳转同一组件，实现动态加载图片和数据，以及利用localStorage和vuex持久化数据
需求:通过不同的参数复用同一组件,实现动态加载数据和图片,同时,在页面刷新时,图片依旧可以加载成功. 过程出现的bug和问题: 1.使用params传参后,再次刷新页面,参数丢失导致数据无法再次加载 ...
EasyUI datagrid 动态加载表头和数据
首先返回到页面的需要是JSON数据: 第一步: 遍历表头,插入到array中 for (var i = 0; i < jsonObj.title.length; i++) { //把返回的数据封 ...
EasyUI datagrid动态加载json数据
最近做一个项目,要求是两张张表可能查找出10多种不同的结果集. 如果想只用一个表格就把全部的结果不同的显示出来那么就肯定不同使用固定的字段名字,要通过动态加载后台返回来的数据把它显示出来就必须动态加载 ...
项目总结—jQuery EasyUI-DataGrid动态加载表头
http://blog.csdn.net/zwk626542417/article/details/19248747 概要在前面两篇文章中,我们已经介绍了在jQuery EasyUI-DataGri ...
[转]bootstrap的table插件动态加载表头
原文地址:https://blog.csdn.net/abubu123/article/details/78060321 bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫每个列表 ...
jQuery EasyUI-DataGrid动态加载表头
项目总结—jQuery EasyUI-DataGrid动态加载表头目录(?)[-] 概要实现总结概要在前面两篇文章中,我们已经介绍了在jQuery EasyUI-DataGrid ...
js 动态加载事件的几种方法总结
本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添 ...

随机推荐

【转】C++ 单例模式
http://blog.csdn.net/hackbuteer1/article/details/7460019 单例的一般实现比较简单,下面是代码和UML图.由于构造函数是私有的,因此无法通过构造函 ...
linux ps命令（转载）
来源:http://www.cnblogs.com/peida/archive/2012/12/19/2824418.html Linux中的ps命令是Process Status的缩写.ps命令用来 ...
Run Configuration error:broken configuration due to unavailable
希望大家一起来,毕竟大家都不会使用这个Androidstudio,一起扩展这方面的知识量 http://forums.opengamma.com/t/intellij-code-compiles-bu ...
用 <a> 实现 <form> 表单的提交
<form action="{:U('Index/fwbhss')}" method="post" id="tform" name=& ...
topngroupcollector
分类的字段int f1 /* key: f1 * value: doc * size: top n */ map<int, doc>() if(map.size==n) buildOrde ...
Kinect测量人体身高的程序
对着书上敲得,从中体会kinect骨骼识别与深度识别的原理.大体原理是懂了,但有些细节还没有完全弄明白. using System; using System.Collections.Generic; ...
HDU 4405 【概率dp】
题意: 飞行棋,从0出发要求到n或者大于n的步数的期望.每一步可以投一下筛子,前进相应的步数,筛子是常见的6面筛子. 但是有些地方可以从a飞到大于a的b,并且保证每个a只能对应一个b,而且可以连续飞, ...
扩大View的点击范围
扩大View的点击范围本人知道的有两种方法,在不影响界面效果的前提下: 1.在View的外面添加一个透明容器 2.就是本文要说的,代码如下 : public void addToParentArea( ...
sopcinfo路径改变，nios工程该怎么办？
操作系统:Win7 64 bit 开发环境:Quartus II 14.0 (64-Bit) + Nios II EDS 14.0 使用Quartus 时,有时候出于备份的考虑,或者从网上下载别人的 ...
DatabaseError: no such table: django_session
最近我也遇到这个问题了,从网上查了下,说是数据库同步出了问题,只需要运行如下命令:python manage.py syncdb就可以了 (这是django1.4之前的命令,1.4之后的是 pytho ...

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

根据JSON对象动态加载表格--大数据量的更多相关文章

随机推荐

热门专题