Easyui DataGrid Large data loading efficiency is slow, optimized solution (recommended) _jquery

The efficiency of loading data in the Easyui DataGrid is really not that bad. The test IE8 loaded 300 of data will feel significantly slower, loading 2000 data on another crash for almost 60 seconds, even in Google Browser test results can not be faster than a few seconds. Usually hear easyui datagrid efficiency under, oneself test only found really make people unbearable.

I had to Baidu, Google solution, found an article said to change

The 1.3.3 version is this, and the other version is this code 
$ (_1E0). HTML (_1e4.join ("")); 

To

The author found a similar place to modify, after the test results are still the same. No effect, may be different from the author's version, mine is 1.3 version, the author is 1.33 version.

Busy for a long time, had to continue their own debugging tracking. After efforts to finally find the cause of the slow real murderer. The real slow code is as follows:

for (var i = 0; i < trs2.length i++) {
var TR1 = $ (trs1[i]);
var TR2 = $ (trs2[i]);
Tr1.css ("Height", "");
Tr2.css ("Height", "");
var _43f = Math.max (Tr1.height (), Tr2.height ());
Tr1.css ("height", _43f);
Tr2.css ("height", _43f);
}

It's clear from the code that the above is the height of the two rows in the table, and then assign the high values to each row.

Solution: The murderer found, how to solve it? The author is directly shielding their contrast and assignment. Let the browser automatically adapt to the height bar.

As follows:

for (var i = 0; i < trs2.length i++) {/

*
var TR1 = $ (trs1[i]);
var TR2 = $ (trs2[i]);
Tr1.css ("Height", "");
Tr2.css ("Height", "");
var _43f = Math.max (Tr1.height (), Tr2.height ());
Tr1.css ("height", _43f);
Tr2.css ("height", _43f);

*/
}

Okay, after the shield. Let's test efficiency. Test 10,000 records and test the code fragment as follows:

var obj = {' Total ': ' Rows ': [{id: ' 1 ', Name: ' One '}, {id: ' 2 ', Name: ' Two '}]};
for (var i = 0; i < 10000; i++) {
var row = ({id: ' ID ' + I, Name: ' One '});
Obj.rows.push (row);
$ (' #tt '). DataGrid ({
url:null,
pagination:true,
pagesize:20,
pagenumber:1,
rownumbers:  True,
fitcolumns:false,
columns: [[[
{field: ' id ', title: ' Id ', width:100},
{field: ' Name ', title: ' Name ', width:100}
]]

};
$ (' #tt '). DataGrid (' LoadData ', obj);

OK, now 10,000 records, IE8 only 1 seconds to complete the load. Change to 3,000 records, as long as 1-2 seconds to complete the load.

Conclusion: Put that damn set of height code directly shielded. Xi hee, there are surprises. Easyui Version: 1.3 Edition

The above Easyui DataGrid large data loading efficiency is slow, optimization solution (recommended) is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.