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

随机推荐

A^B问题
题目:输入包括两个正整数 A 和 B(1 <= A, B <= 10000),A 和 B 之前用空格隔开 ★数据输出输出一行,若 A ^ B < 10000,则直接输出结果(不包含 ...
windowns--HANDLE，
HANDLE: 在windows程序中,有各种各样的资源(窗口.图标.光标等),系统在创建这些资源时会为他们分配内存,并返回标示这些资源的标示号,即句柄. 句柄指的是一个核心对象在某一个进程中的唯一索 ...
codeblocks调试快捷键说明
使用codeblocks避免不了快捷键: 在调试程序的时候: 首先在view->toolbar->debugger调出来:快捷方式可以自己看 RUN to Cursor :F4 单步调试 ...
第十章 Vim程序编辑器学习（下）
在试用vim编辑时,vim会在于被编辑的档案的目录下,再建立一个名为****.swp的档案,如果你的系统因为某些原因断线,你编辑的档案还没有存储,这个时候的****.swp就能够挥发救援的功能 1.在 ...
JAVA 回调
一.定义回调就是把函数指针做为参数传入,如函数A做为参数传入函数B,由B函数决定何时.何地调用函数A, function A() function B(A) { ...
IRasterClassifyColorRampRenderer 使用时的一些奇怪的地方 (转)
1.IRasterClassifyColorRampRenderer 的Break设置方法 IRasterClassifyColorRampRenderer这个接口是ArcEngine里对单波段栅格影 ...
nyoj 93 汉诺塔(三)
点击打开链接汉诺塔(三) 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述在印度,有这么一个古老的传说:在世界中心贝拿勒斯(在印度北部)的圣庙里,一块黄铜板上插着三根宝 ...
ubuntu关闭THP
所有linux系统详细设置参考: https://docs.mongodb.org/manual/tutorial/transparent-huge-pages/ vi /etc/init.d/dis ...
树状数组POJ2352星星
http://poj.org/problem?id=2352 这道题的题意对于住学者应该比较难理解,但是如果弄明白他的意思的话,你就会发现这就是赤裸裸的树状数组,哎,欺负我不懂是吧,当时读题读啦好久, ...
Android 使用NineOldAndroids实现绚丽的ListView左右滑动删除Item效果
本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/18311877) 今天还是给大家带来自定义控件的编写,自定义一个Lis ...

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

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

随机推荐

热门专题