根据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 中动态添 ...
随机推荐
- 使用UltraEdit+BCC5.5搭建C语言学习环境（转）
今天闲来无聊,想起以前学的C都差不多忘光了,想练练,先搭环境吧,vc bc之类都太大了,我以前在borland下过一个命令行编译工具不错,好像以前看到有人用ultraedit配合命令行工具做过一个开发 ...
- unix 中 ps -ef命令详解
ps -ef 查看正在活动的进程 ps -ef |grep abc 查看含有"abc"的活动进程 ps -ef |grep -v abc 查看不含abc的活动进程 1)ps a 显 ...
- sphinx 全文搜索引擎安装与配置
sphinx 全文搜索引擎 sphinx的安装与配置 ------------------------------------------------------------------------- ...
- Category的使用
1.创建一个objective-c file , 可以选择 category, extension ,protocol, empty 文件.选category 就能建立类别. category机制,它 ...
- Python标准库12 数学与随机数 (math包，random包)
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我们已经在Python运算中看到Python最基本的数学运算功能.此外,math包 ...
- Gatling的进阶二
1. 参数化 Gatling可以很方便使用csv文件进行参数化,例如一个用户信息表: /* user_information.csv */ username,password,accoun ...
- 采访ServiceStack的项目领导Demis Bellot——第1部分(转)
ServiceStack是一个开源的.支持.NET与Mono平台的REST Web Services框架.InfoQ有幸与Demis Bellot深入地讨论了这个项目.在这篇两部分报道的第1部分中,我 ...
- C++学习26 运算符重载的概念和语法
所谓重载,就是赋予新的含义.函数重载(Function Overloading)可以让一个函数名有多种功能,在不同情况下进行不同的操作.运算符重载(Operator Overloading)也是一个道 ...
- 【译】深入理解python3.4中Asyncio库与Node.js的异步IO机制
转载自http://xidui.github.io/2015/10/29/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3python3-4-Asyncio%E5%BA%93% ...
- Nginx作为简单代理服务器（Windows环境）
Nginx一个频繁的应用是作为代理服务器,由Nginx代理服务器接受客户请求,并将客户请求发送到应用服务器处理,接受应用服务器的响应,然后将响应发送给客户. 现在要做的一个应用场景就是当客户请求图片资 ...