Easyui DataGrid Optimization

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.