Class M.TableView
Extends
M.View.
The M.TableView renders a default HTML table, that can be dynamically filled via
content binding. Depending on the table's configuration, there will be a static
table header, that is visible even if there is no content. It is also possible
to always update the header, when applying content binding, too.
Defined in: table.js.
Constructor Attributes | Constructor Name and Description |
---|---|
Field Attributes | Field Name and Description |
---|---|
This property can be used to specify the table's header and cols, independent
from dynamically loaded table content.
|
|
Determines whether to remove all content rows if the table is updated or not.
|
|
Determines whether to remove the header rows if the table is updated or not.
|
|
The type of this object.
|
- Fields borrowed from class M.View:
- childViews, computedValue, contentBinding, contentBindingReverse, cssClass, cssClassOnError, cssClassOnInit, cssStyle, events, hasFocus, html, id, isInline, isView, modelId, parentView, recommendedEvents, triggerActionOnChange, triggerActionOnEnter, triggerActionOnKeyUp, value
Method Attributes | Method Name and Description |
---|---|
addRow(row, addToTableHeader)
This method adds a new row to the table view by simply appending its html representation
to the table view inside the DOM.
|
|
This method removes all of the table view's rows by removing all of its content in the DOM.
|
|
This method removes all content rows of the table view by removing the corresponding
html in the DOM.
|
|
theme()
This method is called once the initial rendering was applied to the
DOM.
|
- Methods borrowed from class M.View:
- addCssClass, attachToObservable, clearHtml, clearValue, clearValues, computeValue, contentDidChange, delegateValueUpdate, design, getChildViewsAsArray, getIds, getValue, getValues, gotFocus, lostFocus, nl2br, registerEvents, removeCssClass, removeCssProperty, renderUpdate, secure, setCssProperty, setValueFromDOM, style, tab2space, themeChildViews
- Methods borrowed from class M.Object:
- bindToCaller, create, destroy, extend, get, include, set
Field Detail
{Object}
header
This property can be used to specify the table's header and cols, independent
from dynamically loaded table content. It can be provided with the table's
definition within a page component. The table's content, in contrast, can only
be applied via content binding.
Note: If the removeHeaderRowOnUpdate property is set to YES, the header will
be removed whenever a content binding is applied. So if the header shall be
statically specified by the view component, do not set that property to YES!
This property should look something like the following:
{
data: ['col1', 'col2', 'col3'],
cols: ['20%', '10%', '70%']
}
Note: the cols property of this object is optional. You can also let CSS take
care of the columns arrangement or simply let the browser do all the work
automatically.
{Boolean}
removeContentRowsOnUpdate
Determines whether to remove all content rows if the table is updated or not.
{Boolean}
removeHeaderRowOnUpdate
Determines whether to remove the header rows if the table is updated or not.
{String}
type
The type of this object.
Method Detail
addRow(row, addToTableHeader)
This method adds a new row to the table view by simply appending its html representation
to the table view inside the DOM. This method is based on jQuery's append().
- Parameters:
- {String} row
- The html representation of a table row to be added.
- {Boolean} addToTableHeader
- Determines whether or not to add the row to the table's header.
removeAllRows()
This method removes all of the table view's rows by removing all of its content in the DOM. This
method is based on jQuery's empty().
removeContentRows()
This method removes all content rows of the table view by removing the corresponding
html in the DOM. This method is based on jQuery's remove().
theme()
This method is called once the initial rendering was applied to the
DOM. So this is where we will add the table's header (if there is
one specified)