← Back to branch summary

~bac/juju-gui/trunkcopy

« back to all changes in this revision

Viewing changes to lib/yui/docs/datatable/datatable-nestedcols.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yui/docs/datatable/datatable-nestedcols.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Nested Column Headers</title>
6
 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maven+Pro:400,700">
7
 
    <link rel="stylesheet" href="../../build/cssgrids/grids-min.css">
8
 
    <link rel="stylesheet" href="../assets/css/main.css">
9
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
10
 
    <script src="../../build/yui/yui-min.js"></script>
11
 
</head>
12
 
<body>
13
 
 
14
 
<div id="doc">
15
 
    <h1>Example: Nested Column Headers</h1>
16
 
 
17
 
    
18
 
 
19
 
    <div class="yui3-g">
20
 
        <div class="yui3-u-3-4">
21
 
            <div id="main">
22
 
                <div class="content"><style scoped>
23
 
/* custom styles for this example */
24
 
.example .yui3-datatable {
25
 
    margin-bottom: 1em;
26
 
}
27
 
 
28
 
/* css to counter global site css */
29
 
.example table {
30
 
    width: auto;
31
 
}
32
 
.example caption {
33
 
    display: table-caption;
34
 
}
35
 
.example th,
36
 
.example td {
37
 
    text-transform: none;
38
 
    border: 0 none;
39
 
}
40
 
</style>
41
 
 
42
 
<div class="intro">
43
 
    <p>The DataTable widget supports nested column headers, which can be defined in the columns definition using the <code>children</code> configuration.</p>
44
 
</div>
45
 
 
46
 
<div class="example yui3-skin-sam">
47
 
    <div id="nested" class="yui3-skin-sam dt-example"></div>
48
 
 
49
 
<script type="text/javascript">
50
 
YUI().use("datatable-base", function (Y) {
51
 
    var nestedCols = [
52
 
        {label:"Train Schedule", children:[
53
 
            {key: "track"},
54
 
            {label:"Route", children: [
55
 
                {key:"from"},
56
 
                {key:"to"}
57
 
            ]}
58
 
        ]}
59
 
    ],
60
 
    data = [
61
 
        {track:"1", from:"Paris", to:"Amsterdam"},
62
 
        {track:"2", from:"Paris", to:"London"},
63
 
        {track:"3", from:"Paris", to:"Zurich"}
64
 
    ],
65
 
 
66
 
    dt = new Y.DataTable({
67
 
        columns: nestedCols,
68
 
        data   : data,
69
 
        summary: "Train schedule",
70
 
        caption:"Table with nested column headers"})
71
 
    .render("#nested");
72
 
});
73
 
</script>
74
 
 
75
 
</div>
76
 
 
77
 
<h2>Using Nested Column Headers</h2>
78
 
 
79
 
<p>Use nested columns to visually group related column headers. The <code>children</code> attribute associates a parent column to its descendants. Note that only bottom-level columns will have data values. Any parent columns are there for presentation purposes only and do not hold any data values directly &mdash; therefore parent columns may have a <code>label</code> value but a  <code>key</code> value is unnecessary.</p>
80
 
 
81
 
<pre class="code prettyprint">&lt;div id=&quot;nested&quot; class=&quot;yui3-skin-sam dt-example&quot;&gt;&lt;&#x2F;div&gt;
82
 
 
83
 
&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
84
 
