EasyUI datagrid优化

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功能.
  http://www.codeproject.com/Tips/784342/Export-Data-from-jqGrid-into-a-real-Excel-File

keepfool的博客总是很棒的, 博文: 细说jquery ui和jqgrid的ASP.NET实现
   http://www.cnblogs.com/keepfool/archive/2012/01/05/2313692.html

一系列jqgrid的文章
  http://blog.csdn.net/gengv/article/category/637232

jQuery学习笔记--jqGrid的属性列表
  http://blog.csdn.net/hurryjiang/article/details/6888002
  http://blog.csdn.net/hurryjiang/article/details/6959362

jqGrid整理
  http://www.cnblogs.com/mycoding/archive/2011/07/07/2099878.html

jqGrid 中文实例demo
  http://blog.mn886.net/jqGrid/