forked from extern/egroupware
c7122b1006
and performs quite well (just some non-objective data): Lines | IE 7/8 | FF | Chrome --------------------------------------------- 1000 | fast | very fast | very fast 10000 | ok | fast | very fast 100000 | still ok | ok | fast (Performance might still be optimized but this does not really help right now). The code for dynamic data loading has been written but still has to be tested. Work which still has to be done to have a fully functional grid view: - Data columns have to be generated correctly - Displaying trees has to be tested, but should work more or less out-of-the-box due to the design of the grid containers - Client side manipulation of data (sorting/filtering...) - most functionality is already there but not yet used (will be tested alongside with the filemanager)
107 lines
2.4 KiB
HTML
107 lines
2.4 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>Grid Test</title>
|
|
|
|
<!-- Basic action stuff -->
|
|
<script src="../egw_action.js"></script>
|
|
<script src="../egw_action_common.js"></script>
|
|
|
|
<!-- Grid stuff -->
|
|
<script src="../egw_grid_view.js"></script>
|
|
<script src="../egw_grid_columns.js"></script>
|
|
<script src="../egw_grid_data.js"></script>
|
|
<script src="../egw_grid.js"></script>
|
|
|
|
<script src="js/jquery.js"></script>
|
|
<link rel="stylesheet" href="grid.css"/>
|
|
</head>
|
|
<body>
|
|
<h1>Test for dynamically displaying and loading grid lines (0,1 Mio Entries)</h1>
|
|
<div id="container"></div>
|
|
<script>
|
|
var grid = null;
|
|
var actionManager = null;
|
|
var objectManager = null;
|
|
|
|
var columns =
|
|
[
|
|
{
|
|
"caption": "Name",
|
|
"width": "33%",
|
|
"type": EGW_COL_TYPE_NAME_ICON_FIXED
|
|
},
|
|
{
|
|
"id": "size",
|
|
"caption": "Size"
|
|
},
|
|
{
|
|
"id": "rights",
|
|
"caption": "UNIX Filerights",
|
|
"default": "---------"
|
|
},
|
|
{
|
|
"id": "mime",
|
|
"caption": "File-Type/MIME"
|
|
},
|
|
{
|
|
"id": "atime",
|
|
"caption": "atime"
|
|
},
|
|
{
|
|
"id": "ctime",
|
|
"caption": "ctime"
|
|
},
|
|
{
|
|
"id": "mtime",
|
|
"caption": "mtime"
|
|
},
|
|
{
|
|
"id": "owner",
|
|
"caption": "owner"
|
|
},
|
|
{
|
|
"id": "group",
|
|
"caption": "group"
|
|
}
|
|
];
|
|
|
|
function fetchDataProc(_elems, _columns)
|
|
{
|
|
console.log("Fetch Data Proc: ", _elems, _columns);
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
actionManager = new egwActionManager();
|
|
objectManager = new egwActionObjectManager("", actionManager);
|
|
|
|
grid = new egwGrid($("#container"), columns, objectManager, fetchDataProc,
|
|
window);
|
|
grid.dataRoot.loadData(
|
|
[
|
|
{
|
|
"entryType": EGW_DATA_TYPE_RANGE,
|
|
"prefix": "root_elem_",
|
|
"count": 100000
|
|
}
|
|
]
|
|
);
|
|
grid.resize(1500, 650);
|
|
});
|
|
|
|
function check_positions()
|
|
{
|
|
var g = grid.gridOuter.grid;
|
|
var delta = - g.scrollarea.offset().top;
|
|
for (var i = 0; i < g.children.length; i++)
|
|
{
|
|
var rtop = g.children[i].parentNode.offset().top + g.scrollarea.scrollTop() - g.scrollarea.offset().top;
|
|
var itop = g.children[i].position;
|
|
|
|
console.log(Math.round(itop - rtop));
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|