Title: Slow rendering of Big Treegrid in Internet Explorer and Safari
Post by: enzo on November 06, 2013, 07:09:00 AM
Hi, I have a performance problem with the treegrid. I need a treegrid much rows in the Grid (> 7000 nodes). it works fine in firefox, but not in IE and Safari. Who can help or have solved the same problem? Here is a prototype to show the problem. <!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>Big Treegrid prototype</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
loadLocal();
});
function loadLocal(){
var tree = [];
var nodes = [];
var cnt = 0;
var parent = 0;
for(var i=1; i<=4000; i++){
var amount = Math.floor(Math.random()*1000);
var price = Math.floor(Math.random()*1000);
nodes.push({
"id": i,
"date": $.fn.datebox.defaults.formatter(new Date()),
"name": 'Name '+i,
"amount": amount,
"price": price,
"cost": amount*price,
"note": 'Note '+i,
"_parentId": parent,
"p": parent,
});
cnt++;
if (cnt == 500) {
parent++;
cnt=0;
}
if (parent == 0){
parent++;
}
}
tree = {
total: nodes.length,
rows: nodes
}
$('#tg').treegrid('loadData', tree);
}
function load(){
loadLocal();
}
</script>
</head>
<body>
<h2>Big Treegrid prototype</h2>
<table id="tg" class="easyui-treegrid" style="width:935px;height:1000px;"
data-options="iconCls: 'icon-ok',rownumbers: true,idField: 'id',treeField: 'name',collapsible:true,nowrap:true,method:'get'">
<thead>
<tr>
<th field="name" width="200">Name</th>
<th field="id" width="80">Inv No</th>
<th field="date" width="100">Date</th>
<th field="p" width="80" align="right">Parent</th>
<th field="price" width="80" align="right">Price</th>
<th field="cost" width="100" align="right">Cost</th>
<th field="note" width="110">Note</th>
</tr>
</thead>
</body>
</html>
Title: Re: Slow rendering of Big Treegrid in Internet Explorer and Safari
Post by: stworthy on November 07, 2013, 07:26:09 PM
Please set 'rownumbers' property to false to increase performance.
Title: Re: Slow rendering of Big Treegrid in Internet Explorer and Safari
Post by: enzo on November 11, 2013, 03:56:04 AM
if i set the rownumbers to false. The Performance will bei a little bit better for initial rendering.
But if you want to work with the loaded nodes is is slow...
some examples:
- click on the row 7000 the focus needs very long.
- collapasing a treenode needs much time too.
Title: Re: Slow rendering of Big Treegrid in Internet Explorer and Safari
Post by: stworthy on November 11, 2013, 05:52:39 PM
Please try to use lazy loading tech to get a better user experience. The lazy loading tutorial is available from http://www.jeasyui.com/tutorial/tree/treegrid5.php var tg = $('#tg');
tg.treegrid({
loadFilter:function(data,parentId){
function setData(){
var todo = [];
for(var i=0; i<data.length; i++){
todo.push(data[i]);
}
while(todo.length){
var node = todo.shift();
if (node.children){
node.state = 'closed';
node.children1 = node.children;
node.children = undefined;
todo = todo.concat(node.children1);
}
}
}
setData(data);
var tg = $(this);
var opts = tg.treegrid('options');
opts.onBeforeExpand = function(row){
if (row.children1){
tg.treegrid('append',{
parent: row[opts.idField],
data: row.children1
});
row.children1 = undefined;
tg.treegrid('expand', row[opts.idField]);
}
return row.children1 == undefined;
};
return data;
}
});
var view = tg.treegrid('options').view;
var data = view.transfer.call(view,tg[0],null,nodes);
tg.treegrid('loadData', data);
|