根据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 中动态添 ...

随机推荐

$.ajax()中dataType
$.ajax()中dataType的默认值为TEXT,如果没有指明json,而返回来的数据又就是json格式,则无法显示.!!
Coding 初级教程（一）——用GitHub的GUI客户端对Coding的项目进行管理
一.概述二.Git基本概念 1.有关存储的四个概念 2.分支(branch) 三.项目管理实战操作 1.安装 GHfW(GitHub for Windows) 2.在Coding上新建一个项目(新建 ...
MYSQL批量插入数据库实现语句性能分析
假定我们的表结构如下代码如下 CREATE TABLE example ( example_id INT NOT NULL, name VARCHAR( 50 ) NOT NULL, value ...
Java多线程之新类库中的构件PriorityBlockingQueue
package concurrent2; import java.util.ArrayList; import java.util.List; import java.util.Queue; impo ...
C#异步编程 z
http://www.cnblogs.com/fangyz/p/5134018.html 从.NET4.5开始,用async和await关键字再加上Task.Run是一个非常不错的异步编程模型. 1. ...
20145305 《Java程序设计》第8周学习总结
教材学习内容总结 1.NIO使用频道来衔接数据节点,可以设定缓冲区容量,在缓冲区中对感兴趣的数据区块进行标记,提供clear().rewind().flip().compact()等高级操作 2.想要 ...
[Java] 01 String 内存分析
public class StringTest{ public static void main(String[] args){ String str1 = new String("123& ...
PL/SQL Developer使用技巧、快捷键
1.类SQL PLUS窗口:File->New->Command Window,这个类似于oracle的客户端工具sql plus,但比它好用多了. 2.设置关键字自动大写:Tools-& ...
点评App wiki－git标准实践
fetch与pull fetch = pull + merge fetch -p,用于将清理工作同步到本地repository rebase-衍合 merge与rebase是合并的两种方法(上为mer ...
Map集合的遍历方式：
迭代器来遍历 : entrySet() ; keySet(); values(); eg.HashMap<String,String> map = new HashMap<Strin ...

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

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

随机推荐

热门专题