Slow rendering of Big Treegrid in Internet Explorer and Safari

EasyUI Forum

May 15, 2024, 08:43:27 PM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > Slow rendering of Big Treegrid in Internet Explorer and Safari

Pages: [1]

« previous next »

Author

Topic: Slow rendering of Big Treegrid in Internet Explorer and Safari (Read 13557 times)

enzo

Newbie

Posts: 3

Slow rendering of Big Treegrid in Internet Explorer and Safari

« 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.

Code:

<!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>


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: Slow rendering of Big Treegrid in Internet Explorer and Safari

« Reply #1 on: November 07, 2013, 07:26:09 PM »

Please set 'rownumbers' property to false to increase performance.


	Logged

enzo

Newbie

Posts: 3

Re: Slow rendering of Big Treegrid in Internet Explorer and Safari

« Reply #2 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.


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: Slow rendering of Big Treegrid in Internet Explorer and Safari

« Reply #3 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

Code:

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);


	Logged

Pages: [1]

« previous next »