source: Dev/trunk/src/client/dojox/grid/tests/test_treegrid.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 7.8 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3<head>
4        <title>dojox.grid.TreeGrid Tests</title>
5        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
6        <style type="text/css">
7                @import "../../../dojo/resources/dojo.css";
8                @import "../resources/Grid.css";
9                @import "../resources/claroGrid.css";
10                .grid {
11                        width: 70em;
12                        height: 15em;
13                }
14        </style>
15        <script type="text/javascript" src="../../../dojo/dojo.js"
16                data-dojo-config="isDebug:false, parseOnLoad: true"></script>
17        <script type="text/javascript">
18                dojo.require("dojox.grid.TreeGrid");
19                dojo.require("dojo.data.ItemFileWriteStore");
20                dojo.require("dojo.parser");
21               
22                function formatTime(value, rowIdx){
23                        var hrs = Math.floor(value / 60) + "";
24                        var mins = (value % 60) + "";
25                        while (hrs.length < 2){
26                                hrs = "0" + hrs;
27                        }
28                        while (mins.length < 2){
29                                mins = "0" + mins;
30                        }
31                        return hrs + ":" + mins;
32                }
33               
34                function summaryFormatter(value, rowIdx, cell, sing, plur){
35                        var str;
36                        if(rowIdx >= 0){
37                                return value;
38                        }
39                        if(rowIdx == -1){
40                                str = "Total (${numItems} ${displayName}):";
41                        }else{
42                                str = "${numItems} ${displayName}";
43                        }
44                        return dojo.string.substitute(str, {numItems: value,
45                                                displayName: (value == 1) ? sing : plur});                     
46                }
47                function quarterSummary(value, rowIdx){
48                        return summaryFormatter(value, rowIdx, this, "Quarter", "Quarters");
49                }
50                function gameSummary(value, rowIdx){
51                        return summaryFormatter(value, rowIdx, this, "Game", "Games");
52                }
53                function seasonSummary(value, rowIdx){
54                        return summaryFormatter(value, rowIdx, this, "Season", "Seasons");
55                }
56                dojo.addOnLoad(function(){
57                        var g = new dojox.grid.TreeGrid({
58                                structure: [
59                                        { cells: [
60                                                [
61                                                        { field: "label", name: "Game" },
62                                                        { field: "qtrs",
63                                                                children: [
64                                                                        { field: "label", name: "Quarter", width: "12em", formatter: quarterSummary },
65                                                                        { field: "pts", name: "Points" },
66                                                                        { field: "reb", name: "Rebounds" },
67                                                                        { field: "ast", name: "Assists" },
68                                                                        { field: "tp", name: "Time Played" }
69                                                                ],
70                                                                itemAggregates: [ "numQtrs", "totPts", "totReb", "totAst", "totTP" ],
71                                                                aggregate: "sum"
72                                                        }
73                                                ]]
74                                        }                                       
75                                ],
76                                store: jsonStore,
77                                query: {id: "3"},
78                                queryOptions: {deep: true},
79                                rowSelector: true
80                        }, dojo.byId("progGrid"));
81                        dojo.addClass(g.domNode, "grid");
82                        g.startup();
83                        dojo.connect(window, "onresize", grid4, "resize");
84                });
85
86        </script>
87</head>
88<body class="claro">
89        <h1 class="testTitle">Test: dojox.tests.grid.TreeGrid</h1>
90        <span dojoType="dojo.data.ItemFileWriteStore"
91                data-dojo-id="jsonStore" url="support/gamedata.json">
92        </span>
93
94        <h4 class="testSubtitle">dojox.grid.TreeGrid 1-Level</h4>
95        <table dojoType="dojox.grid.TreeGrid" class="grid"  summary="A customized tree grid summary"
96                store="jsonStore" query="{ id: '4' }" queryOptions="{deep: true}" rowsPerPage="20" rowSelector="true">
97                <thead>
98                        <tr>
99                                <th field="label">Quarter</th>
100                                <th field="pts">Points</th>
101                                <th field="reb">Rebounds</th>
102                                <th field="ast">Assists</th>
103                                <th field="tp" formatter="formatTime">Time Played</th>
104                        </tr>
105                </thead>
106        </table>
107
108        <h4 class="testSubtitle">dojox.grid.TreeGrid 2-Level (draggable columns)</h4>
109        <table dojoType="dojox.grid.TreeGrid" class="grid" columnReordering="true"
110                store="jsonStore" query="{ id: '3' }" queryOptions="{deep: true}" rowsPerPage="20" rowSelector="true">
111                <thead>
112                        <tr>
113                                <th field="label">Game</th>
114                                <th field="qtrs" aggregate="sum" itemAggregates="numQtrs,totPts,totReb,totAst,totTP">
115                                        <table>
116                                                <thead>
117                                                        <tr>
118                                                                <th field="label" width="12em" formatter="quarterSummary">Quarter</th>
119                                                                <th field="pts">Points</th>
120                                                                <th field="reb">Rebounds</th>
121                                                                <th field="ast">Assists</th>
122                                                                <th field="tp" formatter="formatTime">Time Played</th>
123                                                        </tr>
124                                                </thead>
125                                        </table>
126                                </th>
127                        </tr>
128                </thead>
129        </table>
130       
131        <h4 class="testSubtitle">dojox.grid.TreeGrid 2-Level (programmatic)</h4>
132        <div id="progGrid"></div>
133
134        <h4 class="testSubtitle">dojox.grid.TreeGrid 3-Level (initially closed, using relWidths)</h4>
135        <table dojoType="dojox.grid.TreeGrid" class="grid" defaultOpen="false"
136                store="jsonStore" query="{ id: '2' }" queryOptions="{deep: true}" rowsPerPage="20" rowSelector="true">
137                <thead>
138                        <tr>
139                                <th field="label" relWidth="2">Season</th>
140                                <th field="games" aggregate="sum" itemAggregates="numGames">
141                                        <table>
142                                                <thead>
143                                                        <tr>
144                                                                <th field="label" formatter="gameSummary" relWidth="2">Game</th>
145                                                                <th field="qtrs" aggregate="sum" itemAggregates="numQtrs,totPts,totReb,totAst,totTP">
146                                                                        <table>
147                                                                                <thead>
148                                                                                        <tr>
149                                                                                                <th field="label" formatter="quarterSummary" relWidth="2">Quarter</th>
150                                                                                                <th field="pts" relWidth="1">Points</th>
151                                                                                                <th field="reb" relWidth="1">Rebounds</th>
152                                                                                                <th field="ast" relWidth="1">Assists</th>
153                                                                                                <th field="tp" relWidth="1" formatter="formatTime">Time Played</th>
154                                                                                        </tr>
155                                                                                </thead>
156                                                                        </table>
157                                                                </th>
158                                                        </tr>
159                                                </thead>
160                                        </table>
161                                </th>
162                        </tr>
163                </thead>
164        </table>
165
166        <h4 class="testSubtitle">dojox.grid.TreeGrid 4-Level - calculated totals, autoHeight and autoWidth</h4>
167        <table dojoType="dojox.grid.TreeGrid" class="grid" autoWidth="true" autoHeight="true"
168                store="jsonStore" query="{ id: '1' }" rowsPerPage="20" rowSelector="true">
169                <thead>
170                        <tr>
171                                <th field="label">Player</th>
172                                <th field="seasns" aggregate="sum">
173                                        <table>
174                                                <thead>
175                                                        <tr>
176                                                                <th field="label" width="10em" formatter="seasonSummary">Season</th>
177                                                                <th field="games" aggregate="sum">
178                                                                        <table>
179                                                                                <thead>
180                                                                                        <tr>
181                                                                                                <th field="label" width="10em" formatter="gameSummary">Game</th>
182                                                                                                <th field="qtrs" aggregate="sum">
183                                                                                                        <table>
184                                                                                                                <thead>
185                                                                                                                        <tr>
186                                                                                                                                <th field="label" width="10em" formatter="quarterSummary">Quarter</th>
187                                                                                                                                <th field="pts">Points</th>
188                                                                                                                                <th field="reb">Rebounds</th>
189                                                                                                                                <th field="ast">Assists</th>
190                                                                                                                                <th field="tp" formatter="formatTime">Time Played</th>
191                                                                                                                        </tr>
192                                                                                                                </thead>
193                                                                                                        </table>
194                                                                                                </th>
195                                                                                        </tr>
196                                                                                </thead>
197                                                                        </table>
198                                                                </th>
199                                                        </tr>
200                                                </thead>
201                                        </table>
202                                </th>
203                        </tr>
204                </thead>
205        </table>
206
207        <h4 class="testSubtitle">dojox.grid.TreeGrid Large 4-Level - calculated totals and openAtLevels</h4>
208        <table dojoType="dojox.grid.TreeGrid" class="grid" style="height: 45em;width: 100%;"
209                store="jsonStore" rowsPerPage="20" data-dojo-id="grid4" rowSelector="true" openAtLevels="false,true,3">
210                <thead>
211                        <tr>
212                                <th field="label" relWidth="2">Player</th>
213                                <th field="seasns" aggregate="sum">
214                                        <table>
215                                                <thead>
216                                                        <tr>
217                                                                <th field="label" relWidth="2" formatter="seasonSummary">Season</th>
218                                                                <th field="games" aggregate="sum">
219                                                                        <table>
220                                                                                <thead>
221                                                                                        <tr>
222                                                                                                <th field="label" relWidth="2" formatter="gameSummary">Game</th>
223                                                                                                <th field="qtrs" aggregate="sum">
224                                                                                                        <table>
225                                                                                                                <thead>
226                                                                                                                        <tr>
227                                                                                                                                <th field="label" relWidth="2" formatter="quarterSummary">Quarter</th>
228                                                                                                                                <th field="pts" relWidth="1">Points</th>
229                                                                                                                                <th field="reb" relWidth="1">Rebounds</th>
230                                                                                                                                <th field="ast" relWidth="1">Assists</th>
231                                                                                                                                <th field="tp" relWidth="1" formatter="formatTime">Time Played</th>
232                                                                                                                        </tr>
233                                                                                                                </thead>
234                                                                                                        </table>
235                                                                                                </th>
236                                                                                        </tr>
237                                                                                </thead>
238                                                                        </table>
239                                                                </th>
240                                                        </tr>
241                                                </thead>
242                                        </table>
243                                </th>
244                        </tr>
245                </thead>
246        </table>
247        Text After
248</body>
249</html>
250
Note: See TracBrowser for help on using the repository browser.