EasyUI datagrid优化
jquery easyui datagrid使用参考
优化的点有2个:
(1) column的宽度不能设置为自适应, 否则grid刷新速度很慢.
(2) 采用datagrid-scrollview 方式来渲染数据.
参考文章有:
http://blog.csdn.net/yanghongchang_/article/details/8017715
http://blog.csdn.net/zjh527/article/details/9144629
(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代码:
flat风格的css样式
/* ----------Text Boxes------------*/
.textbox_flat {
border: 1px solid #6297BC;
}
border: 1px dotted #000000;
outline:0;
height:22px;
}
下面javascript代码, 获取textbox的内容
yourName = $('#tbName').val()
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/