YUI().use(&quot;datatable-base&quot;, function (Y) {
85
 
var nestedCols = [
86
 
    {label:&quot;Train Schedule&quot;, children:[
87
 
        {key: &quot;track&quot;},
88
 
        {label:&quot;Route&quot;, children: [
89
 
            {key:&quot;from&quot;},
90
 
            {key:&quot;to&quot;}
91
 
        ]}
92
 
    ]}
93
 
],
94
 
data = [
95
 
    {track:&quot;1&quot;, from:&quot;Paris&quot;, to:&quot;Amsterdam&quot;},
96
 
    {track:&quot;2&quot;, from:&quot;Paris&quot;, to:&quot;London&quot;},
97
 
    {track:&quot;3&quot;, from:&quot;Paris&quot;, to:&quot;Zurich&quot;}
98
 
],
99
 
 
100
 
dt = new Y.DataTable({
101
 
    columns: nestedCols,
102
 
    data   : data,
103
 
    summary: &quot;Train schedule&quot;,
104
 
    caption:&quot;Table with nested column headers&quot;})
105
 
.render(&quot;#nested&quot;);
106
 
});
107
 
&lt;&#x2F;script&gt;</pre>
108
 
 
109
 
 
110
 
</div>
111
 
            </div>
112
 
        </div>
113
 
 
114
 
        <div class="yui3-u-1-4">
115
 
            <div class="sidebar">
116
 
                
117
 
 
118
 
                
119
 
                    <div class="sidebox">
120
 
                        <div class="hd">
121
 
                            <h2 class="no-toc">Examples</h2>
122
 
                        </div>
123
 
 
124
 
                        <div class="bd">
125
 
                            <ul class="examples">
126
 
                                
127
 
                                    
128
 
                                        <li data-description="This example illustrates simple DataTable use cases.">
129
 
                                            <a href="datatable-basic.html">Basic DataTable</a>
130
 
                                        </li>
131
 
                                    
132
 
                                
133
 
                                    
134
 
                                        <li data-description="DataTable loaded with JSON data from a remote webservice via DataSource.Get">
135
 
                                            <a href="datatable-dsget.html">DataTable + DataSource.Get + JSON Data</a>
136
 
                                        </li>
137
 
                                    
138
 
                                
139
 
                                    
140
 
                                        <li data-description="DataTable loaded with XML data from a remote webservice via DataSource.IO.">
141
 
                                            <a href="datatable-dsio.html">DataTable + DataSource.IO + XML Data</a>
142
 
                                        </li>
143
 
                                    
144
 
                                
145
 
                                    
146
 
                                        <li data-description="Custom format data for display.">
147
 
                                            <a href="datatable-formatting.html">Formatting Row Data for Display</a>
148
 
                                        </li>
149
 
                                    
150
 
                                
151
 
                                    
152
 
                                        <li data-description="DataTable with nested column headers.">
153
 
                                            <a href="datatable-nestedcols.html">Nested Column Headers</a>
154
 
                                        </li>
155
 
                                    
156
 
                                
157
 
                                    
158
 
                                        <li data-description="DataTable with column sorting.">
159
 
                                            <a href="datatable-sort.html">Column Sorting</a>
160
 
                                        </li>
161
 
                                    
162
 
                                
163
 
                                    
164
 
                                        <li data-description="DataTable with vertical and/or horizontal scrolling rows.">
165
 
                                            <a href="datatable-scroll.html">Scrolling DataTable</a>
166
 
                                        </li>
167
 
                                    
168
 
                                
169
 
                                    
170
 
                                        <li data-description="Using DataTable&#x27;s recordType attribute to create calculated, sortable columns.">
171
 
                                            <a href="datatable-recordtype.html">Sortable generated columns</a>
172
 
                                        </li>
173
 
                                    
174
 
                                
175
 
                                    
176
 
                                
177
 
                            </ul>
178
 
                        </div>
179
 
                    </div>
180
 
                
181
 
 
182
 
                
183
 
                    <div class="sidebox">
184
 
                        <div class="hd">
185
 
                            <h2 class="no-toc">Examples That Use This Component</h2>
186
 
                        </div>
187
 
 
188
 
                        <div class="bd">
189
 
                            <ul class="examples">
190
 
                                
191
 
                                    
192
 
                                
193
 
                                    
194
 
                                
195
 
                                    
196
 
                                
197
 
                                    
198
 
                                
199
 
                                    
200
 
                                
201
 
                                    
202
 
                                
203
 
                                    
204
 
                                
205
 
                                    
206
 
                                
207
 
                                    
208
 
                                        <li data-description="Shows how to instantiate multiple Panel instances, and use nested modality to interact with a Datatable.">
209
 
                                            <a href="../panel/panel-form.html">Creating a Modal Form</a>
210
 
                                        </li>
211
 
                                    
212
 
                                
213
 
                            </ul>
214
 
                        </div>
215
 
                    </div>
216
 
                
217
 
            </div>
218
 
        </div>
219
 
    </div>
220
 
</div>
221
 
 
222
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
223
 
<script>prettyPrint();</script>
224
 
 
225
 
</body>
226
 
</html>