Adds the ability to select rows in a table.
new HtmlTable([table, options]);
- table - (mixed; optional) - a Table DOM element or it's id; if you do not specify one, one will be created.
- options - (object; optional) a key/value set of options.
- all options defined by HtmlTable, plus:
- classZebra - (string) the class added to odd numbered rows; defaults to 'table-tr-odd'
- useKeyboard - (boolean) if true (the default) allows for the use of arrows to navigate rows and enter to select them.
- classRowSelected - (string) the class to add to the tr that is selected; defaults to 'table-tr-selected'
- classRowHovered - (string) the class to add to the tr that is hovered over by the mouse or has focus with the keyboard; defaults to 'table-tr-hovered'
- classSelectable - (string) the class to add to the table when selection is enabled; defaults to 'table-selectable'
- selectable - (boolean) if true the rows will be selectable. Defaults to false.
- allowMultiSelect - (boolean) if true (the default) the user can select more than one row at a time.
- shiftForMultiSelect - (boolean) enables support for holding shift to multi-select files (defaults to false). If false (and
allowMultiSelect
is true), clicking any row selects it.
- onRowFocus - callback to execute when a row is selected.
- onRowUnfocus - callback to execute when a row is deselected.
var myTable = new HtmlTable({
properties: {
border: 1,
cellspacing: 3
},
rows: [
['apple', 'red'],
['lemon', 'yellow']
],
selectable: true
});
myTable.inject($('someContainer'));
Enables selection of rows.
myTable.enableSelect();
- (object) This instance of HtmlTable.
Toggles the selected state of a row.
myTable.toggleRow(trElement);
- (object) This instance of HtmlTable.
Selects a row.
myTable.selectRow(trElement);
- (object) This instance of HtmlTable.
Selects a row.
myTable.deselectRow(trElement);
- (object) This instance of HtmlTable.
Returns the selected state of a row element.
myTable.isSelected(trElement);
- (boolean) true if the row is selected.
Returns an array of rows that are selected.
myTable.getSelected();
- (array) an array of TR elements that are selected.
Selects a group of rows.
myTable.selectRange(startRow, endRow);
- startRow - (mixed) the TR element that starts the selection or an integer of its index in the rows in the table body.
- endRow - (mixed) the TR element that ends the selection or an integer of its index in the rows in the table body.
The actual order of the start and end rows doesn't matter. The range is selected even if the end row is before the start row.
- (object) This instance of HtmlTable.
Deselects a group of rows.
myTable.deselectRange(startRow, endRow);
- startRow - (element) the TR element that starts the deselection.
- endRow - (element) the TR element that ends the deselection.
The actual order of the start and end rows doesn't matter. The range is deselected even if the end row is before the start row.
- (object) This instance of HtmlTable.
Selects all rows
myHtmlTable.selectAll();
- (object) This instance of HtmlTable.
Deselects all rows
myHtmlTable.selectNone();
- (object) This instance of HtmlTable.