swat.obsolete/apps/qooxdoo-examples/test/HtmlTable_2.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo</title>
   5   <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/qx.js"></script>
  10 </head>
  11 <body>
  12   <script type="text/javascript" src="../../script/layout.js"></script>
  13
  14   <div id="demoDescription">
  15     <p>Test table with fixed column widths: 100, 50, 10, 30 and 20 pixel.</p>
  16   </div>
  17
  18   <textarea id="info" style="position:absolute; top:48px; left:20px; width:600px;height:50px;border:1px solid black"></textarea>
  19   <div id="view" style="position:absolute;top:148px;left:20px;width:400px;height:500px;border:1px solid black"></div>
  20   <div id="scroller" style="position: absolute; top:148px; left:420px;height:500px;width:24px;border:1px solid black;overflow:scroll"><div id="scrollerContent" style="width:1px;height:5000px"></div></div>
  21
  22
  23   <script type="text/javascript">
  24   qx.core.Init.getInstance().defineMain(function()
  25   {
  26     var updateCount = 0;
  27
  28     var tableHeight = 512;
  29
  30     var entryCount = 1000;
  31
  32     var rowHeight = 16;
  33     var rowCount = Math.floor(tableHeight / rowHeight);
  34
  35     var view = document.getElementById("view");
  36     var info = document.getElementById("info");
  37     var scroller = document.getElementById("scroller");
  38     var scrollerContent = document.getElementById("scrollerContent");
  39
  40
  41
  42     view.style.height = scroller.style.height = tableHeight + "px";
  43     scrollerContent.style.height = Math.round(entryCount / rowCount * tableHeight) + "px";
  44
  45
  46
  47
  48     var data = [];
  49
  50     for (var i=0; i<1000; i++) {
  51       data.push({ col1 : "hello" + i, col2 : "world" + i, col3 : "foo" + i, col4 : "bar" + i, col5 : "baz" + i });
  52     };
  53
  54     var cache = [];
  55
  56     var undef = "undefined";
  57
  58     var HTML =
  59     {
  60       table_start : '<table cellspacing="0" cellpadding="0" style="table-layout:fixed;width:210px"><colgroup><col width="100"/><col width="50"/><col width="10"/><col width="30"/><col width="20"/></colgroup><tbody>',
  61       table_end : "</tbody></table>",
  62
  63       tr_start : "<tr>",
  64       tr_start_open : "<tr ",
  65       tr_start_close : ">",
  66       tr_end : "<tr>",
  67
  68       td_start : '<td style="overflow:hidden;height:15px;border-right:1px solid red;border-bottom:1px solid red;padding-left:2px;padding-right:2px">',
  69       td_end : "</td>"
  70     };
  71
  72     function arrayAppend(arr, a) {
  73       Array.prototype.push.apply(arr, a);
  74     };
  75
  76     function getCellHtml(cdata)
  77     {
  78       var html = [ HTML.td_start, cdata, HTML.td_end ];
  79
  80       return html;
  81     };
  82
  83     function getRowHtml(rdata, nr)
  84     {
  85       if (typeof cache[nr] != undef) {
  86         return cache[nr];
  87       };
  88
  89       var html = [];
  90       html.push(HTML.tr_start_open);
  91
  92       if (nr % 2 == 0)
  93       {
  94         html.push("style='background-color:#fff'");
  95       };
  96
  97       html.push(HTML.tr_start_close);
  98
  99       for (var row in rdata) {
 100         arrayAppend(html, getCellHtml(rdata[row]));
 101       };
 102
 103       html.push(HTML.tr_stop);
 104
 105       cache[nr] = html;
 106
 107       return html;
 108     };
 109
 110     function buildTableHtml(start, len)
 111     {
 112       var ttstart = (new Date).valueOf();
 113
 114       var html = [];
 115
 116       html.push(HTML.table_start);
 117
 118       for (var i=start, s=start+len; i<s; i++) {
 119         arrayAppend(html, getRowHtml(data[i], i));
 120       };
 121
 122       html.push(HTML.table_end);
 123       view.innerHTML = html.join("");
 124
 125       updateCount++;
 126
 127       var ttend = (new Date).valueOf();
 128       info.value = "Update: " + updateCount + "\nRows: " + start + " - " + (start+len) + "\n" + (ttend-ttstart) + "ms\n";
 129     };
 130
 131     function doscroll() {
 132       buildTableHtml(Math.floor(scroller.scrollTop/rowHeight), rowCount);
 133     };
 134
 135     qx.dom.DomEventRegistration.addEventListener(scroller, "scroll", doscroll);
 136     doscroll();
 137   });
 138   </script>
 139 </body>
 140 </html>