3
Copyright 2012 Yahoo! Inc. All rights reserved.
4
Licensed under the BSD License.
5
http://yuilibrary.com/license/
7
YUI.add('datatable-head', function(Y) {
10
View class responsible for rendering the `<thead>` section of a table. Used as
11
the default `headerView` for `Y.DataTable.Base` and `Y.DataTable` classes.
14
@submodule datatable-head
18
fromTemplate = Lang.sub,
19
isArray = Lang.isArray,
22
ClassNameManager = Y.ClassNameManager,
23
_getClassName = ClassNameManager.getClassName;
26
View class responsible for rendering the `<thead>` section of a table. Used as
27
the default `headerView` for `Y.DataTable.Base` and `Y.DataTable` classes.
29
Translates the provided array of column configuration objects into a rendered
30
`<thead>` based on the data in those objects.
33
The structure of the column data is expected to be a single array of objects,
34
where each object corresponds to a `<th>`. Those objects may contain a
35
`children` property containing a similarly structured array to indicate the
36
nested cells should be grouped under the parent column's colspan in a separate
37
row of header cells. E.g.
40
new Y.DataTable.HeaderView({
43
{ key: 'id' }, // no nesting
44
{ key: 'name', children: [
45
{ key: 'firstName', label: 'First' },
46
{ key: 'lastName', label: 'Last' } ] }
51
This would translate to the following visualization:
61
Supported properties of the column objects include:
63
* `label` - The HTML content of the header cell.
64
* `key` - If `label` is not specified, the `key` is used for content.
65
* `children` - Array of columns to appear below this column in the next
67
* `headerTemplate` - Overrides the instance's `CELL_TEMPLATE` for cells in this
69
* `abbr` - The content of the 'abbr' attribute of the `<th>`
70
* `className` - Adds this string of CSS classes to the column header
72
Through the life of instantiation and rendering, the column objects will have
73
the following properties added to them:
75
* `id` - (Defaulted by DataTable) The id to assign the rendered column
76
* `_colspan` - To supply the `<th>` attribute
77
* `_rowspan` - To supply the `<th>` attribute
78
* `_parent` - (Added by DataTable) If the column is a child of another
79
column, this points to its parent column
81
The column object is also used to provide values for {placeholder} tokens in the
82
instance's `CELL_TEMPLATE`, so you can modify the template and include other
83
column object properties to populate them.
90
Y.namespace('DataTable').HeaderView = Y.Base.create('tableHeader', Y.View, [], {
91
// -- Instance properties -------------------------------------------------
94
Template used to create the table's header cell markup. Override this to
95
customize how header cell markup is created.
97
@property CELL_TEMPLATE
99
@default '<th id="{id}" colspan="{_colspan}" rowspan="{_rowspan}" class="{className}" scope="col" {_id}{abbr}>{content}</th>'
103
'<th id="{id}" colspan="{_colspan}" rowspan="{_rowspan}" class="{className}" scope="col" {_id}{abbr}>{content}</th>',
106
The data representation of the header rows to render. This is assigned by
107
parsing the `columns` configuration array, and is used by the render()
112
@default (initially unset)
115
//TODO: should this be protected?
119
Template used to create the table's header row markup. Override this to
120
customize the row markup.
122
@property ROW_TEMPLATE
124
@default '<tr>{content}</tr>'
128
'<tr>{content}</tr>',
131
The object that serves as the source of truth for column and row data.
132
This property is assigned at instantiation from the `source` property of
133
the configuration object passed to the constructor.
137
@default (initially unset)
140
//TODO: should this be protected?
144
// -- Public methods ------------------------------------------------------
147
Builds a CSS class name from the provided tokens. If the instance is
148
created with `cssPrefix` or `source` in the configuration, it will use this
149
prefix (the `_cssPrefix` of the `source` object) as the base token. This
150
allows class instances to generate markup with class names that correspond
151
to the parent class that is consuming them.
154
@param {String} token* Any number of tokens to include in the class name
155
@return {String} The generated class name
158
getClassName: function () {
159
var args = toArray(arguments);
160
args.unshift(this._cssPrefix);
163
return _getClassName.apply(ClassNameManager, args);
167
Creates the `<thead>` Node content by assembling markup generated by
168
populating the `ROW_TEMPLATE` and `CELL_TEMPLATE` templates with content
169
from the `columns` property.
172
@return {HeaderView} The instance
176
render: function () {
177
var thead = this.get('container'),
178
columns = this.columns,
184
i, len, j, jlen, col, html, content, values;
186
if (thead && columns) {
189
if (columns.length) {
190
for (i = 0, len = columns.length; i < len; ++i) {
193
for (j = 0, jlen = columns[i].length; j < jlen; ++j) {
198
className: this.getClassName('header'),
199
content : col.label || col.key ||
200
("Column " + (j + 1))
204
values._id = col._id ?
205
' data-yui3-col-id="' + col._id + '"' : '';
208
values.abbr = ' abbr="' + col.abbr + '"';
212
values.className += ' ' + col.className;
216
values.className += ' ' + this.getClassName('first', 'header');
221
' ' + this.getClassName('col', col._id);
224
content += fromTemplate(
225
col.headerTemplate || this.CELL_TEMPLATE, values);
228
html += fromTemplate(this.ROW_TEMPLATE, {
234
thead.setContent(html);
242
// -- Protected and private properties and methods ------------------------
244
The base token for classes created with the `getClassName` method.
248
@default 'yui3-table'
252
_cssPrefix: ClassNameManager.getClassName('table'),
255
Handles changes in the source's columns attribute. Redraws the headers.
257
@method _afterColumnsChange
258
@param {EventFacade} e The `columnsChange` event object
262
_afterColumnsChange: function (e) {
263
this.columns = this._parseColumns(e.newVal);
269
Binds event subscriptions from the UI and the source (if assigned).
275
bindUI: function () {
276
if (this.source && !this._eventHandles.columnsChange) {
277
// TODO: How best to decouple this?
278
this._eventHandles.columnsChange =
279
this.source.after('columnsChange',
280
Y.bind('_afterColumnsChange', this));
285
Destroys the instance.
291
destructor: function () {
292
(new Y.EventHandle(Y.Object.values(this._eventHandles))).detach();
296
Holds the event subscriptions needing to be detached when the instance is
299
@property _eventHandles
301
@default undefined (initially unset)
305
//_eventHandles: null,
308
Initializes the instance. Reads the following configuration properties:
310
* `columns` - (REQUIRED) The initial column information
311
* `cssPrefix` - The base string for classes generated by `getClassName`
312
* `source` - The object to serve as source of truth for column info
315
@param {Object} config Configuration data
319
initializer: function (config) {
320
config || (config = {});
322
var cssPrefix = config.cssPrefix || (config.source || {}).cssPrefix;
324
this.source = config.source;
325
this.columns = this._parseColumns(config.columns);
327
this._eventHandles = [];
330
this._cssPrefix = cssPrefix;
335
Translate the input column format into a structure useful for rendering a
336
`<thead>`, rows, and cells. The structure of the input is expected to be a
337
single array of objects, where each object corresponds to a `<th>`. Those
338
objects may contain a `children` property containing a similarly structured
339
array to indicate the nested cells should be grouped under the parent
340
column's colspan in a separate row of header cells. E.g.
344
{ key: 'id' }, // no nesting
345
{ key: 'name', children: [
346
{ key: 'firstName', label: 'First' },
347
{ key: 'lastName', label: 'Last' } ] }
351
would indicate two header rows with the first column 'id' being assigned a
352
`rowspan` of `2`, the 'name' column appearing in the first row with a
353
`colspan` of `2`, and the 'firstName' and 'lastName' columns appearing in
354
the second row, below the 'name' column.
357
---------------------
360
| id | First | Last |
361
---------------------
364
Supported properties of the column objects include:
366
* `label` - The HTML content of the header cell.
367
* `key` - If `label` is not specified, the `key` is used for content.
368
* `children` - Array of columns to appear below this column in the next
370
* `abbr` - The content of the 'abbr' attribute of the `<th>`
371
* `headerTemplate` - Overrides the instance's `CELL_TEMPLATE` for cells
374
The output structure is basically a simulation of the `<thead>` structure
375
with arrays for rows and objects for cells. Column objects have the
376
following properties added to them:
378
* `id` - (Defaulted by DataTable) The id to assign the rendered
380
* `_colspan` - Per the `<th>` attribute
381
* `_rowspan` - Per the `<th>` attribute
382
* `_parent` - (Added by DataTable) If the column is a child of another
383
column, this points to its parent column
385
The column object is also used to provide values for {placeholder}
386
replacement in the `CELL_TEMPLATE`, so you can modify the template and
387
include other column object properties to populate them.
389
@method _parseColumns
390
@param {Object[]} data Array of column object data
391
@return {Array[]} An array of arrays corresponding to the header row
396
_parseColumns: function (data) {
400
entry, row, col, children, parent, i, len, j;
402
if (isArray(data) && data.length) {
403
// First pass, assign colspans and calculate row count for
404
// non-nested headers' rowspan
405
stack.push([data, -1]);
407
while (stack.length) {
408
entry = stack[stack.length - 1];
412
for (len = row.length; i < len; ++i) {
414
children = col.children;
418
if (isArray(children) && children.length) {
419
stack.push([children, -1]);
422
rowSpan = Math.max(rowSpan, stack.length);
424
// break to let the while loop process the children
432
// All columns in this row are processed
433
if (stack.length > 1) {
434
entry = stack[stack.length - 2];
435
parent = entry[0][entry[1]];
439
for (i = 0, len = row.length; i < len; ++i) {
440
// Can't use .length because in 3+ rows, colspan
441
// needs to aggregate the colspans of children
442
parent._colspan += row[i]._colspan;
449
// Second pass, build row arrays and assign rowspan
450
for (i = 0; i < rowSpan; ++i) {
454
stack.push([data, -1]);
456
while (stack.length) {
457
entry = stack[stack.length - 1];
461
for (len = row.length; i < len; ++i) {
463
children = col.children;
465
columns[stack.length - 1].push(col);
469
// collect the IDs of parent cols
470
col._headers = [col.id];
472
for (j = stack.length - 2; j >= 0; --j) {
473
parent = stack[j][0][stack[j][1]];
475
col._headers.unshift(parent.id);
478
if (children && children.length) {
479
// parent cells must assume rowspan 1 (long story)
481
// break to let the while loop process the children
482
stack.push([children, -1]);
485
col._rowspan = rowSpan - stack.length + 1;
490
// All columns in this row are processed
496
for (i = 0, len = columns.length; i < len; i += col._rowspan) {
507
}, '3.5.0' ,{requires:['datatable-core', 'view', 'classnamemanager']});