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>
Show Posts
