webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/HtmlTable_1.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   <style type="text/css">*{ font-size: 10px; font-family: Verdana }</style>
  15
  16   <div id="demoDescription">
  17     <p>Test table.</p>
  18   </div>
  19
  20   <textarea id="info" style="position:absolute; top:48px; left:20px; width:600px;height:50px;border:1px solid black"></textarea>
  21   <div id="view" style="position:absolute;top:148px;left:20px;width:400px;height:500px;border:1px solid black"></div>
  22   <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>
  23
  24
  25   <script type="text/javascript">
  26   qx.core.Init.getInstance().defineMain(function()
  27   {
  28     var updateCount = 0;
  29
  30     var tableHeight = 512;
  31
  32     var entryCount = 1000;
  33
  34     var rowHeight = 16;
  35     var rowCount = Math.floor(tableHeight / rowHeight);
  36
  37     var view = document.getElementById("view");
  38     var info = document.getElementById("info");
  39     var scroller = document.getElementById("scroller");
  40     var scrollerContent = document.getElementById("scrollerContent");
  41
  42
  43
  44     view.style.height = scroller.style.height = tableHeight + "px";
  45     scrollerContent.style.height = Math.round(entryCount / rowCount * tableHeight) + "px";
  46
  47
  48
  49
  50     var data = [];
  51
  52     for (var i=0; i<1000; i++) {
  53       data.push({ col1 : "hello" + i, col2 : "world" + i, col3 : "foo" + i, col4 : "bar" + i, col5 : "baz" + i });
  54     };
  55
  56     var cache = [];
  57
  58     var undef = "undefined";
  59
  60     var HTML =
  61     {
  62       table_start : "<table><tbody>",
  63       table_end : "</tbody></table>",
  64
  65       tr_start : "<tr>",
  66       tr_start_open : "<tr ",
  67       tr_start_close : ">",
  68       tr_end : "<tr>",
  69
  70       td_start : "<td>",
  71       td_end : "</td>"
  72     };
  73
  74     function arrayAppend(arr, a) {
  75       Array.prototype.push.apply(arr, a);
  76     };
  77
  78     function getCellHtml(cdata)
  79     {
  80       var html = [ HTML.td_start, cdata, HTML.td_end ];
  81
  82       return html;
  83     };
  84
  85     function getRowHtml(rdata, nr)
  86     {
  87       if (typeof cache[nr] != undef) {
  88         return cache[nr];
  89       };
  90
  91       var html = [];
  92       html.push(HTML.tr_start_open);
  93
  94       if (nr % 2 == 0)
  95       {
  96         html.push("style='background-color:#fff'");
  97       };
  98
  99       html.push(HTML.tr_start_close);
 100
 101       for (var row in rdata) {
 102         arrayAppend(html, getCellHtml(rdata[row]));
 103       };
 104
 105       html.push(HTML.tr_stop);
 106
 107       cache[nr] = html;
 108
 109       return html;
 110     };
 111
 112     function buildTableHtml(start, len)
 113     {
 114       var ttstart = (new Date).valueOf();
 115
 116       var html = [];
 117
 118       html.push(HTML.table_start);
 119
 120       for (var i=start, s=start+len; i<s; i++) {
 121         arrayAppend(html, getRowHtml(data[i], i));
 122       };
 123
 124       html.push(HTML.table_end);
 125       view.innerHTML = html.join("");
 126
 127       updateCount++;
 128
 129       var ttend = (new Date).valueOf();
 130       info.value = "Update: " + updateCount + "\nRows: " + start + " - " + (start+len) + "\n" + (ttend-ttstart) + "ms\n";
 131     };
 132
 133     function doscroll() {
 134       buildTableHtml(Math.floor(scroller.scrollTop/rowHeight), rowCount);
 135     };
 136
 137     qx.dom.EventRegistration.addEventListener(scroller, "scroll", doscroll);
 138     doscroll();
 139   });
 140   </script>
 141 </body>
 142 </html>