Easyui The DataGrid is slow to load on IE, 150 rows of data will be unbearable. Firefox loading speed is also possible.
The optimized points are 2:
(1) The width of column cannot be set to adaptive, otherwise the grid refresh rate is slow.
(2) Using Datagrid-scrollview method to render the data.
Reference articles are:
http://blog.csdn.net/yanghongchang_/article/details/8017715
http://blog.csdn.net/zjh527/article/details/9144629
My version selection:
(1) Jquery_easyui V1.3.2, this is the last version that supports IE8.
(2) JQuery version 1.8.0, taken from the Jquery_easyui V1.3.2 download package, is compatible with IE8, and the new version is incompatible with IE8.
(3) Bootstrap v3.0.3, cannot use v3.3.1, because v3.3.1 need jQuery version 1.9.1+. Bootstrap versions of: Https://github.com/twbs/bootstrap/tags
(4) Easyui Datagrid-scrollview.js, Easyui officially provide the latest version datagrid-scrollview.js and Jquery_easyui V1.3.2 compatibility problems,
Compatible version: Https://raw.githubusercontent.com/agusneos/template/master/assets/easyui/datagrid-scrollview.js
The latest version of the official website address is: http://www.jeasyui.com/easyui/datagrid-scrollview.js
In addition, the latest jquery-easyui-1.4.1 version, the introduction of the Easyui-textbox components, using the same way and Easyui-combobox, style is also flat style, easy to use, but in V1.3.2 can only use the standard in Put. For a unified style, you need to customize the style.
HTML code:
<input id= "Tbname" class= "Textbox_flat" readonly style= "width:200px;" Value= "{{your_name}}" >
Flat style CSS Style
/*----------Text Boxes------------*/
. Textbox_flat {
border:1px solid #6297BC;
}
. textbox_readonly {
border:1px dotted #000000;
outline:0;
}
The following JavaScript code to get the contents of a TextBox
YourName = $ (' #tbName '). Val ()
Easyui DataGrid Optimization