Class MochiKit.Widget.Table

Extends MochiKit.Widget.
The table widget class. Used to provide a sortable and scrolling data table, using an outer <div> HTML element around a <table>. The Table widget can only have TableColumn child nodes, each providing a visible data column in the table. In addition to standard HTML events, the "onclear" and "onselect" events are triggered when data is cleared or selected in the table.
Defined in: Widget.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	MochiKit.Widget.Table(attrs) Creates a new data table widget.

Fields borrowed from class MochiKit.Widget:: _id, Classes

Method Summary
Method Attributes	Method Name and Description
	_addSelectedIds() Adds the specified row id values to the selection.
	_handleSelect(evt) Handles the mouse selection events.
	_markSelection(indexOrNull) Marks selected rows.
	_renderRows() Renders the table rows.
	_unmarkSelection(indexOrNull) Unmarks selected rows.
	addChildNode(child) Adds a single child table column widget to this widget.
	addSelectedIds() Adds the specified row id values to the selection.
	clear() Clears all the data in the table.
	getCellElem(row, col) Returns a table cell element.
	getChildNodes() Returns an array with all child table column widgets.
	getColumnIndex(field) Returns the column index of a field.
	getData() Returns an array with the data in the table.
	getIdKey() Returns the unique key identifier column field, or null if none was set.
	getSelectedData() Returns the currently selected row data.
	getSelectedIds() Returns the currently selected row ids.
	getSortKey() Returns the current sort key for the table.
	redraw() Redraws the table from updated source data.
	removeChildNode(child) Removes a single child table column widget from this widget.
	removeSelectedIds() Removes the specified row id values from the selection.
	setAttrs(attrs) Updates the widget or HTML DOM node attributes.
	setData(data) Sets the table data.
	setIdKey(key) Sets the unique key identifier column field.
	setSelectedIds() Sets the selection to the specified row id values.
	sortData(field, direction) Sorts the table data by field and direction.

Methods borrowed from class MochiKit.Widget:: _animQueueId, _createWidgetTreeElem, _eventHandler, _widgetMixin, addAll, addClass, animate, blurAll, createWidget, createWidgetTree, destroy, destroyWidget, emitSignal, hasClass, hide, isFormField, isHidden, isWidget, removeAll, removeClass, setStyle, show, toggleClass

Class Detail

MochiKit.Widget.Table(attrs)

Creates a new data table widget.

<Table id="exTable" w="50%" h="100%">
  <TableColumn title="Id" field="id" key="true" type="number" />
  <TableColumn title="Name" field="name" sort="asc" />
  <TableColumn title="Creation Date" field="created" type="date" />
</Table>

Parameters:
{Object} attrs: the widget and node attributes
{String} attrs.select Optional: the row selection mode ('none', 'one' or 'multiple'), defaults to 'one'
{String} attrs.key Optional: the unique key identifier column field, defaults to null
{Widget} ... Optional: the child table columns

Returns:: {Widget} the widget DOM node

Method Detail

{Array} _addSelectedIds()

Adds the specified row id values to the selection. Note that this method does not emit any selection signal.

Parameters:
{String/Array} ... Optional: the row ids or array with ids to select

Returns:: {Array} an array with the new row ids actually selected

_handleSelect(evt)

Handles the mouse selection events.

Parameters:
{Event} evt: the MochiKit.Signal.Event object

_markSelection(indexOrNull)

Marks selected rows.

Parameters:
{Number} indexOrNull: the row index, or null for the array

_renderRows()

Renders the table rows.

_unmarkSelection(indexOrNull)

Unmarks selected rows.

Parameters:
{Number} indexOrNull: the row index, or null for the array

addChildNode(child)

Adds a single child table column widget to this widget.

Parameters:
{Widget} child: the table column widget to add

{Array} addSelectedIds()

Adds the specified row id values to the selection. If the current selection is changed the select signal will be emitted.

Parameters:
{String/Array} ... Optional: the row ids or array with ids to select

Returns:: {Array} an array with the new row ids actually selected

clear()

Clears all the data in the table. The column headers will not be affected by this method. Use removeAll() or removeChildNode() to also remove columns.

{Node} getCellElem(row, col)

Returns a table cell element.

Parameters:
{Number} row: the row index
{Number} col: the column index

Returns:: {Node} the table cell element node, or null if not found

{Array} getChildNodes()

Returns an array with all child table column widgets. Note that the array is a real JavaScript array, not a dynamic NodeList.

Returns:: {Array} the array of child table column widgets

{Number} getColumnIndex(field)

Returns the column index of a field.

Parameters:
{String} field: the field name

Returns:: {Number} the column index, or -1 if not found

{Array} getData()

Returns an array with the data in the table. The array returned should correspond exactly to the one previously set, i.e. it has not been sorted or modified in other ways.

Returns:: {Array} an array with the data in the table

{String} getIdKey()

Returns the unique key identifier column field, or null if none was set.

Returns:: {String} the key column field name, or null for none

{Object/Array} getSelectedData()

Returns the currently selected row data.

Returns:: {Object/Array} the data row selected, or an array of selected data rows if multiple selection is enabled

{Array} getSelectedIds()

Returns the currently selected row ids. If no rows are selected, an empty array will be returned. The row ids are the data values from the key column, or automatically generated internal values if no key column is set.

Returns:: {Array} an array with the selected row ids

{String} getSortKey()

Returns the current sort key for the table.

Returns:: {String} the current sort field, or null for none

redraw()

Redraws the table from updated source data. Note that this method will not add or remove rows and keeps the current row order intact. For a more complete redraw of the table, use setData().

removeChildNode(child)

Removes a single child table column widget from this widget. This will also clear all the data in the table.

Parameters:
{Widget} child: the table column widget to remove

{Array} removeSelectedIds()

Removes the specified row id values from the selection. If the current selection is changed the select signal will be emitted.

Parameters:
{String/Array} ... Optional: the row ids or array with ids to unselect

Returns:: {Array} an array with the row ids actually unselected

setAttrs(attrs)

Updates the widget or HTML DOM node attributes.

Parameters:
{Object} attrs: the widget and node attributes to set
{String} attrs.select Optional: the row selection mode ('none', 'one' or 'multiple')
{String} attrs.key Optional: the unique key identifier column field

setData(data)

Sets the table data. The table data is an array of objects, each having properties corresponding to the table column fields. Any object property not mapped to a table column will be ignored (i.e. a hidden column). See the TableColumn class for data mapping details.

var data = [
    { id: 1, name: "John Doe", created: "2007-12-31" },
    { id: 2, name: "First Last", created: "2008-03-01" },
    { id: 3, name: "Another Name", created: "2009-01-12" }
];
table.setData(data);

Parameters:
{Array} data: an array with data objects

setIdKey(key)

Sets the unique key identifier column field. Note that this method will regenerate all row identifiers if the table already contains data.

Parameters:
{String} key: the new key column field name

{Array} setSelectedIds()

Sets the selection to the specified row id values. If the current selection is changed the select signal will be emitted.

Parameters:
{String/Array} ... Optional: the row ids or array with ids to select

Returns:: {Array} an array with the row ids actually modified

sortData(field, direction)

Sorts the table data by field and direction.

Parameters:
{String} field: the sort field
{String} direction Optional: the sort direction, either "asc" or "desc"

Classes

Class MochiKit.Widget.Table