EasyUI datagrid优化-白红宇

EasyUI datagrid优化

阅读量：5876 次

发布时间：2019-06-19

本文共 4002 字，大约阅读时间需要 13 分钟。

easyui datagrid 在IE上加载速度慢, 150行数据就无法忍受了. firefox加载速度还可以.

jquery easyui datagrid使用参考

http://www.cnblogs.com/youring2/archive/2013/03/01/2938661.html

优化的点有2个:

(1) column的宽度不能设置为自适应, 否则grid刷新速度很慢.

(2) 采用datagrid-scrollview 方式来渲染数据.

参考文章有:

http://blog.csdn.net/yanghongchang_/article/details/8017715

http://blog.csdn.net/zjh527/article/details/9144629

我的IE 8兼容的版本选择组合(已过时, 仅留个记录):

(1) jquery_easyui V1.3.2, 这是最后一个支持IE8 的版本.

(2) jQuery version 1.8.0, 取自jquery_easyui V1.3.2的下载包中, 和IE8兼容, V1.9以上版本与IE8不兼容.

(3) Bootstrap v3.0.3, 不能使用v3.3.1, 因为v3.3.1需要 jQuery version 1.9.1+. Bootstrap 各版本的下载地址: https://github.com/twbs/bootstrap/tags

(4) easyui的 datagrid-scrollview.js, 采用了easyui官方提供最新版datagrid-scrollview.js

官网最新的版本地址是: http://www.jeasyui.com/easyui/datagrid-scrollview.js

老版本: https://raw.githubusercontent.com/agusneos/template/master/assets/easyui/datagrid-scrollview.js

在引入了datagrid-scrollview.js后, 解决了加载速度问题, 但也有下面新的问题:

a.老版本datagrid-scrollview.js, 问题是:

firefox/IE中, 快速拖动滚动条, 会自动重新从后台DB加载数据.

b.官方新版datagrid-scrollview.js, 问题是:

firefox, 快速拖动滚动条, 会自动重新从后台DB加载数据.

IE, 拖动滚动条, 会有语法错误警告, 但不会自动重新从后台DB加载数据, 好在不影响使用.

下面是20150225 更新, 下载了jQuery EasyUI 最新版1.4.1.x, 发现之前碰到的IE8 js脚本报错的问题(报错但不影响正常使用), 现在都解决了.

IE 8兼容的版本选择组合(基于JQuery v1.11.2, 20150225 更新):

jQuery v1.11.2, 下载 http://www.jeasyui.com/easyui/jquery.min.js

Bootstrap v3.3.2 , 下载 https://github.com/twbs/bootstrap/tags

jQuery EasyUI 1.4.1.x, 下载 http://www.jeasyui.com/easyui/jquery.easyui.min.js

datagrid-scrollview.js, 下载 http://www.jeasyui.com/easyui/datagrid-scrollview.js

IE 8兼容的版本选择组合(基于JQuery v1.8, 20150225 更新):

jQuery v1.8.0

Bootstrap v3.0.3 , 下载 https://github.com/twbs/bootstrap/tags

jQuery EasyUI 1.4.1.x, 下载 http://www.jeasyui.com/easyui/jquery.easyui.min.js

datagrid-scrollview.js, 下载 http://www.jeasyui.com/easyui/datagrid-scrollview.js

另外, 最新的jquery-easyui-1.4.1 版本中, 新引入了 easyui-textbox 组件, 使用方式和 easyui-combobox 差不多, 风格也都是flat样式, 用起来还方便, 但在V1.3.2只能使用标准的input. 为了风格统一, 需要定制一下样式.

html代码:

<input id="tbName" name="tbName" class="textbox_readonly" readonly size="29" value="{

{your_name}}" >

flat风格的css样式

/* ----------Text Boxes------------*/

.textbox_flat {

border: 1px solid #6297BC;

}

.textbox_readonly {

border: 1px dotted #000000;

outline:0;

height:22px;

}

下面javascript代码, 获取textbox的内容

yourName = $('#tbName').val()

总体来讲, easyui datagrid在显示大数据量的时候, 性能还是不太高, 下面几个替代也许可以.

jqGrid

https://free-jqgrid.github.io

http://www.trirand.com/blog/jqgrid/jqgrid.html

SlickGrid

https://github.com/mleibman/SlickGrid/wiki

jqxgrid

http://www.jqwidgets.com/

确定以后 grid 基本都是用 jqgrid 了, 我选择的是free-jqgrid分支版, jqgrid优点很多: 加载大量数据时效率很好, 支持排序, 支持过滤, 支持resize, 支持分页, 支持export excel, 支持上下键导航, 支持cell formatter, 支持 row的group, 支持tree node, 支持header的group, 支持列冻结, 支持 master-detail, 支持sub grid.

选择不同的jquery ui theme , jqgrid 的 theme 会跟着变.

关于License:

原版 jqgrid 4.7.0 和之前的版本是可以在商业应用中免费使用, jqgrid 4.7.1商业中需要购买, 冠名为 Guriddo jqGrid

Oleg 基于 jqgrid 4.7.0 fork了一个free-jqgrid版本, license 和 jqgrid 4.7.0 一致.

license 说明, http://stackoverflow.com/questions/28529308/jqgrid-license-with-mit-gpl-v2-vs-guriddo-jqgrid-js-creative-commons-license

Jqgrid相关资源:

free-jqgrid 分支的release, https://github.com/free-jqgrid/jqGrid/releases

free-jqgrid的文档: https://free-jqgrid.github.io

jqgrid 3.7 demo的页面, 虽然版本老了点, 但demo组织的非常好, http://www.trirand.com/blog/jqgrid/jqgrid.html

guriddo分支的demo页面, http://www.guriddo.net/demo/guriddojs/

中文jqgrid资源

jqgrid export to excel, 有很好的option说明, 另外将本项目的jqGridExportToExcel.js, 再结合Jordi Burgos 的 ExcellentExport.js应该能做一个通用的纯客户端的data export功能.