easyui datagrid 大数据加载效率慢,优化解决方法(推荐)

 更新时间:2016年11月09日 10:17:38   投稿:jingxian  
下面小编就为大家带来一篇easyui datagrid 大数据加载效率慢,优化解决方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

在使用easyui datagrid途中发现加载数据的效率真的不是一般的差。经测试IE8加载300条数据就感觉明显的慢了,加载2000条数据就另人崩溃用时差不多60秒,就算在google浏览器测试结果也快不了几秒。 平时听闻easyui datagrid效率底下,自己测试才发现真是使人无法忍受。

笔者只好百度,google解决方法,发现一篇文章说改

//1.3.3版本是这样的,其它版本也是这句代码 
$(_1e0).html(_1e4.join("")); 

改为:

$(_1e0)[0].innerHTML = _1e4.join(""); 

笔者找了类似的地方修改,测试后结果还是一样。没有任何效果,可能是跟作者的版本不同,我的是1.3版,作者是的1.33版。

忙了半天,只好自己续步调试追踪。经过努力终于找到了导致慢的真正凶手。真正造成慢的代码如下:

for (var i = 0; i < trs2.length; i++) {
var tr1 = $(trs1[i]);
var tr2 = $(trs2[i]);
tr1.css("height", "");
tr2.css("height", "");
var _43f = Math.max(tr1.height(), tr2.height());
tr1.css("height", _43f);
tr2.css("height", _43f);
}

看代码就清楚,上面是对比表格中两行的高度,然后把高的赋值给各行。

解决:凶手找到了,怎样解决呢?笔者是直接屏蔽她们的对比和赋值。让浏览器自动适应高度吧。

如下:

for (var i = 0; i < trs2.length; i++) {

/*
var tr1 = $(trs1[i]);
var tr2 = $(trs2[i]);
tr1.css("height", "");
tr2.css("height", "");
var _43f = Math.max(tr1.height(), tr2.height());
tr1.css("height", _43f);
tr2.css("height", _43f);

*/
}

好了,屏蔽后。让我们测试效率。测试一万条记录,测试代码片段如下:

var obj = { 'total': 100, 'rows': [{ id: '1', name: '一' }, { id: '2', name: '二'}] };
for (var i = 0; i < 10000; i++) {
var row = ({ id: 'id' + i, name: '一' });
obj.rows.push(row);
}
$('#tt').datagrid({
url: null,
pagination: true,
pageSize: 20,
pageNumber: 1,
rownumbers: true,
fitColumns: false,
columns: [[
{ field: 'id', title: 'id', width: 100 },
{ field: 'name', title: 'Name', width: 100 }
]]

});
$('#tt').datagrid('loadData', obj);

好了,现在是10000条记录啊,IE8只用1秒不到加载完成。改成3000条记录,只要1~2秒加载完成。

结论:把那该死设置高度代码直接屏蔽。嘻嘻,有惊喜。EASYUI版本:1.3版

以上这篇easyui datagrid 大数据加载效率慢,优化解决方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 使用jquery提交form表单并自定义action的实现代码

    使用jquery提交form表单并自定义action的实现代码

    下面小编就为大家带来一篇使用jquery提交form表单并自定义action的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 基于jquery实现九宫格拼图小游戏

    基于jquery实现九宫格拼图小游戏

    这篇文章主要为大家详细介绍了基于jquery实现九宫格拼图小游戏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • jQuery Ajax请求状态管理器打包

    jQuery Ajax请求状态管理器打包

    现在的网站,在一个网页中有异步请求甚至许多个异步请求已经不足为奇。Ajax已经成为了现在网站必须的基本功能,使网页应用更接近于桌面应用
    2012-05-05
  • jQuery分页插件jquery.pagination.js使用方法解析

    jQuery分页插件jquery.pagination.js使用方法解析

    这篇文章主要为大家详细解析了jQuery分页插件jquery.pagination使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • jQuery简单实现验证邮箱格式

    jQuery简单实现验证邮箱格式

    这篇文章主要介绍了jQuery简单实现验证邮箱格式的相关资料,需要的朋友可以参考下
    2015-07-07
  • jQuery对象和DOM对象的相互转化实现代码

    jQuery对象和DOM对象的相互转化实现代码

    jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;例如$("#img").attr("src","test.jpg"); 这里的$("#img")就是jQuery对象;
    2010-03-03
  • jQuery EasyUI编辑DataGrid用combobox实现多级联动

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-08-08
  • 详解JQuery基础动画操作

    详解JQuery基础动画操作

    这篇文章主要介绍了JQuery基础动画操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 详谈表单格式化插件jquery.serializeJSON

    详谈表单格式化插件jquery.serializeJSON

    下面小编就为大家带来一篇详谈表单格式化插件jquery.serializeJSON。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 浅谈jquery中ajax跨域提交的时候会有2次请求的问题

    浅谈jquery中ajax跨域提交的时候会有2次请求的问题

    下面小编就为大家带来一篇浅谈jquery中ajax跨域提交的时候会有2次请求的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11

最新评论