root / trunk / tests / widget / test_FilteringTable.html

Revision 6806, 11.2 kB (checked in by ttrenka, 2 years ago)

Fix on minor bug in test (addRow didn't cast dates and didn't have a key field).

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4        <title>Filtering Table Widget Demo</title>
5        <script type="text/javascript">
6                var djConfig = {
7                        isDebug: true
8                        ,debugAtAllCosts: true
9                };
10        </script>
11        <script type="text/javascript" src="../../dojo.js"></script>
12        <script type="text/javascript">
13                dojo.require("dojo.widget.FilteringTable");
14                dojo.hostenv.writeIncludes();
15
16                //      a simple filtering function
17                function dateFilter(dt){
18                        return (dt > new Date('6/1/2004') && dt < new Date('2/1/2006'));
19                }
20                function nameFilter(name){
21                        return (name.charAt(0) >= 'M' && name.charAt(0) <= 'Z');
22                }
23                function accountFilter(num){
24                        return (num < 4);
25                }
26
27                function applyDate(key){
28                        dojo.widget.byId(key).setFilter("DateAdded", dateFilter);
29                }
30                function applyName(key){
31                        dojo.widget.byId(key).setFilter("Name", nameFilter);
32                }
33                function applyAccounts(key){
34                        dojo.widget.byId(key).setFilter("getAccounts().length", accountFilter);
35                }
36                function clearFilters(key){
37                        dojo.widget.byId(key).clearFilters();
38                }
39                function clearData(key){
40                        dojo.widget.byId(key).store.clearData();
41                }
42
43                var getAccounts=function(){
44                        return this.accounts;
45                };
46                var getDescription=function(){
47                        return this.description;
48                };
49                var getHtml=function(){
50                        return this.html;
51                };
52                var theJSONData=[];
53                var names=["William Smith", "Davy Jones", "Lucinda Williams", "Robert Appleton", "Wilma Flintstone", "Charo", "Fluufy the Lamb" ];
54                var dates=["1/1/2004","12/15/2001","4/15/2000","1/1/2006","6/21/2005","9/18/2004"];
55                var outer=10;
56                var inner=10;
57                for(var i=0; i<outer; i++){
58                        for(var j=0; j<inner; j++){
59                                var o ={
60                                        Id:(i*outer)+j,
61                                        Name:names[i%names.length],
62                                        DateAdded:dates[j%dates.length],
63                                        accounts:[],
64                                        description:{
65                                                html:'<p>testing the description...</p>',
66                                                getHtml:getHtml
67                                        },
68                                        getAccounts:getAccounts,
69                                        getDescription:getDescription
70                                };
71                                var l=(i*outer+j)%9;
72                                for(var k=0; k<l; k++){
73                                        o.accounts.push((i*outer+j)%11);
74                                }
75                                theJSONData.push(o);
76                        }
77                }
78
79                function populateTable(){
80                        var w=dojo.widget.byId("fromJSONData");
81                        if(w.store.get().length > 0){
82                                alert("you already pressed this button :)");
83                                return;
84                        }
85                        w.store.setData(theJSONData);
86                }
87               
88                function updateCell(inp){
89                        var w=dojo.widget.byId("parsedFromHtml");
90                        var v=inp.value;
91                        w.store.update(
92                                w.getDataByRow(w.domNode.tBodies[0].rows[0]),
93                                "Label",
94                                v
95                        );
96                }
97
98                var addCount = 0;
99                var id=27;
100                function addRow(){
101                        var w=dojo.widget.byId("parsedFromHtml");
102                        w.store.addData({
103                                Id:""+id++,
104                                Name:names[addCount%names.length],
105                                DateAdded:new Date(dates[addCount+2%dates.length]),
106                                DateModified:new Date(dates[addCount%dates.length]),
107                                Label:"<i>This is an <strong>added</strong> row</i>."
108                        });
109                        addCount++;     
110                }
111        </script>
112        <style type="text/css">
113                /***
114                        The following is just an example of how to use the table.
115                        You can override any class names to be used if you wish.
116                ***/
117                table {
118                        font-family:Lucida Grande, Verdana;
119                        font-size:0.8em;
120                        width:100%;
121                        border:1px solid #ccc;
122                        border-collapse:collapse;
123                        cursor:default;
124                }
125                table td,
126                table th{
127                        padding:2px;
128                        font-weight:normal;
129                }
130                table thead td, table thead th {
131                        background-image:url(images/ft-head.gif);
132                        background-repeat:no-repeat;
133                        background-position:top right;
134                }
135                table thead td.selectedUp, table thead th.selectedUp {
136                        background-image:url(images/ft-headup.gif);
137                }
138                table thead td.selectedDown, table thead th.selectedDown {
139                        background-image:url(images/ft-headdown.gif);
140                }
141                       
142                table tbody tr td{
143                        border-bottom:1px solid #ddd;
144                }
145                table tbody tr.alt td{
146                        background: #e3edfa;
147                }
148                table tbody tr.selected td{
149                        background: yellow;
150                }
151                table tbody tr:hover td{
152                        background: #a6c2e7;
153                }
154                table tbody tr.selected:hover td{
155                        background:#ff9;
156                }
157
158                #inputArea{
159                        margin:1em 0;
160                        padding:1em;
161                        background-color:#eef;
162                }
163                #updateTestInput{
164                        border:1px solid #ccc;
165                        width:100%;
166                        height:80px;
167                        font-family:serif;
168                        font-size:0.9em;
169                        overflow:auto;
170                }
171        </style>
172</head>
173<body>
174        <h1>Filtering Table</h1>
175        <p>
176        The FilteringTable widget is the second Dojo widget that can take a plain table of data
177        and add functionality to it.  Like SortableTable, you can sort columns by clicking on the
178        column heading.  Unlike SortableTable, FilteringTable can also:
179        </p>
180        <ul>
181                <li>Multiple column sorting (no limit, default is 1)</li>
182                <li>Sort in place: no destruction of markup takes place to sort</li>
183                <li>Allow you to set up "filterers", which will show/hide records based on criteria</li>
184        </ul>
185        <p>
186        However, the biggest changes are under the hood: a brand new data store model is underlying the
187        FilteringTable (a preview of what is coming with dojo.data).  This data store (accessible programmatically
188        as [widget].store) allows you to pass it an array of JSON objects that may or may not be complex in nature.
189        </p>
190        <p>
191        What does that mean?  It means that you can pass the store nested objects <strong>and show them within the
192        FilteringTable as a field</strong>.  Take a look at the source of this page to see a demonstration.
193        </p>
194        <h2>Filtering Table, parsed from existing HTML data</h2>
195        <div id="inputArea">
196                <div style=font-size:0.85em;">
197                        <h3>Data manipulation</h3>
198                        <input type="button" value="Add a new row" onclick="addRow();" />
199                        <div>Change the value of Adam's Label (html allowed):</div>
200                        <textarea id="updateTestInput" value="" onchange="updateCell(this);"></textarea>
201                </div>
202                <div style=font-size:0.85em;">
203                        <h3>Filtering</h3>
204                        <input type="button" value="Show only DateModified between 6/1/2004 and 2/1/2006" onclick="applyDate('parsedFromHtml');" /> 
205                        <input type="button" value="Show only names between M and Z" onclick="applyName('parsedFromHtml');" /> 
206                        <input type="button" value="Clear Filters" onclick="clearFilters('parsedFromHtml');" />
207                </div> 
208        </div>
209        <table dojoType="filteringTable" id="parsedFromHtml" 
210                multiple="true" alternateRows="true" maxSortable="2"
211                cellpadding="0" cellspacing="0" border="0">
212        <thead>
213                <tr>
214                        <th field="Name" dataType="String" valign="top">Name</th>
215                        <th field="DateAdded" dataType="Date" align="center" valign="top">Date Added</th>
216                        <th field="DateModified" dataType="Date" sort="asc" format="%b %d, %Y" align="center" valign="top">Date Modified</th>
217                        <th dataType="html">Label</th>
218                </tr>
219        </thead>
220        <tbody>
221                <tr value="1"><td>Adam</td><td>3/1/2004</td><td>11/1/2003</td><td><p><strong>Lorem ipsum</strong> dolor sit amet...</p><div>consectetuer</div></td></tr>
222                <tr value="2"><td>Betty</td><td>6/15/2005</td><td>1/7/2006</td><td>Adipiscing elit, sed diam nonummy nibh euismod</td></tr>
223                <tr value="3"><td>Carla</td><td>4/23/2002</td><td>3/1/2004</td><td>tincidunt ut laoreet dolore magna aliquam erat volutpat.</td></tr>
224                <tr value="4" selected="true"><td>David</td><td>11/1/2003</td><td>6/15/2005</td><td>Ut wisi enim ad minim veniam, quis</td></tr>
225                <tr value="5"><td>Esther</td><td>1/7/2006</td><td>4/23/2002</td><td>nostrud exerci tation ullamcorper</td></tr>
226                <tr value="6"><td>Fred</td><td>3/1/2004</td><td>11/1/2003</td><td>suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td></tr>
227                <tr value="7"><td>Greg</td><td>6/15/2005</td><td>1/7/2006</td><td><p><strong>Lorem ipsum</strong> dolor sit amet...</p><div>consectetuer</div></td></tr>
228                <tr value="8"><td>Helga</td><td>4/23/2002</td><td>3/1/2004</td><td>adipiscing elit, sed diam nonummy nibh euismod</td></tr>
229                <tr value="9"><td>Ianna</td><td>11/1/2003</td><td>6/15/2005</td><td>tincidunt ut laoreet dolore magna aliquam erat volutpat.</td></tr>
230                <tr value="10"><td>Jane</td><td>1/7/2006</td><td>4/23/2002</td><td>Ut wisi enim ad minim veniam, quis</td></tr>
231                <tr value="11"><td>Kathy</td><td>3/1/2004</td><td>11/1/2003</td><td>nostrud exerci tation ullamcorper</td></tr>
232                <tr value="12" selected="true"><td>Leonard</td><td>6/15/2005</td><td>1/7/2006</td><td>suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td></tr>
233                <tr value="13"><td>Mike</td><td>4/23/2002</td><td>3/1/2004</td><td><p><strong>Lorem ipsum</strong> dolor sit amet...</p><div>consectetuer</div></td></tr>
234                <tr value="14"><td>Nancy</td><td>11/1/2003</td><td>11/1/2003</td><td>Adipiscing elit, sed diam nonummy nibh euismod</td></tr>
235                <tr value="15"><td>Oswald</td><td>1/7/2006</td><td>1/7/2006</td><td>tincidunt ut laoreet dolore magna aliquam erat volutpat.</td></tr>
236                <tr value="16"><td>Peter</td><td>3/1/2004</td><td>3/1/2004</td><td>Ut wisi enim ad minim veniam, quis</td></tr>
237                <tr value="17"><td>Qunicy</td><td>6/15/2005</td><td>6/15/2005</td><td>nostrud exerci tation ullamcorper</td></tr>
238                <tr value="18"><td>Ronald</td><td>4/23/2002</td><td>4/23/2002</td><td>suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td></tr>
239                <tr value="19"><td>Stacy</td><td>11/1/2003</td><td>11/1/2003</td><td><p><strong>Lorem ipsum</strong> dolor sit amet...</p><div>consectetuer</div></td></tr>
240                <tr value="20"><td>Tim</td><td>1/7/2006</td><td>1/7/2006</td><td>adipiscing elit, sed diam nonummy nibh euismod</td></tr>
241                <tr value="21"><td>Uylsses</td><td>3/1/2004</td><td>3/1/2004</td><td>tincidunt ut laoreet dolore magna aliquam erat volutpat.</td></tr>
242                <tr value="22"><td>Victor</td><td>6/15/2005</td><td>6/15/2005</td><td>Ut wisi enim ad minim veniam, quis</td></tr>
243                <tr value="23"><td>Walter</td><td>4/23/2002</td><td>4/23/2002</td><td>nostrud exerci tation ullamcorper</td></tr>
244                <tr value="24"><td>Xerxes</td><td>11/1/2003</td><td>11/1/2003</td><td>suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td></tr>
245                <tr value="25"><td>Yanni</td><td>1/7/2006</td><td>1/7/2006</td><td><p><strong>Lorem ipsum</strong> dolor sit amet...</p><div>consectetuer</div></td></tr>
246                <tr value="26"><td>Zelda</td><td>3/1/2004</td><td>3/1/2004</td><td>adipiscing elit, sed diam nonummy nibh euismod</td></tr>
247        </tbody>
248        </table>
249        <h2>Filtering Table, populated from JSON data</h2>
250        <input type="button" value="Click to populate using JSON data" onclick="populateTable();" />
251        <div style=font-size:0.65em;">
252                <input type="button" value="Show only DateAdded between 6/1/2004 and 2/1/2006" onclick="applyDate('fromJSONData');" />
253                <input type="button" value="Show only names between M and Z" onclick="applyName('fromJSONData');" />
254                <input type="button" value="Show only # accounts less than 4" onclick="applyAccounts('fromJSONData');" />
255                <input type="button" value="Clear Filters" onclick="clearFilters('fromJSONData');" />
256                <input type="button" value="Clear Data" onclick="clearData('fromJSONData');" />
257        </div>
258        <table dojoType="filteringTable" id="fromJSONData"
259                multiple="true" alternateRows="true"
260                cellpadding="0" cellspacing="0" border="0" style="margin-bottom:24px;">
261        <thead>
262                <tr>
263                        <th field="Name" dataType="String">Name</th>
264                        <th field="DateAdded" dataType="Date" align="center">Date Added</th>
265                        <th field="getAccounts().length" dataType="Number" sort="desc" align="center"># of accounts</th>
266                        <th field="getDescription().getHtml()" dataType="html">Description</th>
267                </tr>
268        </thead>
269        </table>
270</body>
271</html>
Note: See TracBrowser for help on using the browser.