3 <title>Demo to show a massive nested for loop to render a table</title>
4 <script type="text/javascript" src="../../../dojo/dojo.js"
5 djConfig="isDebug: true, parseOnLoad: true"></script>
6 <script type="text/javascript" src="../../../dijit/dijit.js"></script>
7 <style type="text/css">
8 @import "../../../dijit/themes/tundra/tundra.css";
11 border-collapse: collapse;
14 background-color: #ccf;
17 border: 1px solid #aaa;
21 background-color: #ffc;
24 <script type="text/javascript">
25 dojo.require("dojox.dtl._HtmlTemplated");
26 dojo.require("dojox.dtl.tag.logic");
27 dojo.require("dojox.dtl.tag.loop");
28 dojo.require("dojox.dtl.filter.lists");
30 dojo.declare("demo.Table", [dijit._Widget, dojox.dtl._HtmlTemplated], {
32 postCreate: function(){
33 this.ths = dojo.query("th", this.domNode).map(function(item){
34 return item.innerHTML;
36 this.trs = dojo.query("tbody tr", this.domNode).map(function(item){
37 return dojo.query("td", item).map(function(item){
38 return item.innerHTML;
41 console.time("render1");
43 console.timeEnd("render1");
45 sortColumn: function(e){
46 this.pos = dojo.indexOf(this.ths, e.target.innerHTML);
47 console.time("render2");
49 console.timeEnd("render2");
51 templateString: '<table><thead><tr><!--{% for th in ths %}--><th dojoAttachEvent="onclick: sortColumn"><!--{{ th }}--></th><!--{% endfor %}--></tr></thead><tbody><!--{% for tr in trs|dictsort:pos %}--><tr class="{% cycle \'odd\' \'even\' %}"><!--{% for td in tr %}--><td><!--{{ td }}--></td><!--{% endfor %}--></tr><!--{% endfor %}--></tbody></table>'
54 dojo.require("dojo.parser");
57 <table dojoType="demo.Table" style="display: none;">