码迷,mamicode.com
首页 > 其他好文 > 详细

EasyUI datagrid优化

时间:2015-01-22 14:48:41      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:

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

优化的点有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兼容, 再新的版本与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和jquery_easyui V1.3.2兼容有问题,
兼容的版本: https://raw.githubusercontent.com/agusneos/template/master/assets/easyui/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"  class="textbox_flat" readonly  style="width:200px;"  value="{{your_name}}" >

flat风格的css样式
/* ----------Text Boxes------------*/
.textbox_flat {
    border: 1px solid #6297BC;
}

.textbox_readonly {
    border: 1px dotted #000000;
    outline:0;    
}
 
 
下面javascript代码, 获取textbox的内容
yourName = $(‘#tbName‘).val()

EasyUI datagrid优化

标签:

原文地址:http://www.cnblogs.com/harrychinese/p/easyui_datagrid_tuning_and_version.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!