<html> <head> <title>ET2 - Test</title> <script src="jquery.js"></script> <script src="../../../phpgwapi/js/jsapi/jsapi.js"></script> <script src="../../../phpgwapi/js/egw_json.js"></script> <script src="../../../phpgwapi/js/jquery/jquery.tools.min.js"></script> <script src="../../../phpgwapi/js/jquery/jquery-ui.js"></script> <script src="../../../phpgwapi/js/egw_action/egw_action.js"></script> <script src="../../../phpgwapi/js/egw_action/egw_action_common.js"></script> <script> // Create the egw object template window["egw"] = { 'prefsOnly': true }; </script> <script src="../../../phpgwapi/js/jsapi/egw_core.js"></script> <script src="../../../phpgwapi/js/jsapi/egw_utils.js"></script> <script src="../../../phpgwapi/js/jsapi/egw_css.js"></script> <script src="../../../phpgwapi/js/jsapi/egw_debug.js"></script> <script src="../../../phpgwapi/js/jsapi/egw_inheritance.js"></script> <script src="../et2_core_inheritance.js"></script> <script src="../et2_core_interfaces.js"></script> <script src="../et2_core_common.js"></script> <script src="../et2_extension_nextmatch_dynheight.js"></script> <script src="../et2_dataview_interfaces.js"></script> <script src="../et2_dataview_controller.js"></script> <script src="../et2_dataview_controller_selection.js"></script> <script src="../et2_dataview_model_columns.js"></script> <script src="../et2_dataview_view_aoi.js"></script> <script src="../et2_dataview_view_rowProvider.js"></script> <script src="../et2_dataview_view_container.js"></script> <script src="../et2_dataview_view_grid.js"></script> <script src="../et2_dataview_view_spacer.js"></script> <script src="../et2_dataview_view_row.js"></script> <script src="../et2_dataview_view_resizeable.js"></script> <script src="../et2_dataview.js"></script> <link rel="StyleSheet" type="text/css" href="./test.css" /> <link rel="StyleSheet" type="text/css" href="./grid.css" /> </head> <body> <h1>EGroupware ETemplate2 Dataview Test</h1> <div> <button id="update">Update</button> <button id="refresh">Refresh</button> <span id="range" style="float: right; font-size: 12pt; padding-right: 10px">0-0</span> </div> <div id="container" style="margin:0; padding:0;"> </div> <script type="text/javascript"> document.getElementById("update").onclick = function () { controller.update(); }; document.getElementById("refresh").onclick = function () { controller.reset(); }; // The column data object contains the data which is used to setup // the column properties (visibility, width) etc. "caption" is only // used to build the column selection menu (which is not used in // this example) var columnData = [ { "id": "col_0", "caption": "Name", "visibility": ET2_COL_VISIBILITY_VISIBLE, "width": "50%" }, { "id": "col_1", "caption": "Size", "visibility": ET2_COL_VISIBILITY_VISIBLE, "width": "auto" }, { "id": "col_2", "caption": "Creation Date", "visibility": ET2_COL_VISIBILITY_VISIBLE, "width": "auto" } ]; var data = new Array(1000); for (var i = 0; i < data.length; i++) { data[i] = "uid_" + i; } var dataprovider = ClassWithAttributes.extend(et2_IDataProvider, { dataFetch: function (_queriedRange, _callback, _context) { var response = { "order": data.slice(_queriedRange.start, _queriedRange.start + _queriedRange.num_rows), "total": data.length }; window.setTimeout(function () { _callback.call(_context, response) }, Math.round(100 + Math.random() * 750)); }, dataRegisterUID: function (_uid, _callback, _context) { _callback.call(_context, { "caption": "Row " + _uid }); }, dataUnregisterUID: function (_uid, _callback, _context) { // } }); /** * The row callback gets called by the gridview controller whenever * the actual DOM-Nodes for a node with the given data have to be * created. */ function rowCallback(_data, _row, _idx) { var tr = _row.getDOMNode(); var row = dataview.rowProvider.getPrototype("default"); $j("div", row).each(function () { $j(this).text("#" + _idx + " " + _data.caption) }); $j(tr).append(row.children()); _row.makeExpandable(true, function () { var grid = new et2_dataview_grid(_row, dataview.grid); var controller = new et2_dataview_controller(grid, new dataprovider(), rowCallback, linkCallback, null, objectManager); controller.update(); return grid; }); } function linkCallback() { return []; } // The dynheight object is responsible for automatically resizing // the gridContainer to its maximum extends var dynheight = new et2_dynheight(window, $j("#container"), 150); // The et2_dataview_gridContainer object is the outer grid container // which is responsible for displaying the columns etc. var dataview = new et2_dataview($j("#container"), egw(window)); // Load the column data dataview.setColumns(columnData); // Register the callback for displaying the range dataview.grid.setInvalidateCallback(function (range) { $j("#range").text("Showing elements " + (range.top + 1) + " - " + (range.bottom + 1) + " of " + dataview.grid.getTotalCount()); }); // Create the action manager and the object manager (optional) var actionManager = egw_getActionManager("test"); var objectManager = egw_getObjectManager("test"); // Create the gridview controller var controller = new et2_dataview_controller(dataview.grid, new dataprovider(), rowCallback, linkCallback, null, objectManager); // Trigger the initial update controller.update(); // Write something inside the column headers for (var i = 0; i < columnData.length; i++) { $j(dataview.getHeaderContainerNode(i)).text(columnData[i].caption); } // Register a resize callback $j(window).resize(function() { dynheight.update(function(_w, _h) { dataview.resize(_w, _h); }); }); $j(window).resize(); </script> </body> </html>