<div class="uitable">
<table>
<thead>
<tr>
<th>First Col.</th><th>Second Col.</th><th>Thrid Col.</th>
</tr>
</thead>
<tbody>
<tr>
<td>123</td><td>Sample</td><td>999</td>
</tr>
<tr>
<td>456</td><td>Text</td><td>888</td>
</tr>
<tr>
<td>780</td><td>Column</td><td>777</td>
</tr>
</tbody>
</table>
</div>
UI.Table is a UI component that improves simple HTML tables providing tfeatures tipical in GUI tables, such as sorting and filtering.
This widget can be used as an unobstrusive addon to simple HTML tables as shown in the Synopsis, or can be used along with the UI.TableModel class, in a MVC-like style.
[TODO]
Creates a table, inserting as a child of the <div> element $(element). model is the initial table model, used to render the table.
The <div> element onto the dynamic <table> is rendered. Read-Only.
UI.Table.prototype.selectedRow:
The index of the currently selected row. -1 if no row is selected. Read-Only, use the UI.Table.prototype.selectRow(rowIndex) method to change it.
Fired when the user clicks a row in the table. The clicked row index, and the event associated with the click are passed are parameters to the connected slots. Note that the rowSelected signal is more general, as this signal is not emited when a row is selected programatically, or by other methods different from a mouse click (such a keyboard navigation when supported?).
Fired when the user clicks on a header. The clicked header index and the event associated are passed as parameters to the connected slots.
Fired when a row is selected, independtly of how (programatically, user click, etc). The row index is passed as parameter to the connected slots
Fired when a mouse-over occured on a row. The row index and the event associated are passed as parameters to the connected slots.
Fired when a mouse-out occured on a row. The row index and the event associated are passed as parameters to the connected slots.
Fired when a row is about to be rendered. This may be because a new row has been added, or simply because the entire table is being rendered. A <tr> DOM element and the row index on the model is passed as parameter to the slots. As the element is a mutable DOM object, slots can use this signal to manipulate the rendered rows contents.
UI.Table.prototype.setModel(model):
Sets the model used to render the table to the model UI.TableModel instance. Redraws the table according to the model contents.
Returns the TableModel associated with the Table.
Redraws the HTML table
UI.Table.prototype.getTableElement():
Returns the DOM <table> element generated by the last render() call.
UI.Table.prototype.selectRow(rowIndex):
Selects the row which index on the model is rowIndex.
UI.Table.prototype.modelRowIndex(tBodyRowIndex):
Returns the index on the model of the row having tBodyRowIndex index on the rendered <tbody>.
UI.Table.bodyRowIndex(modelRowIndex):
Returns the index on the rendered tbody of the row having the modelRowIndex index on the model
Returns the rendered <tr> for the rowIndex-th row on the model
Returns the rendered <th> for the colIndex-th header on the model.
UI.Table.prototype.sort(colIndex, reverse=false):
Sorts the rendered table, by the colIndex-th column. If reverse is true, the table is sorted in reverse.
Declaring UI.Tables with no dynamic data is simple, just wrap your table onto a div with the uitable css class, as shown on the Synopsis.
When connecting the UI.Table with a model, the HTML syntax is also pretty simple:
<div class="uitable" ui:model="<js-expression>"></div>
Where <js-expression> must evaluate to a valid UI.TableModel.
Copyright 2005-2006 Leonardo Soto M. <leo.soto@gmail.com> and Imagemaker IT <http://www.imagemaker.cl>.
This program is licensed under the CDDL v1.0 license, see http://www.sun.com/cddl/cddl.html.