mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-10-09 11:43:25 +02:00
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)
200 lines
4.6 KiB
HTML
200 lines
4.6 KiB
HTML
<html>
|
|
<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.js"></script>
|
|
<script src="js/jquery.js"></script>
|
|
<link rel="stylesheet" href="grid.css"/>
|
|
|
|
<!-- Popup stuff -->
|
|
<link rel="stylesheet" type="text/css" href="skins/dhtmlxmenu_egw.css">
|
|
<script src="js/dhtmlxcommon.js"></script>
|
|
<script src="js/dhtmlxmenu.js"></script>
|
|
<script src="js/dhtmlxmenu_ext.js"></script>
|
|
<script src="../egw_action_popup.js"></script>
|
|
<script src="../egw_menu.js"></script>
|
|
<script src="../egw_menu_dhtmlx.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="container" style="height: 300px"></div>
|
|
<script>
|
|
var grid = null;
|
|
var actionManager = null;
|
|
var objectManager = null;
|
|
|
|
function alertClicked(_action, _senders)
|
|
{
|
|
var ids = "";
|
|
for (var i = 0; i < _senders.length; i++)
|
|
ids += _senders[i].id + ((i < _senders.length - 1) ? ", " : "");
|
|
|
|
alert("Action '" + _action.caption + "' executed on elements '"
|
|
+ ids + "'");
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
actionManager = new egwActionManager();
|
|
actionManager.updateActions(
|
|
[
|
|
{
|
|
"id": "folder_open",
|
|
"iconUrl": "imgs/folder.png",
|
|
"caption": "Open folder",
|
|
"onExecute": alertClicked,
|
|
"allowOnMultiple": false,
|
|
"type": "popup",
|
|
"default": true
|
|
},
|
|
{
|
|
"id": "file_view",
|
|
"iconUrl": "imgs/view.png",
|
|
"caption": "View",
|
|
"onExecute": alertClicked,
|
|
"allowOnMultiple": false,
|
|
"type": "popup",
|
|
"default": true
|
|
},
|
|
{
|
|
"id": "file_preview",
|
|
"iconUrl": "imgs/preview.png",
|
|
"caption": "Preview",
|
|
"onExecute": alertClicked,
|
|
"allowOnMultiple": false,
|
|
"type": "popup",
|
|
"default": true
|
|
},
|
|
{
|
|
"id": "file_delete",
|
|
"iconUrl": "imgs/delete.png",
|
|
"caption": "Delete",
|
|
"onExecute": alertClicked,
|
|
"type": "popup",
|
|
"group": 2
|
|
},
|
|
{
|
|
"id": "file_edit",
|
|
"iconUrl": "imgs/edit.png",
|
|
"caption": "Edit file",
|
|
"onExecute": alertClicked,
|
|
"allowOnMultiple": false,
|
|
"type": "popup"
|
|
},
|
|
{
|
|
"id": "file_compress",
|
|
"iconUrl": "imgs/compress.png",
|
|
"caption": "Create ZIP archive",
|
|
"onExecute": alertClicked,
|
|
"type": "popup",
|
|
"group": 1,
|
|
"order": 1
|
|
},
|
|
{
|
|
"id": "file_email",
|
|
"iconUrl": "imgs/email.png",
|
|
"caption": "E-Mail",
|
|
"onExecute": alertClicked,
|
|
"allowOnMultiple": false,
|
|
"type": "popup",
|
|
"group": 1,
|
|
"order": 0
|
|
},
|
|
{
|
|
"id": "file_compress_email",
|
|
"caption": "Create ZIP and E-Mail",
|
|
"onExecute": alertClicked,
|
|
"type": "popup",
|
|
"group": 1,
|
|
"order": 2
|
|
}
|
|
]
|
|
);
|
|
|
|
|
|
objectManager = new egwActionObjectManager("", actionManager);
|
|
|
|
grid = new egwGrid(document.getElementById("container"),
|
|
[
|
|
{
|
|
"caption": "Name",
|
|
"width": "50%"
|
|
},
|
|
{
|
|
"id": "size",
|
|
"caption": "Size"
|
|
},
|
|
{
|
|
"id": "rights",
|
|
"caption": "<a href=\"http://www.google.de/\">UNIX Filerights</a>",
|
|
"default": "---------"
|
|
},
|
|
{
|
|
"id": "mime",
|
|
"caption": "File-Type/MIME with very long column header caption"
|
|
},
|
|
{
|
|
"id": "atime",
|
|
"caption": "atime",
|
|
"width": "40px"
|
|
},
|
|
{
|
|
"id": "ctime",
|
|
"caption": "ctime",
|
|
"width": "40px"
|
|
},
|
|
{
|
|
"id": "mtime",
|
|
"caption": "mtime",
|
|
"width": "40px"
|
|
},
|
|
{
|
|
"id": "owner",
|
|
"caption": "owner",
|
|
"width": "40px"
|
|
},
|
|
{
|
|
"id": "group",
|
|
"caption": "group",
|
|
"width": "40px"
|
|
}
|
|
]
|
|
);
|
|
|
|
var listboxFolderLinks = [
|
|
{"actionId": "folder_open", "enabled": true},
|
|
{"actionId": "file_compress_email", "enabled": true},
|
|
{"actionId": "file_compress", "enabled": true},
|
|
{"actionId": "file_delete", "enabled": true}
|
|
];
|
|
|
|
var info =
|
|
{
|
|
"size": "16KiB",
|
|
"mime": "Directory"
|
|
}
|
|
|
|
grid.beginUpdate();
|
|
function recurse_add(item, obj, depth)
|
|
{
|
|
for (var i = 1; i <= 20; i++)
|
|
{
|
|
var id = "file" + i;
|
|
var it = item.addItem(id, "Test" + i, "imgs/mime16_directory.png", info);
|
|
var _obj = obj.addObject(id, it.getAOI());
|
|
_obj.updateActionLinks(listboxFolderLinks);
|
|
if (depth < 0)
|
|
recurse_add(it, _obj, depth + 1);
|
|
}
|
|
}
|
|
recurse_add(grid, objectManager, 0);
|
|
grid.endUpdate();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|