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

在使用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 大数据加载效率慢,优化解决方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索优化
, easyui
datagrid
easyui datagrid 优化、easyui datagrid 效率、easyui datagrid、easyui datagrid 分页、easyui datagrid api,以便于您获取更多的相关知识。

时间: 2024-12-31 11:47:08

easyui datagrid 大数据加载效率慢,优化解决方法(推荐)_jquery的相关文章

jQuery页面加载初始化的3种方法(推荐)_jquery

jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(function(){ alert("第一种方法."); }); 第二种:   $(function(){ alert("第二种方法."); });  第三种: jQuery(function($) { alert("第三种方法."); }); ps; 不用jQu

jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法_jquery

在上篇文章给大家介绍了jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单 先上代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&g

flash as3 中动态加载库类失败解决方法

flash as3 中动态加载库类失败解决方法 这是错误的写法 for (var i:number=1; i<4; i++) { var mc1:mc1 = new mc1(); addchild(mc1); } as3里怎么循环加载库里的mc1 mc2 mc3类 就是下面意思是怎样个的写法 for (var i:number=1; i<4; i++) { var "mc"+i:"mc"+i = new "mc"+i(); addch

大数据加载优化

问题描述 公司最近有个项目页面加载数据量庞大而且还在查询功能现在每次打开页面在一秒到两秒左右现在希望优化到秒开和秒查,请问可谓大神有没有啥好的方案啊 解决方案 解决方案二:一两秒都已经是秒级的了解决方案三:既然是动态网页,那么数据应该是前端拉取的(不管是一次拉取100行,还是10000行),而不是后台生成页面时推送的.解决方案四:这谈不上什么"好的方案",而是前端后端的编程之道根本就不同.如果你们没有前端编程技术,那么一切跟现代web页面有关的编程设计方面东西,可能都比较费劲,可能你们

轻松搞定 easyui datagrid 二次加载的问题

对于使用url方式的初学者,经常碰到重复请求的问题,这个问题的根源是因为一旦设置了url参数,Datagrid组件在实例化的时候就会做请求,如何避免二次加载这样问题呢,个人觉得注意以下两点基本就可以防止二次加载了. 使用load和reload函数去动态加载数据,而不是选择再次渲染组件,而再次渲染组件的目的仅仅是为了设置url,这得不偿失,url的设置可以通过options方法获取到组件实例的opts,然后在给opts.url重新赋值即可: 用class方式注册组件,一般只将属性写在DOM里,而事

php命令行(cli)模式下报require 加载路径错误的解决方法_php技巧

今天,同事突然告诉我,我写的一个做计划任务的php脚本执行总是不成功. 脚本本身很简单,里面只有包含了几个库文件并执行了一个函数,函数应该没有错误,这个函数在别处也调用过,没有问题.我在本地用浏览器访问页面,执行成功,看来没有问题,我有点怀疑是同事的计划任务的问题.我又打开命令行,用php直接执行脚本,这回报错了,是require 包含文件错误,看来是路径不对. 不明白是什么原因引起的,只是从报错来看是路径不对,我猜测是跟相对路径有关,于是把相对路径的全部改成绝对路径,再执行,问题解决. 在百度

EXTJs图片加载很慢的解决方法

extjs的例子时,经常会去访问 yun_qi_img/s.gif ,如果一些不能访问国外网站的朋友(如:校园网,公司限制上网),就会等很久时间,虽然没有什么影响,但也但也非常不爽.   ext.blank_image_url = "<%=response.request.getcontextpath()%>/js/ext/resources/images/default/s.gif"; 其实这一个总是很容易解决,只要在ext.onready()方法之前(或者方法的第一句)

asp.net updatepanel 导致JS不能加载,而无法使用的解决方法_实用技巧

复制代码 代码如下: <script type="text/javascript" language="javascript">    var prm = Sys.WebForms.PageRequestManager.getInstance();    prm.add_endRequest(function () {        // re-bind your jquery events here          $(document).ready

IE6图片加载的一个BUG解决方法_javascript技巧

代码如下: 复制代码 代码如下: <!--[if IE 6]><script type="text/javascript"> try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} </script><![endif]--> 注:这个BUG以前就已经发现了,这里只是再次提出来. 更详细的说明可以参考下面的文章:IE6下默认不缓存背景图片,