|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>3.5.0+ Migration Guide</title> |
|
|
6 |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
|
7 |
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
|
8 |
<link rel="stylesheet" href="../assets/css/main.css"> |
|
|
9 |
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
|
10 |
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
|
11 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
12 |
|
|
|
13 |
</head> |
|
|
14 |
<body> |
|
|
15 |
<!-- |
|
|
16 |
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
|
17 |
--> |
|
|
18 |
<div id="doc"> |
|
|
19 |
<div id="hd"> |
|
|
20 |
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
|
21 |
</div> |
|
|
22 |
|
|
|
23 |
<a href="#toc" class="jump">Jump to Table of Contents</a> |
|
|
24 |
|
|
|
25 |
|
|
|
26 |
<h1>3.5.0+ Migration Guide</h1> |
|
|
27 |
<div class="yui3-g"> |
|
|
28 |
<div class="yui3-u-3-4"> |
|
|
29 |
<div id="main"> |
|
|
30 |
<div class="content"><style> |
|
|
31 |
#docs-main li { |
|
|
32 |
margin: 1ex 0; |
|
|
33 |
} |
|
|
34 |
|
|
|
35 |
li code, |
|
|
36 |
td code { |
|
|
37 |
white-space: nowrap; |
|
|
38 |
background: #fcfbfa; |
|
|
39 |
border: 1px solid #d0d5ec; |
|
|
40 |
padding: 0 3px; |
|
|
41 |
} |
|
|
42 |
li code { |
|
|
43 |
border-color: #efeeed; |
|
|
44 |
} |
|
|
45 |
.yui3-skin-sam table { |
|
|
46 |
width: auto; |
|
|
47 |
} |
|
|
48 |
.yui3-skin-sam td, |
|
|
49 |
.yui3-skin-sam th { |
|
|
50 |
border: 0 none; |
|
|
51 |
} |
|
|
52 |
|
|
|
53 |
.demo { width: 40%; } |
|
|
54 |
.details { width: 60%; } |
|
|
55 |
.before, .after { width: 47%; } |
|
|
56 |
.after { |
|
|
57 |
margin-left: 5%; |
|
|
58 |
} |
|
|
59 |
|
|
|
60 |
#quickref code em { |
|
|
61 |
color: #900; |
|
|
62 |
} |
|
|
63 |
#quickref code strong { |
|
|
64 |
color: #090; |
|
|
65 |
} |
|
|
66 |
#quickref pre.code { |
|
|
67 |
margin-top: 0; |
|
|
68 |
margin-bottom: 0; |
|
|
69 |
} |
|
|
70 |
|
|
|
71 |
.spendy { |
|
|
72 |
color: #b00; |
|
|
73 |
} |
|
|
74 |
</style> |
|
|
75 |
<div class="intro"> |
|
|
76 |
<p> |
|
|
77 |
DataTable and supporting modules were rebuilt in version 3.5.0. The |
|
|
78 |
new architecture is <strong>not fully backward compatible</strong> with |
|
|
79 |
versions 3.4.1 and prior. This guide is to help answer questions that |
|
|
80 |
may come up when upgrading to the latest version. |
|
|
81 |
</p> |
|
|
82 |
|
|
|
83 |
<p> |
|
|
84 |
This guide focuses on 3.4.1 API compatibility. It <strong>does not |
|
|
85 |
describe new features added in 3.5.0</strong> (there were a lot). |
|
|
86 |
Refer to the updated <a href="index.html">DataTable user guide</a> for |
|
|
87 |
that. |
|
|
88 |
</p> |
|
|
89 |
|
|
|
90 |
<p> |
|
|
91 |
If you are unable to upgrade due to unresolvable issues, you can use the |
|
|
92 |
<a href="../datatable-deprecated/index.html"><code>datatable-deprecated</code></a> |
|
|
93 |
module suite, which is equivalent to the 3.4.1 implementation. But be |
|
|
94 |
aware that these modules will be removed in a future version of YUI. |
|
|
95 |
</p> |
|
|
96 |
</div> |
|
|
97 |
|
|
|
98 |
<h2 id="overview">Overview of API changes from 3.4.1</h2> |
|
|
99 |
|
|
|
100 |
<p> |
|
|
101 |
The architectural change resulted in the deprecation, replacement, or |
|
|
102 |
removal of nearly all attributes and properties from the version 3.4.1 |
|
|
103 |
implementation. Here is a quick list of the changes most likely to affect |
|
|
104 |
your upgrade: |
|
|
105 |
</p> |
|
|
106 |
|
|
|
107 |
<ol id="quickref"> |
|
|
108 |
<li> |
|
|
109 |
<code>new <em>Y.DataTable.Base</em>(...)</code> → |
|
|
110 |
<code>new <strong>Y.DataTable</strong>({ ... })</code> |
|
|
111 |
</li> |
|
|
112 |
<li> |
|
|
113 |
<div class="yui3-g"> |
|
|
114 |
<div class="yui3-u"> |
|
|
115 |
<pre class="code prettyprint">new Y.DataTable.Base({ |
|
|
116 |
columnset: [ ... ], |
|
|
117 |
recordset: [ ... ] |
|
|
118 |
});</pre> |
|
|
119 |
|
|
|
120 |
</div> |
|
|
121 |
<p class="yui3-u" style="line-height: 72px; margin: 0 1em;">→</p> |
|
|
122 |
<div class="yui3-u"> |
|
|
123 |
<pre class="code prettyprint">new Y.DataTable({ |
|
|
124 |
columns: [ ... ], |
|
|
125 |
data : [ ... ] |
|
|
126 |
});</pre> |
|
|
127 |
|
|
|
128 |
</div> |
|
|
129 |
</div> |
|
|
130 |
</li> |
|
|
131 |
<li> |
|
|
132 |
(cells rendered as HTML by default) → |
|
|
133 |
<code>columns: [ { key: 'email', <strong>allowHTML: true</strong> }, ... ]</code> |
|
|
134 |
</li> |
|
|
135 |
<li> |
|
|
136 |
<code>table.plug(<em>Y.Plugin.DataTableSort</em>)</code> → <em>(plugin not needed)</em> |
|
|
137 |
<a href="#features">See below</a> or read |
|
|
138 |
<a href="index.html#sorting">the user guide</a> |
|
|
139 |
</li> |
|
|
140 |
<li> |
|
|
141 |
<code>table.plug(<em>Y.Plugin.DataTableScroll</em>, ...)</code> → |
|
|
142 |
<em>(plugin not needed)</em> |
|
|
143 |
<a href="#features">See below</a> or read |
|
|
144 |
<a href="index.html#scrolling">the user guide</a> |
|
|
145 |
</li> |
|
|
146 |
<li> |
|
|
147 |
<code>columnset: [ { <em>formatter: function (o) { ... }</em> } ]</code> |
|
|
148 |
→ |
|
|
149 |
(formatter changes) |
|
|
150 |
<a href="#formatters">See below</a> or read |
|
|
151 |
<a href="index.html#scrolling">the user guide</a> |
|
|
152 |
</li> |
|
|
153 |
<li> |
|
|
154 |
<code>record.<em>getValue(fieldName)</em></code> → |
|
|
155 |
<code>record.<strong>get(fieldName)</strong></code> |
|
|
156 |
</li> |
|
|
157 |
</ol> |
|
|
158 |
|
|
|
159 |
<h2 id="instantiation">Instantiation and Instance Configuration Changes</h2> |
|
|
160 |
|
|
|
161 |
<p> |
|
|
162 |
As of 3.5.0, <code>Y.DataTable</code> is no longer just a namespace, but is now the |
|
|
163 |
preferred constructor for DataTable instances. |
|
|
164 |
</p> |
|
|
165 |
|
|
|
166 |
<pre class="code prettyprint">var table = new Y.DataTable({ |
|
|
167 |
// Column configuration looks much the same except the attribute name |
|
|
168 |
columns: [ |
|
|
169 |
{ key: 'name', label: 'Name', sortable: true, width: '200px' }, |
|
|
170 |
{ |
|
|
171 |
key: 'birthdate', |
|
|
172 |
label: 'Age', |
|
|
173 |
sortable: true, |
|
|
174 |
formatter: function (o) { |
|
|
175 |
var now = new Date(), |
|
|
176 |
years = now.getYear() - o.value.getYear(); |
|
|
177 |
|
|
|
178 |
now.setYear(o.value.getYear()); |
|
|
179 |
|
|
|
180 |
return years - (o.value < now); |
|
|
181 |
} |
|
|
182 |
} |
|
|
183 |
], |
|
|
184 |
// Passing in row data looks much the same except the attribute name |
|
|
185 |
data: [ |
|
|
186 |
{ name: 'Tom Brokaw', birthdate: new Date(1940, 1, 6) }, |
|
|
187 |
{ name: 'Peter Jennings', birthdate: new Date(1938, 6, 29) }, |
|
|
188 |
{ name: 'Katie Couric', birthdate: new Date(1957, 1, 7) }, |
|
|
189 |
{ name: 'Brian Williams', birthdate: new Date(1958, 4, 5) }, |
|
|
190 |
{ name: 'Matt Lauer', birthdate: new Date(1957, 11, 30) } |
|
|
191 |
] |
|
|
192 |
}).render('#over-there');</pre> |
|
|
193 |
|
|
|
194 |
|
|
|
195 |
<p> |
|
|
196 |
The <code>Y.DataTable.Base</code> class still exists, but is useful primarily as a |
|
|
197 |
superclass for extension. The attributes of <code>Y.DataTable.Base</code> are the |
|
|
198 |
same as those of <code>Y.DataTable</code>, less any attributes added by class |
|
|
199 |
extensions (<a href="#features">see below</a>). |
|
|
200 |
</p> |
|
|
201 |
|
|
|
202 |
<p> |
|
|
203 |
Configuration attributes that have changed from 3.4.1 are: |
|
|
204 |
</p> |
|
|
205 |
|
|
|
206 |
<table> |
|
|
207 |
<thead> |
|
|
208 |
<tr> |
|
|
209 |
<th>Attribute</th> |
|
|
210 |
<th>Change</th> |
|
|
211 |
</tr> |
|
|
212 |
</thead> |
|
|
213 |
<tbody> |
|
|
214 |
<tr> |
|
|
215 |
<td><code>columnset</code></td> |
|
|
216 |
<td> |
|
|
217 |
<strong>Deprecated</strong>. Use <code>columns</code>. <code>columnset</code> will |
|
|
218 |
behave as an alias for <code>columns</code> for a short time, but will be |
|
|
219 |
removed in future versions. <a href="#columns">See below</a>. |
|
|
220 |
</td> |
|
|
221 |
</tr> |
|
|
222 |
<tr> |
|
|
223 |
<td><code>recordset</code></td> |
|
|
224 |
<td> |
|
|
225 |
<strong>Deprecated</strong>. Use <code>data</code>. <code>recordset</code> will |
|
|
226 |
behave as an alias for <code>data</code> for a short time, but will be |
|
|
227 |
removed in future versions. <a href="#data">See below</a>. |
|
|
228 |
</td> |
|
|
229 |
</tr> |
|
|
230 |
<tr> |
|
|
231 |
<td><code>tdValueTemplate</code></td> |
|
|
232 |
<td> |
|
|
233 |
<strong>Removed</strong>. Use column <code>formatter</code>, <code>cellTemplate</code>, |
|
|
234 |
or override the <code>Y.DataTable.BodyView</code> instance's <code>CELL_TEMPLATE</code>. |
|
|
235 |
</td> |
|
|
236 |
</tr> |
|
|
237 |
<tr> |
|
|
238 |
<td><code>thValueTemplate</code></td> |
|
|
239 |
<td> |
|
|
240 |
<strong>Removed</strong>. Use column <code>label</code>, <code>headerTemplate</code>, |
|
|
241 |
or override the <code>Y.DataTable.HeaderView</code> instance's <code>CELL_TEMPLATE</code>. |
|
|
242 |
</td> |
|
|
243 |
</tr> |
|
|
244 |
<tr> |
|
|
245 |
<td><code>trTemplate</code></td> |
|
|
246 |
<td> |
|
|
247 |
<strong>Removed</strong>. Use column <code>nodeFormatter</code> or override |
|
|
248 |
the <code>Y.DataTable.BodyView</code> instance's <code>ROW_TEMPLATE</code>. |
|
|
249 |
</td> |
|
|
250 |
</tr> |
|
|
251 |
</tbody> |
|
|
252 |
</table> |
|
|
253 |
|
|
|
254 |
<h2 id="formatters">Table and Cell Formatting Changes</h2> |
|
|
255 |
|
|
|
256 |
<p> |
|
|
257 |
The following changes apply to table and column cell formatting: |
|
|
258 |
</p> |
|
|
259 |
|
|
|
260 |
<ul> |
|
|
261 |
<li> |
|
|
262 |
If cell values include HTML, add <code>allowHTML: true</code> to the column |
|
|
263 |
configuration. HTML is escaped by default for security. |
|
|
264 |
</li> |
|
|
265 |
<li> |
|
|
266 |
<code>o.classnames</code> in the formatter parameter is now <code>o.className</code>. |
|
|
267 |
</li> |
|
|
268 |
<li> |
|
|
269 |
<code>o.column</code> in the formatter parameter is now <a href="#columns">the |
|
|
270 |
plain JavaScript object</a> containing the column configurations rather |
|
|
271 |
than a <code>Y.Column</code> instance. |
|
|
272 |
</li> |
|
|
273 |
<li> |
|
|
274 |
<code>o.record</code> in the formatter parameter is now <a href="#data">a Model |
|
|
275 |
instance</a> instead of a <code>Y.Record</code> instance. |
|
|
276 |
</li> |
|
|
277 |
<li> |
|
|
278 |
<code>this.createCell(o)</code>, <code>o.td</code>, <code>o.tr</code>, and <code>o.tbody</code> no longer exist on |
|
|
279 |
the parameter passed to <code>formatter</code> functions. Use |
|
|
280 |
<a href="index.html#nodeformatter"><code>nodeFormatter</code></a>s. |
|
|
281 |
</li> |
|
|
282 |
<li> |
|
|
283 |
<code>o.headers</code> is now at <code>o.column._headers</code>, but is read-only for |
|
|
284 |
<code>formatter</code> functions. If you need to change the cell's headers |
|
|
285 |
attribute, add a {placeholder} for them to a custom <code>cellTemplate</code> for |
|
|
286 |
the column, or use a <code>nodeFormatter</code>. |
|
|
287 |
</li> |
|
|
288 |
<li> |
|
|
289 |
The table's <code>tdValueTemplate</code>, <code>thValueTemplate</code>, and <code>trTemplate</code> no |
|
|
290 |
longer exist, nor do the DataTable instance properties <code>tdTemplate</code> and |
|
|
291 |
<code>thTemplate</code>. Use <code>formatter</code> strings or functions to customize the |
|
|
292 |
content of data cells in a column and <code>label</code> strings to customize the |
|
|
293 |
content of header cells. To modify the <code><td></code> or <code><th></code> entirely, set |
|
|
294 |
the column configuration <code>cellTemplate</code> or <code>headerTemplate</code>. |
|
|
295 |
</li> |
|
|
296 |
</ul> |
|
|
297 |
|
|
|
298 |
<div class="yui3-g"> |
|
|
299 |
<div class="yui3-u before"> |
|
|
300 |
<h4 class="no-toc">3.4.1</h4> |
|
|
301 |
|
|
|
302 |
<pre class="code prettyprint">var table = new Y.DataTable.Base({ |
|
|
303 |
columnset: [ |
|
|
304 |
{ key: "id", |
|
|
305 |
emptyCellValue: "<em>new</em>" }, |
|
|
306 |
{ key: "name" }, |
|
|
307 |
{ key: "price", formatter: "${value}" }, |
|
|
308 |
{ key: "price", |
|
|
309 |
formatter: function (o) { |
|
|
310 |
if (o.value > 4) { |
|
|
311 |
o.classnames += "spendy"; |
|
|
312 |
} |
|
|
313 |
return '$' + o.value.toFixed(2); |
|
|
314 |
} |
|
|
315 |
}, |
|
|
316 |
{ key: "price", |
|
|
317 |
formatter: function (o) { |
|
|
318 |
var cell = this.createCell(o); |
|
|
319 |
|
|
|
320 |
if (o.value > 4) { |
|
|
321 |
cell.addClass('spendy'); |
|
|
322 |
} |
|
|
323 |
|
|
|
324 |
cell.setHTML('$' + o.value); |
|
|
325 |
} |
|
|
326 |
} |
|
|
327 |
], |
|
|
328 |
data: [ |
|
|
329 |
{ id: 1, name: "Bread", price: 3.45 }, |
|
|
330 |
{ id: 2, name: "Milk", price: 4.99 }, |
|
|
331 |
{ id: 3, name: "Eggs", price: 2.75 } |
|
|
332 |
] |
|
|
333 |
}).render("#over-there");</pre> |
|
|
334 |
|
|
|
335 |
</div> |
|
|
336 |
<div class="yui3-u after"> |
|
|
337 |
<h4 class="no-toc">3.5.0</h4> |
|
|
338 |
|
|
|
339 |
<pre class="code prettyprint">var table = new Y.DataTable({ |
|
|
340 |
columns: [ |
|
|
341 |
{ key: "id", |
|
|
342 |
emptyCellValue: "<em>new</em>", |
|
|
343 |
allowHTML: true }, |
|
|
344 |
{ key: "name" }, |
|
|
345 |
{ key: "price", formatter: "${value}" }, |
|
|
346 |
{ key: "price", |
|
|
347 |
formatter: function (o) { |
|
|
348 |
if (o.value > 4) { |
|
|
349 |
o.className += "spendy"; |
|
|
350 |
} |
|
|
351 |
return '$' + o.value.toFixed(2); |
|
|
352 |
} |
|
|
353 |
}, |
|
|
354 |
{ key: "price", |
|
|
355 |
nodeFormatter: function (o) { |
|
|
356 |
if (o.value > 4) { |
|
|
357 |
o.cell.addClass('spendy'); |
|
|
358 |
} |
|
|
359 |
|
|
|
360 |
o.cell.setHTML('$' + o.value); |
|
|
361 |
|
|
|
362 |
return false; |
|
|
363 |
} |
|
|
364 |
} |
|
|
365 |
], |
|
|
366 |
data: [ |
|
|
367 |
{ id: 1, name: "Bread", price: 3.45 }, |
|
|
368 |
{ id: 2, name: "Milk", price: 4.99 }, |
|
|
369 |
{ id: 3, name: "Eggs", price: 2.75 } |
|
|
370 |
] |
|
|
371 |
}).render("#over-there");</pre> |
|
|
372 |
|
|
|
373 |
</div> |
|
|
374 |
</div> |
|
|
375 |
|
|
|
376 |
<p> |
|
|
377 |
Read the <a href="index.html#formatters">Formatting Cell Data</a> section in |
|
|
378 |
the DataTable user guide for more details. |
|
|
379 |
</p> |
|
|
380 |
|
|
|
381 |
<h2 id="columns">Column Configuration Changes</h2> |
|
|
382 |
|
|
|
383 |
<p> |
|
|
384 |
As of 3.5.0, the <code>Y.Columnset</code> and <code>Y.Column</code> classes have been deprecated. |
|
|
385 |
The DataTable configuration attribute <code>columnset</code> has been deprecated in |
|
|
386 |
favor of the <code>columns</code> attribute. The <code>columnset</code> attribute has been |
|
|
387 |
retained for <em>partial</em> backward compatibility. Columns are now |
|
|
388 |
stored as an array of simple JavaScript objects rather than class instances. |
|
|
389 |
</p> |
|
|
390 |
|
|
|
391 |
<pre class="code prettyprint">var table = new Y.DataTable({ |
|
|
392 |
columnset: [ 'name', 'age' ], |
|
|
393 |
... |
|
|
394 |
}); |
|
|
395 |
|
|
|
396 |
// columnset passes through to columns |
|
|
397 |
var columns = table.get('columns'); // => Array, not Columnset instance |
|
|
398 |
|
|
|
399 |
table.set('columnset', [ ... (new column configurations) ... ]); |
|
|
400 |
|
|
|
401 |
// backward compatibility stops here |
|
|
402 |
var columnset = table.get('columnset'); // => Array, not Columnset instance</pre> |
|
|
403 |
|
|
|
404 |
|
|
|
405 |
<p> |
|
|
406 |
Strings passed into the column configuration will become objects with those |
|
|
407 |
strings as the value of the <code>key</code> property. |
|
|
408 |
</p> |
|
|
409 |
|
|
|
410 |
<p> |
|
|
411 |
See the <a href="index.html#columns">Column configuration</a> section in |
|
|
412 |
the user guide for more details. |
|
|
413 |
</p> |
|
|
414 |
|
|
|
415 |
<h2 id="data">Row Data Configuration Changes</h2> |
|
|
416 |
|
|
|
417 |
<p> |
|
|
418 |
As of 3.5.0, DataTable uses <code>Y.Model</code> and <code>Y.ModelList</code> to store row data. |
|
|
419 |
<code>Y.Recordset</code> and <code>Y.Record</code> haven't been deprecated, but may be in the |
|
|
420 |
future. The <code>recordset</code> attribute has been retained for <em>partial</em> |
|
|
421 |
backward compatibility. The <code>data</code> ModelList can be assigned to, but |
|
|
422 |
retrieving the value of the attribute will return the ModelList, <em>not |
|
|
423 |
a <code>Y.Recordset</code> instance</em>. |
|
|
424 |
</p> |
|
|
425 |
|
|
|
426 |
<pre class="code prettyprint">var table = new Y.DataTable({ |
|
|
427 |
columnset: [ ... ], |
|
|
428 |
recordset: [ |
|
|
429 |
{ name: 'Tom Brokaw', birthdate: new Date(1940, 1, 6) }, |
|
|
430 |
{ name: 'Peter Jennings', birthdate: new Date(1938, 6, 29) }, |
|
|
431 |
{ name: 'Katie Couric', birthdate: new Date(1957, 1, 7) }, |
|
|
432 |
... |
|
|
433 |
] |
|
|
434 |
}); |
|
|
435 |
|
|
|
436 |
// recordset passes through to data. |
|
|
437 |
var data = table.get('data'); // => ModelList instance |
|
|
438 |
|
|
|
439 |
table.set('recordset', [ ... (new data records) ... ]); |
|
|
440 |
|
|
|
441 |
// backward compatibility stops here |
|
|
442 |
var recordset = table.get('recordset'); // => ModelList, not Recordset</pre> |
|
|
443 |
|
|
|
444 |
|
|
|
445 |
<p> |
|
|
446 |
<code>Y.Record</code> stores all values in a single attribute named <code>data</code>, where <code>Y.Model</code> uses individual attributes for each value. |
|
|
447 |
</p> |
|
|
448 |
|
|
|
449 |
<div class="yui3-g"> |
|
|
450 |
<div class="yui3-u before"> |
|
|
451 |
<h4 class="no-toc">3.4.1</h4> |
|
|
452 |
|
|
|
453 |
<pre class="code prettyprint">// Y.Record |
|
|
454 |
var record = oldTable.get('recordset').item(0); |
|
|
455 |
|
|
|
456 |
record.getValue('birthdate'); // => Date(1940, 1, 6) |
|
|
457 |
record.get('data').birthdate; // => same</pre> |
|
|
458 |
|
|
|
459 |
</div> |
|
|
460 |
<div class="yui3-u after"> |
|
|
461 |
<h4 class="no-toc">3.5.0</h4> |
|
|
462 |
<pre class="code prettyprint">// Y.Model |
|
|
463 |
var model = newTable.getRecord(0); |
|
|
464 |
|
|
|
465 |
model.get('birthdate'); // => Date(1940, 1, 6)</pre> |
|
|
466 |
|
|
|
467 |
</div> |
|
|
468 |
</div> |
|
|
469 |
|
|
|
470 |
<p> |
|
|
471 |
<strong>This change breaks column/record keys that contain periods</strong>. |
|
|
472 |
Attribute treats periods as subproperty indicators, so periods are no |
|
|
473 |
longer allowed; use an alternate character. In the case of remote data |
|
|
474 |
that is parsed by <code>Y.Plugin.DataSourceJSONSchema</code>, use the <code>locator</code> |
|
|
475 |
configuration for fields to extract subproperty values. A benefit to doing |
|
|
476 |
this is that you may not need to specify a column <code>label</code>. |
|
|
477 |
</p> |
|
|
478 |
|
|
|
479 |
<div class="yui3-g"> |
|
|
480 |
<div class="yui3-u before"> |
|
|
481 |
<h4 class="no-toc">3.4.1</h4> |
|
|
482 |
|
|
|
483 |
<pre class="code prettyprint">var table = new Y.DataTable.Base({ |
|
|
484 |
columnset: [ |
|
|
485 |
{ key: "id" }, |
|
|
486 |
{ key: "Product.Name", label: "Product" }, |
|
|
487 |
{ key: "Product.Price", label: "Price" } |
|
|
488 |
], |
|
|
489 |
caption: "Price List" |
|
|
490 |
}).plug(Y.Plugin.DataTableDataSource, { |
|
|
491 |
datasource: new Y.DataSource.IO({ |
|
|
492 |
source: "/service/price-list" |
|
|
493 |
}).plug(Y.Plugin.DataSourceJSONSchema, { |
|
|
494 |
schema: { |
|
|
495 |
resultListLocator: "items", |
|
|
496 |
resultFields: [ |
|
|
497 |
{ key: "id" }, |
|
|
498 |
{ key: "Product.Name" }, |
|
|
499 |
{ key: "Product.Price" } |
|
|
500 |
] |
|
|
501 |
} |
|
|
502 |
}) |
|
|
503 |
}); |
|
|
504 |
|
|
|
505 |
table.datasource.load(...);</pre> |
|
|
506 |
|
|
|
507 |
</div> |
|
|
508 |
<div class="yui3-u after"> |
|
|
509 |
<h4 class="no-toc">3.5.0</h4> |
|
|
510 |
|
|
|
511 |
<pre class="code prettyprint">var table = new Y.DataTable({ |
|
|
512 |
columns: [ "id", "Product", "Price" ], |
|
|
513 |
caption: "Price List" |
|
|
514 |
}).plug(Y.Plugin.DataTableDataSource, { |
|
|
515 |
datasource: new Y.DataSource.IO({ |
|
|
516 |
source: "/service/price-list" |
|
|
517 |
}).plug(Y.Plugin.DataSourceJSONSchema, { |
|
|
518 |
schema: { |
|
|
519 |
resultListLocator: "items", |
|
|
520 |
resultFields: [ |
|
|
521 |
{ key: "id" }, |
|
|
522 |
{ key: "Product", |
|
|
523 |
locator: "Product.Name" }, |
|
|
524 |
{ key: "Price", |
|
|
525 |
locator: "Product.Price" } |
|
|
526 |
] |
|
|
527 |
} |
|
|
528 |
}) |
|
|
529 |
}); |
|
|
530 |
|
|
|
531 |
table.datasource.load(...);</pre> |
|
|
532 |
|
|
|
533 |
</div> |
|
|
534 |
</div> |
|
|
535 |
|
|
|
536 |
<p> |
|
|
537 |
If you are using any Recordset plugins, your code will need to be modified. |
|
|
538 |
Some loss of functionality may result. |
|
|
539 |
</p> |
|
|
540 |
|
|
|
541 |
<dl> |
|
|
542 |
<dt><code>Y.Plugin.RecordsetSort</code></dt> |
|
|
543 |
<dd> |
|
|
544 |
This plugin was formerly applied by the <code>Y.Plugin.DataTableSort</code> plugin |
|
|
545 |
to the DataTable's Recordset instance. Sorting is now enabled |
|
|
546 |
<a href="#features">through a class extension</a>. |
|
|
547 |
</dd> |
|
|
548 |
|
|
|
549 |
<dt><code>Y.Plugin.RecordsetFilter</code></dt> |
|
|
550 |
<dd> |
|
|
551 |
The default ModelList implementation only supports a <code>filter(function)</code> |
|
|
552 |
method. If you were relying on this plugin's <code>grep</code> or <code>reject</code> |
|
|
553 |
methods or the <code>filter(key, value)</code> functionality, you will need to |
|
|
554 |
replace that functionality through custom code. |
|
|
555 |
</dd> |
|
|
556 |
|
|
|
557 |
<dt><code>Y.Plugin.RecordsetIndexer</code></dt> |
|
|
558 |
<dd> |
|
|
559 |
The default ModelList implementation does not support multiple custom |
|
|
560 |
indexes, though it does maintain an index for <code>id</code> (or another, |
|
|
561 |
assigned primary key attribute) and <code>clientId</code>. See |
|
|
562 |
<a href="../model/index.html">the Model user guide</a> for more |
|
|
563 |
information on customizing the primary index. If multiple custom |
|
|
564 |
indexes are required, DataTable supports the use of |
|
|
565 |
<a href="#recordtype">custom Model subclasses</a> to store the record |
|
|
566 |
data. |
|
|
567 |
</dd> |
|
|
568 |
</ul> |
|
|
569 |
|
|
|
570 |
<p> |
|
|
571 |
See the <a href="#data">Data Configuration section</a> of the DataTable |
|
|
572 |
user guide for more information. |
|
|
573 |
</p> |
|
|
574 |
|
|
|
575 |
<h2 id="features">Feature Configuration Changes</h2> |
|
|
576 |
|
|
|
577 |
<p> |
|
|
578 |
The two optional features available for DataTable in 3.4.1 were sorting and |
|
|
579 |
scrolling. Both features exist in 3.5.0, but are implemented as class |
|
|
580 |
extensions for <code>Y.DataTable</code>. Simply including the <code>datatable-sort</code> or |
|
|
581 |
<code>datatable-scroll</code> module in your <code>use(...)</code> will enable the feature for |
|
|
582 |
all new DataTables. |
|
|
583 |
</p> |
|
|
584 |
|
|
|
585 |
<pre class="code prettyprint">YUI().use('datatable-sort', 'datatable-scroll', function (Y) { |
|
|
586 |
|
|
|
587 |
// Create a DataTable that is sortable by the "name" column, and is |
|
|
588 |
// configured to scroll vertically within 300px. Because scrollable is |
|
|
589 |
// set to "y", not "x" or "xy", it will not attempt to scroll horizontally. |
|
|
590 |
// Instead the table width will be set to 100%. |
|
|
591 |
var table = new Y.DataTable({ |
|
|
592 |
columns : [ { key: 'name', sortable: true }, ... ], |
|
|
593 |
data : [ ... ], |
|
|
594 |
scrollable: "y", |
|
|
595 |
height : "300px", |
|
|
596 |
width : "100%" |
|
|
597 |
}); |
|
|
598 |
|
|
|
599 |
// No plugins necessary |
|
|
600 |
table.render('#over-there'); |
|
|
601 |
});</pre> |
|
|
602 |
|
|
|
603 |
|
|
|
604 |
<h3 id="sorting">Column Sorting Changes</h3> |
|
|
605 |
|
|
|
606 |
<p> |
|
|
607 |
Configuring sortable columns may be done as it was in 3.4.1, by setting the |
|
|
608 |
column configuration property <code>sortable: true</code>, but may also be done by |
|
|
609 |
setting the DataTable's <code>sortable</code> configuration to <code>true</code> or an array of |
|
|
610 |
column names. |
|
|
611 |
</p> |
|
|
612 |
|
|
|
613 |
<div class="yui3-g"> |
|
|
614 |
<div class="yui3-u before"> |
|
|
615 |
<h4 class="no-toc">3.4.1</h4> |
|
|
616 |
|
|
|
617 |
<pre class="code prettyprint">// Assumes use('datatable-sort') or use('datatable') |
|
|
618 |
var table = new Y.DataTable.Base({ |
|
|
619 |
columnset: [ |
|
|
620 |
{ key: "id" }, |
|
|
621 |
{ key: "name", sortable: true }, |
|
|
622 |
{ key: "price", sortable: true } |
|
|
623 |
], |
|
|
624 |
recordset: [ |
|
|
625 |
{ id: 1, name: "Bread", price: 3.45 }, |
|
|
626 |
{ id: 2, name: "Milk", price: 4.99 }, |
|
|
627 |
{ id: 3, name: "Eggs", price: 2.75 }, |
|
|
628 |
... |
|
|
629 |
], |
|
|
630 |
caption: "Price List" |
|
|
631 |
}); |
|
|
632 |
|
|
|
633 |
table.plug(Y.Plugin.DataTableSort); |
|
|
634 |
|
|
|
635 |
table.render('#sort-demo'); |
|
|
636 |
|
|
|
637 |
// Sorting API is on the Recordset's plugin |
|
|
638 |
table.get("recordset").sort.sort("name");</pre> |
|
|
639 |
|
|
|
640 |
</div> |
|
|
641 |
<div class="yui3-u after"> |
|
|
642 |
<h4 class="no-toc">3.5.0</h4> |
|
|
643 |
|
|
|
644 |
<pre class="code prettyprint">// Assumes use('datatable-sort') or use('datatable') |
|
|
645 |
var table = new Y.DataTable({ |
|
|
646 |
columns: [ "id", "name", "price" ], |
|
|
647 |
data: [ |
|
|
648 |
{ id: 1, name: "Bread", price: 3.45 }, |
|
|
649 |
{ id: 2, name: "Milk", price: 4.99 }, |
|
|
650 |
{ id: 3, name: "Eggs", price: 2.75 }, |
|
|
651 |
... |
|
|
652 |
], |
|
|
653 |
sortable: [ "name", "price" ] |
|
|
654 |
}); |
|
|
655 |
|
|
|
656 |
table.render('#sort-demo'); |
|
|
657 |
|
|
|
658 |
// Sort method is on the instance |
|
|
659 |
table.sort("name"); |
|
|
660 |
|
|
|
661 |
//------------------------------------------------- |
|
|
662 |
// Alternate methods |
|
|
663 |
//------------------------------------------------- |
|
|
664 |
|
|
|
665 |
var table = new Y.DataTable({ |
|
|
666 |
columns: [ "id", "name", "price" ], |
|
|
667 |
data: [ ... ], |
|
|
668 |
sortable: true // makes all columns sortable |
|
|
669 |
}); |
|
|
670 |
|
|
|
671 |
// OR the old way works, too |
|
|
672 |
var table = new Y.DataTable({ |
|
|
673 |
columns: [ |
|
|
674 |
{ key: "id" }, |
|
|
675 |
{ key: "name", sortable: true }, |
|
|
676 |
{ key: "price", sortable: true } |
|
|
677 |
], |
|
|
678 |
data: [ ... ] |
|
|
679 |
});</pre> |
|
|
680 |
|
|
|
681 |
</div> |
|
|
682 |
</div> |
|
|
683 |
|
|
|
684 |
<p> |
|
|
685 |
Since there is no plugin, the <code>sort</code> method is now on the DataTable instance |
|
|
686 |
itself, as are the related attributes. In particular, the <code>lastSortedBy</code> |
|
|
687 |
attribute from the plugin implementation has been replaced by the <code>sortBy</code> |
|
|
688 |
attribute added by the class extension. |
|
|
689 |
</p> |
|
|
690 |
|
|
|
691 |
<p> |
|
|
692 |
As of 3.5.0, DataTables configured with <code>sortBy</code> will have their rows |
|
|
693 |
sorted automatically upon inserting into the table. You do not need to |
|
|
694 |
presort data for the initial render. |
|
|
695 |
</p> |
|
|
696 |
|
|
|
697 |
<p> |
|
|
698 |
<strong>The <code>trigger</code> attribute of the sorting plugin was not retained in |
|
|
699 |
the 3.5.0 class extension</strong>. If you require an alternate triggering |
|
|
700 |
event, detach and replace the table's <code>_sortHandle</code> property after |
|
|
701 |
<code>render()</code>. |
|
|
702 |
</p> |
|
|
703 |
|
|
|
704 |
<pre class="code prettyprint">var table = new Y.DataTable({ ... }).render("#over-there"); |
|
|
705 |
|
|
|
706 |
table._sortHandle.detach(); |
|
|
707 |
table._sortHandle = table.delegate(["dblclick", "keydown"], |
|
|
708 |
table._onUITriggerSort, ".yui3-datatable-sortable-column", table);</pre> |
|
|
709 |
|
|
|
710 |
|
|
|
711 |
<p> |
|
|
712 |
See the <a href="index.html#sorting">Column Sorting section</a> of the |
|
|
713 |
user guide for details about the APIs and attributes. |
|
|
714 |
</p> |
|
|
715 |
|
|
|
716 |
<h3 id="scrolling">Scrollable Table Changes</h3> |
|
|
717 |
|
|
|
718 |
<p> |
|
|
719 |
Like sorting, the scrolling functionality has been moved to a class |
|
|
720 |
extension, making it unnecessary to plug the DataTable instance with the |
|
|
721 |
(now deprecated) <code>Y.Plugin.DataTableScroll</code> plugin. |
|
|
722 |
</p> |
|
|
723 |
|
|
|
724 |
<p> |
|
|
725 |
<strong><code>datatable-scroll</code> is no longer included in the <code>datatable</code> |
|
|
726 |
rollup</strong>, and must be explicitly included in your <code>use()</code> statement. |
|
|
727 |
</p> |
|
|
728 |
|
|
|
729 |
<p> |
|
|
730 |
To enable scrolling in 3.5.0, set the table's <code>scrollable</code> attribute to "x", |
|
|
731 |
"y", or "xy". The configured <code>height</code> and <code>width</code> for the DataTable are |
|
|
732 |
used to bound the overall widget dimesions. Scrolling will only be applied |
|
|
733 |
on the axis or axes specified in <code>scrollable</code>. However, if <code>scrollable</code> is |
|
|
734 |
set to "y", but the <code>height</code> isn't set, it will not be made scrollable. |
|
|
735 |
Likewise for "x" and <code>width</code>. |
|
|
736 |
</p> |
|
|
737 |
|
|
|
738 |
<div class="yui3-g"> |
|
|
739 |
<div class="yui3-u before"> |
|
|
740 |
<h4 class="no-toc">3.4.1</h4> |
|
|
741 |
|
|
|
742 |
<pre class="code prettyprint">// Assumes use("datatable-scroll") or use("datatable") |
|
|
743 |
var table = new Y.DataTable.Base({ |
|
|
744 |
columnset: ["id", "name", "price"], |
|
|
745 |
recordset: [ |
|
|
746 |
{ id: 1, name: "Bread", price: 3.45 }, |
|
|
747 |
{ id: 2, name: "Milk", price: 4.99 }, |
|
|
748 |
{ id: 3, name: "Eggs", price: 2.75 }, |
|
|
749 |
... |
|
|
750 |
] |
|
|
751 |
}); |
|
|
752 |
|
|
|
753 |
table.plug(Y.Plugin.DataTableScroll, { |
|
|
754 |
height: "175px" |
|
|
755 |
}); |
|
|
756 |
|
|
|
757 |
table.render("#over-there");</pre> |
|
|
758 |
|
|
|
759 |
</div> |
|
|
760 |
<div class="yui3-u after"> |
|
|
761 |
<h4 class="no-toc">3.5.0</h4> |
|
|
762 |
|
|
|
763 |
<pre class="code prettyprint">// Assumes use("datatable-scroll") |
|
|
764 |
var table = new Y.DataTable({ |
|
|
765 |
columns: ["id", "name", "price"], |
|
|
766 |
data: [ |
|
|
767 |
{ id: 1, name: "Bread", price: 3.45 }, |
|
|
768 |
{ id: 2, name: "Milk", price: 4.99 }, |
|
|
769 |
{ id: 3, name: "Eggs", price: 2.75 }, |
|
|
770 |
... |
|
|
771 |
], |
|
|
772 |
scrollable: "y", |
|
|
773 |
height: "175px" |
|
|
774 |
}).render("#over-there");</pre> |
|
|
775 |
|
|
|
776 |
</div> |
|
|
777 |
</div> |
|
|
778 |
|
|
|
779 |
<h2 id="markup">Markup and CSS Changes</h2> |
|
|
780 |
|
|
|
781 |
<p> |
|
|
782 |
DataTable in 3.5.0 applies more CSS classes to Nodes, stamps fewer nodes |
|
|
783 |
with guid ids, and does not render header and cell liner <code><div></code>s. |
|
|
784 |
</p> |
|
|
785 |
|
|
|
786 |
<p> |
|
|
787 |
Below are examples of the same table rendered in 3.4.1 and 3.5.0. The 3.5.0 |
|
|
788 |
table has comments indicating markup added by feature modules. |
|
|
789 |
</p> |
|
|
790 |
|
|
|
791 |
<h4 class="no-toc">3.4.1</h4> |
|
|
792 |
<pre class="code prettyprint"><div id="(guid)" class="yui3-widget yui3-datatable"> |
|
|
793 |
<div id="(guid)" class="yui3-datatable-content"> |
|
|
794 |
<table> |
|
|
795 |
|
|
|
796 |
<caption> |
|
|
797 |
Example table with simple columns |
|
|
798 |
</caption> |
|
|
799 |
|
|
|
800 |
<colgroup> |
|
|
801 |
<col> |
|
|
802 |
<col> |
|
|
803 |
<col> |
|
|
804 |
</colgroup> |
|
|
805 |
|
|
|
806 |
<thead class="yui3-datatable-columns"> |
|
|
807 |
<tr id="" class="yui3-datatable-first yui3-datatable-last"> |
|
|
808 |
<th id="(guid)" rowspan="1" colspan="1" class="yui3-column-id" abbr=""> |
|
|
809 |
<div class="yui3-datatable-liner"> |
|
|
810 |
id |
|
|
811 |
</div> |
|
|
812 |
</th> |
|
|
813 |
<th id="(guid)" rowspan="1" colspan="1" class="yui3-column-name" abbr=""> |
|
|
814 |
<div class="yui3-datatable-liner"> |
|
|
815 |
name |
|
|
816 |
</div> |
|
|
817 |
</th> |
|
|
818 |
<th id="(guid)" rowspan="1" colspan="1" class="yui3-column-price" abbr=""> |
|
|
819 |
<div class="yui3-datatable-liner"> |
|
|
820 |
price |
|
|
821 |
</div> |
|
|
822 |
</th> |
|
|
823 |
</tr> |
|
|
824 |
</thead> |
|
|
825 |
|
|
|
826 |
<tbody class="yui3-datatable-msg"> |
|
|
827 |
</tbody> |
|
|
828 |
|
|
|
829 |
<tbody class="yui3-datatable-data" id="(guid)"> |
|
|
830 |
<tr id="(guid)" class="yui3-datatable-even"> |
|
|
831 |
<td headers="(guid)" class="yui3-column-id"> |
|
|
832 |
<div class="yui3-datatable-liner"> |
|
|
833 |
1 |
|
|
834 |
</div> |
|
|
835 |
</td> |
|
|
836 |
<td headers="(guid)" class="yui3-column-name"> |
|
|
837 |
<div class="yui3-datatable-liner"> |
|
|
838 |
Bread |
|
|
839 |
</div> |
|
|
840 |
</td> |
|
|
841 |
<td headers="(guid)" class="yui3-column-price"> |
|
|
842 |
<div class="yui3-datatable-liner"> |
|
|
843 |
3.45 |
|
|
844 |
</div> |
|
|
845 |
</td> |
|
|
846 |
</tr> |
|
|
847 |
<tr id="(guid)" class="yui3-datatable-odd"> |
|
|
848 |
<td headers="(guid)" class="yui3-column-id"> |
|
|
849 |
<div class="yui3-datatable-liner"> |
|
|
850 |
2 |
|
|
851 |
</div> |
|
|
852 |
</td> |
|
|
853 |
<td headers="(guid)" class="yui3-column-name"> |
|
|
854 |
<div class="yui3-datatable-liner"> |
|
|
855 |
Milk |
|
|
856 |
</div> |
|
|
857 |
</td> |
|
|
858 |
<td headers="(guid)" class="yui3-column-price"> |
|
|
859 |
<div class="yui3-datatable-liner"> |
|
|
860 |
4.99 |
|
|
861 |
</div> |
|
|
862 |
</td> |
|
|
863 |
</tr> |
|
|
864 |
<tr id="(guid)" class="yui3-datatable-even"> |
|
|
865 |
<td headers="(guid)" class="yui3-column-id"> |
|
|
866 |
<div class="yui3-datatable-liner"> |
|
|
867 |
3 |
|
|
868 |
</div> |
|
|
869 |
</td> |
|
|
870 |
<td headers="(guid)" class="yui3-column-name"> |
|
|
871 |
<div class="yui3-datatable-liner"> |
|
|
872 |
Eggs |
|
|
873 |
</div> |
|
|
874 |
</td> |
|
|
875 |
<td headers="(guid)" class="yui3-column-price"> |
|
|
876 |
<div class="yui3-datatable-liner"> |
|
|
877 |
2.75 |
|
|
878 |
</div> |
|
|
879 |
</td> |
|
|
880 |
</tr> |
|
|
881 |
</tbody> |
|
|
882 |
|
|
|
883 |
</table> |
|
|
884 |
</div> |
|
|
885 |
</div></pre> |
|
|
886 |
|
|
|
887 |
|
|
|
888 |
<h4 class="no-toc">3.5.0</h4> |
|
|
889 |
<pre class="code prettyprint"><div id="(guid)" class="yui3-widget yui3-datatable"> |
|
|
890 |
<div id="(guid)" class="yui3-datatable-content"> |
|
|
891 |
<table cellspacing="0" class="yui3-datatable-table" id="(guid)"> |
|
|
892 |
|
|
|
893 |
<caption class="yui3-datatable-caption"> |
|
|
894 |
Price List |
|
|
895 |
</caption> |
|
|
896 |
|
|
|
897 |
<!-- colgroup only renders if datatable-column-widths is use()d. |
|
|
898 |
Note, datatable-column-widths is included in the datatable rollup --> |
|
|
899 |
<colgroup id="(guid)"> |
|
|
900 |
<col> |
|
|
901 |
<col> |
|
|
902 |
<col> |
|
|
903 |
</colgroup> |
|
|
904 |
|
|
|
905 |
<thead class="yui3-datatable-columns" id="(guid)"> |
|
|
906 |
<tr> |
|
|
907 |
<th id="(guid)" colspan="1" rowspan="1" class="yui3-datatable-header yui3-datatable-first-header yui3-datatable-col-id" scope="col" data-yui3-col-id="id"> |
|
|
908 |
id |
|
|
909 |
</th> |
|
|
910 |
<th id="(guid)" colspan="1" rowspan="1" class="yui3-datatable-header yui3-datatable-col-name" scope="col" data-yui3-col-id="name"> |
|
|
911 |
name |
|
|
912 |
</th> |
|
|
913 |
<th id="(guid)" colspan="1" rowspan="1" class="yui3-datatable-header yui3-datatable-col-price" scope="col" data-yui3-col-id="price"> |
|
|
914 |
price |
|
|
915 |
</th> |
|
|
916 |
</tr> |
|
|
917 |
</thead> |
|
|
918 |
|
|
|
919 |
<!-- The message tbody only renders if datatable-message is use()d. |
|
|
920 |
Note, datatable-message is included in the datatable rollup --> |
|
|
921 |
<tbody class="yui3-datatable-message" id="(guid)"> |
|
|
922 |
<tr> |
|
|
923 |
<td class="yui3-datatable-message-content" colspan="3"> |
|
|
924 |
No data to display |
|
|
925 |
</td> |
|
|
926 |
</tr> |
|
|
927 |
</tbody> |
|
|
928 |
|
|
|
929 |
<tbody class="yui3-datatable-data"> |
|
|
930 |
<tr id="(guid)" data-yui3-record="record_1" class="yui3-datatable-even"> |
|
|
931 |
<td class="yui3-datatable-col-id yui3-datatable-cell"> |
|
|
932 |
1 |
|
|
933 |
</td> |
|
|
934 |
<td class="yui3-datatable-col-name yui3-datatable-cell"> |
|
|
935 |
Bread |
|
|
936 |
</td> |
|
|
937 |
<td class="yui3-datatable-col-price yui3-datatable-cell"> |
|
|
938 |
3.45 |
|
|
939 |
</td> |
|
|
940 |
</tr> |
|
|
941 |
<tr id="(guid)" data-yui3-record="record_2" class="yui3-datatable-odd"> |
|
|
942 |
<td class="yui3-datatable-col-id yui3-datatable-cell"> |
|
|
943 |
2</td> |
|
|
944 |
<td class="yui3-datatable-col-name yui3-datatable-cell"> |
|
|
945 |
Milk |
|
|
946 |
</td> |
|
|
947 |
<td class="yui3-datatable-col-price yui3-datatable-cell"> |
|
|
948 |
4.99 |
|
|
949 |
</td> |
|
|
950 |
</tr> |
|
|
951 |
<tr id="(guid)" data-yui3-record="record_3" class="yui3-datatable-even"> |
|
|
952 |
<td class="yui3-datatable-col-id yui3-datatable-cell"> |
|
|
953 |
3 |
|
|
954 |
</td> |
|
|
955 |
<td class="yui3-datatable-col-name yui3-datatable-cell"> |
|
|
956 |
Eggs |
|
|
957 |
</td> |
|
|
958 |
<td class="yui3-datatable-col-price yui3-datatable-cell"> |
|
|
959 |
2.75 |
|
|
960 |
</td> |
|
|
961 |
</tr> |
|
|
962 |
</tbody> |
|
|
963 |
|
|
|
964 |
</table> |
|
|
965 |
</div> |
|
|
966 |
</div></pre> |
|
|
967 |
|
|
|
968 |
|
|
|
969 |
<h2 id="help-me">What Did I Miss?</h2> |
|
|
970 |
|
|
|
971 |
<p> |
|
|
972 |
Obviously, there were a lot of changes to DataTable from 3.4.1 to 3.5.0. |
|
|
973 |
It's entirely likely that I have missed something here. If you experience |
|
|
974 |
trouble with your upgrade and find this migration guide is missing |
|
|
975 |
something important, please <a href="/projects/yui3/newticket">file a |
|
|
976 |
ticket</a> and I'll update it as soon as possible. |
|
|
977 |
</p> |
|
|
978 |
|
|
|
979 |
<p> |
|
|
980 |
Additional resources to help with the upgrade include the |
|
|
981 |
<a href="/forum">forums</a>, and the #yui IRC channel on freenode.net. |
|
|
982 |
</p> |
|
|
983 |
</div> |
|
|
984 |
</div> |
|
|
985 |
</div> |
|
|
986 |
|
|
|
987 |
<div class="yui3-u-1-4"> |
|
|
988 |
<div class="sidebar"> |
|
|
989 |
|
|
|
990 |
<div id="toc" class="sidebox"> |
|
|
991 |
<div class="hd"> |
|
|
992 |
<h2 class="no-toc">Table of Contents</h2> |
|
|
993 |
</div> |
|
|
994 |
|
|
|
995 |
<div class="bd"> |
|
|
996 |
<ul class="toc"> |
|
|
997 |
<li> |
|
|
998 |
<a href="#overview">Overview of API changes from 3.4.1</a> |
|
|
999 |
</li> |
|
|
1000 |
<li> |
|
|
1001 |
<a href="#instantiation">Instantiation and Instance Configuration Changes</a> |
|
|
1002 |
</li> |
|
|
1003 |
<li> |
|
|
1004 |
<a href="#formatters">Table and Cell Formatting Changes</a> |
|
|
1005 |
</li> |
|
|
1006 |
<li> |
|
|
1007 |
<a href="#columns">Column Configuration Changes</a> |
|
|
1008 |
</li> |
|
|
1009 |
<li> |
|
|
1010 |
<a href="#data">Row Data Configuration Changes</a> |
|
|
1011 |
</li> |
|
|
1012 |
<li> |
|
|
1013 |
<a href="#features">Feature Configuration Changes</a> |
|
|
1014 |
<ul class="toc"> |
|
|
1015 |
<li> |
|
|
1016 |
<a href="#sorting">Column Sorting Changes</a> |
|
|
1017 |
</li> |
|
|
1018 |
<li> |
|
|
1019 |
<a href="#scrolling">Scrollable Table Changes</a> |
|
|
1020 |
</li> |
|
|
1021 |
</ul> |
|
|
1022 |
</li> |
|
|
1023 |
<li> |
|
|
1024 |
<a href="#markup">Markup and CSS Changes</a> |
|
|
1025 |
</li> |
|
|
1026 |
<li> |
|
|
1027 |
<a href="#help-me">What Did I Miss?</a> |
|
|
1028 |
</li> |
|
|
1029 |
</ul> |
|
|
1030 |
</div> |
|
|
1031 |
</div> |
|
|
1032 |
|
|
|
1033 |
|
|
|
1034 |
|
|
|
1035 |
<div class="sidebox"> |
|
|
1036 |
<div class="hd"> |
|
|
1037 |
<h2 class="no-toc">Examples</h2> |
|
|
1038 |
</div> |
|
|
1039 |
|
|
|
1040 |
<div class="bd"> |
|
|
1041 |
<ul class="examples"> |
|
|
1042 |
|
|
|
1043 |
|
|
|
1044 |
<li data-description="This example illustrates simple DataTable use cases."> |
|
|
1045 |
<a href="datatable-basic.html">Basic DataTable</a> |
|
|
1046 |
</li> |
|
|
1047 |
|
|
|
1048 |
|
|
|
1049 |
|
|
|
1050 |
<li data-description="DataTable loaded with JSON data from a remote webservice via DataSource.Get"> |
|
|
1051 |
<a href="datatable-dsget.html">DataTable + DataSource.Get + JSON Data</a> |
|
|
1052 |
</li> |
|
|
1053 |
|
|
|
1054 |
|
|
|
1055 |
|
|
|
1056 |
<li data-description="DataTable loaded with XML data from a remote webservice via DataSource.IO."> |
|
|
1057 |
<a href="datatable-dsio.html">DataTable + DataSource.IO + XML Data</a> |
|
|
1058 |
</li> |
|
|
1059 |
|
|
|
1060 |
|
|
|
1061 |
|
|
|
1062 |
<li data-description="Custom format data for display."> |
|
|
1063 |
<a href="datatable-formatting.html">Formatting Row Data for Display</a> |
|
|
1064 |
</li> |
|
|
1065 |
|
|
|
1066 |
|
|
|
1067 |
|
|
|
1068 |
<li data-description="DataTable with nested column headers."> |
|
|
1069 |
<a href="datatable-nestedcols.html">Nested Column Headers</a> |
|
|
1070 |
</li> |
|
|
1071 |
|
|
|
1072 |
|
|
|
1073 |
|
|
|
1074 |
<li data-description="DataTable with column sorting."> |
|
|
1075 |
<a href="datatable-sort.html">Column Sorting</a> |
|
|
1076 |
</li> |
|
|
1077 |
|
|
|
1078 |
|
|
|
1079 |
|
|
|
1080 |
<li data-description="DataTable with vertical and/or horizontal scrolling rows."> |
|
|
1081 |
<a href="datatable-scroll.html">Scrolling DataTable</a> |
|
|
1082 |
</li> |
|
|
1083 |
|
|
|
1084 |
|
|
|
1085 |
|
|
|
1086 |
<li data-description="Using DataTable's recordType attribute to create calculated, sortable columns."> |
|
|
1087 |
<a href="datatable-recordtype.html">Sortable generated columns</a> |
|
|
1088 |
</li> |
|
|
1089 |
|
|
|
1090 |
|
|
|
1091 |
|
|
|
1092 |
<li data-description="Populating one DataTable from details in the data of another."> |
|
|
1093 |
<a href="datatable-masterdetail.html">Master and detail tables</a> |
|
|
1094 |
</li> |
|
|
1095 |
|
|
|
1096 |
|
|
|
1097 |
|
|
|
1098 |
<li data-description="Checkbox column that retains checked state when sorting."> |
|
|
1099 |
<a href="datatable-chkboxselect.html">Checkbox select column</a> |
|
|
1100 |
</li> |
|
|
1101 |
|
|
|
1102 |
|
|
|
1103 |
|
|
|
1104 |
|
|
|
1105 |
</ul> |
|
|
1106 |
</div> |
|
|
1107 |
</div> |
|
|
1108 |
|
|
|
1109 |
|
|
|
1110 |
|
|
|
1111 |
<div class="sidebox"> |
|
|
1112 |
<div class="hd"> |
|
|
1113 |
<h2 class="no-toc">Examples That Use This Component</h2> |
|
|
1114 |
</div> |
|
|
1115 |
|
|
|
1116 |
<div class="bd"> |
|
|
1117 |
<ul class="examples"> |
|
|
1118 |
|
|
|
1119 |
|
|
|
1120 |
|
|
|
1121 |
|
|
|
1122 |
|
|
|
1123 |
|
|
|
1124 |
|
|
|
1125 |
|
|
|
1126 |
|
|
|
1127 |
|
|
|
1128 |
|
|
|
1129 |
|
|
|
1130 |
|
|
|
1131 |
|
|
|
1132 |
|
|
|
1133 |
|
|
|
1134 |
|
|
|
1135 |
|
|
|
1136 |
|
|
|
1137 |
|
|
|
1138 |
|
|
|
1139 |
|
|
|
1140 |
<li data-description="Shows how to instantiate multiple Panel instances, and use nested modality to interact with a Datatable."> |
|
|
1141 |
<a href="../panel/panel-form.html">Creating a Modal Form</a> |
|
|
1142 |
</li> |
|
|
1143 |
|
|
|
1144 |
|
|
|
1145 |
</ul> |
|
|
1146 |
</div> |
|
|
1147 |
</div> |
|
|
1148 |
|
|
|
1149 |
</div> |
|
|
1150 |
</div> |
|
|
1151 |
</div> |
|
|
1152 |
</div> |
|
|
1153 |
|
|
|
1154 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
1155 |
<script>prettyPrint();</script> |
|
|
1156 |
|
|
|
1157 |
<script> |
|
|
1158 |
YUI.Env.Tests = { |
|
|
1159 |
examples: [], |
|
|
1160 |
project: '../assets', |
|
|
1161 |
assets: '../assets/datatable', |
|
|
1162 |
name: 'datatable', |
|
|
1163 |
title: '3.5.0+ Migration Guide', |
|
|
1164 |
newWindow: '', |
|
|
1165 |
auto: false |
|
|
1166 |
}; |
|
|
1167 |
YUI.Env.Tests.examples.push('datatable-basic'); |
|
|
1168 |
YUI.Env.Tests.examples.push('datatable-dsget'); |
|
|
1169 |
YUI.Env.Tests.examples.push('datatable-dsio'); |
|
|
1170 |
YUI.Env.Tests.examples.push('datatable-formatting'); |
|
|
1171 |
YUI.Env.Tests.examples.push('datatable-nestedcols'); |
|
|
1172 |
YUI.Env.Tests.examples.push('datatable-sort'); |
|
|
1173 |
YUI.Env.Tests.examples.push('datatable-scroll'); |
|
|
1174 |
YUI.Env.Tests.examples.push('datatable-recordtype'); |
|
|
1175 |
YUI.Env.Tests.examples.push('datatable-masterdetail'); |
|
|
1176 |
YUI.Env.Tests.examples.push('datatable-chkboxselect'); |
|
|
1177 |
YUI.Env.Tests.examples.push('panel-form'); |
|
|
1178 |
|
|
|
1179 |
</script> |
|
|
1180 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
1181 |
|
|
|
1182 |
|
|
|
1183 |
|
|
|
1184 |
</body> |
|
|
1185 |
</html> |