Y.DataTable.CheckboxSelect Class
A DataTable class extension that adds capability to provide a "checkbox" (INPUT[type=checkbox]) selection capability via a new column, which includes "select all" checkbox in the TH. The class uses only a few defined attributes to add the capability.
This extension works with sorted data and with paginated DataTable (via Y.DataTable.Paginator), by retaining a set of "primary keys" for the selected records.
Users define the "primary keys" by either setting a property flag of "primaryKey:true" in the DataTable column configuration OR by setting the primaryKeys attribute.
To enable the "checkbox" selection, set the attribute checkboxSelectMode to true, which will add a new column as the first column and sets listeners for checkbox selections.
To retrieve the "checkbox" selected records, the attribute checkboxSelected can be queried to return an array of objects of selected records (See method _getCheckboxSelected) for details.
Usage
var dtable = new Y.DataTable({
columns: ['port','pname', 'ptitle'],
data: ports,
scrollable: 'y',
height: '250px',
// define two primary keys and enable checkbox selection mode ...
primaryKeys: [ 'port', 'pname' ],
checkboxSelectMode: true
}).render("#dtable");
Item Index
Methods
- _bindCheckboxSelect
- _enableCheckboxSelect
- _enableCheckboxSelect
- _getCheckboxSelected
- _getCheckboxSelectedFlag
- _getPKValues
- _getRecordforPKvalue
- _indexOfObjMatch
- _onCheckboxSelect
- _onCheckboxSelectAll
- _setCheckboxSelected
- _setCheckboxSelectMode
- _setPrimaryKeys
- _uiAddCheckboxTH
- _uiCheckboxSetEach
- _uiCheckboxSetEach
- _uiRemoveCheckboxTH
- _unbindCheckboxSelect
- _valPrimaryKeys
- checkboxClearAll
- checkboxSelectAll
- destructor
- initializer
Properties
Attributes
Events
Methods
_bindCheckboxSelect
()
private
Method that sets "click" events (via DataTable .delegate) on the INPUT[checkbox]'s for each row TR and for the "select all" checkbox.
_enableCheckboxSelect
()
private
Enables this class, by clearing the selected records, creating the UI elements and adding checkbox listeners.
_enableCheckboxSelect
()
private
Disables this class, by clearing all selectors and remove the UI element and detaching listeners
_getCheckboxSelected
()
private
Getter method for checkboxSelected attribute, that returns the currently "checkbox" selected
rows, returned as an array of {Object}s containing members {tr,record,pkvalues}.
Returns: {Array} of {Objects} selected for each row as;
selected.tr: TR Node for the checkbox selected rowselected.record: Model instance for the selected data recordselected.pkvaluesPrimary key value settings for the selected record (single value or {Object} if more than one primary key is set)
Returns:
_getCheckboxSelectedFlag
-
rec
Method that returns a boolean flag indicating whether the entered record represents a record that is currently selected (i.e. in this._chkRecords).
This is principally used by the formatter function for the checkbox column.
Parameters:
-
recObject
Returns:
_getPKValues
-
rec
Method that returns the primary key values for the provided record "rec", either as an individual value (for a single primary key) or as an {Object} in key:value pairs where the key is the primary key name and the value is the value from this record.
Parameters:
-
recModelThe record Model that the primary key values are requested for
Returns:
Example:
// For a record with rec = {cust_id:157, cust_name:'foo', odate:'9/12/2009', ord_no:987}
this._getPKValues(rec); // for one primary key "cust_id" RETURNS 157
this._getPKValues(rec); // for primary keys "cust_id", "ord_no" RETURNS {cust_id:157,ord_no:987}
_getRecordforPKvalue
-
pkv
Returns the corresponding record (Model) for the entered primary key setting (pkv), where pkv can be either a single value or an object (for multiple primary keys).
Parameters:
-
pkvNumber | String | Date | ObjectPrimary key setting to search ModelList for
Returns:
_indexOfObjMatch
-
arr -
key_vals
Function that searches an Array of Objects, looking for a matching partial object as defined by key_vals {Object}, and returning the index of the first match.
Parameters:
-
arrObject -
key_valsObject
Returns:
_onCheckboxSelect
-
e
Click handler for the added in the checkbox select INPUT[checkbox]
Parameters:
-
eEventTarget
_onCheckboxSelectAll
-
e
Click handler for the TH "check ALL" INPUT[checkbox]
Parameters:
-
eEventTarget
_setCheckboxSelected
-
rows
Setter method for checkboxSelected attribute, currently only supports on input an Array of record indices that should be initially "checkbox" selected.
TODO: Need to add initial selections as "primary key" values
Parameters:
-
rowsArrayArray of row indices to initially set as "checked"
Returns:
_setCheckboxSelectMode
()
private
Setter method for attribute (checkboxSelectMode)[#attr_checkboxSelectMode] that toggles this extension on/off
_setPrimaryKeys
-
pkn
Setter method for the the (primaryKeys)[#attr_primaryKeys] attribute, where the input values can be either (a) a single {String} column key name or (b) an {Array} of column key names in {String} format.
NOTE: If this attribute is set, it will over-ride any "primaryKey" entries from the "columns".
Parameters:
-
pknString | ArrayColumn key (or column name) entries, either a single {String} name or an array of {Strings}
Returns:
_uiAddCheckboxTH
()
private
Adds a new Column with the TH element
_uiCheckboxSetEach
-
bool
Method that updates the UI on the "select all" INPUT[checkbox] and sets it to the entered setting (true,false).
Parameters:
-
boolBooleanFlag indicating whether the check should be set or not
_uiCheckboxSetEach
-
bool
Method that updates the UI on each record's INPUT[checkbox] and sets them to the entered setting (true,false).
Parameters:
-
boolBooleanFlag indicating whether checks should be set or not
_uiRemoveCheckboxTH
()
private
Removes the "checkbox" select column from the DataTable columns attribute
_unbindCheckboxSelect
()
private
Method to detach all of the listeners created by this class
_valPrimaryKeys
()
Array
private
Default value method for the (primaryKeys)[#attr_primaryKeys] attribute. This method will search the defined DataTable "columns" attribute array and loop over each column, if a column has a property "primaryKey" that column will be added as a primary key.
Returns:
Example:
var cols = [ {key:'cust_id', label:'Cust ID', primaryKey:true},
{key:'ord_date', label:'Order Date'},
{key:'ord_id', label:'Order ID', primaryKey:true}
....
];
// will result in ATTR "primaryKeys" as [ 'cust_id', 'ord_id' ]
checkboxClearAll
()
public
Method that resets all "checkboxes" to unchecked, zeros the selected records and unchecks the "Select All" checkbox.
checkboxSelectAll
()
public
Method that selects all "checkboxes" to checked, adds all records to the selected records and checks the "Select All" checkbox.
destructor
()
protected
Unbinds the checkbox listeners and detaches any others created
initializer
()
protected
Initializer, doesn't really do anything at this point ...
Returns:
Properties
_chkRecords
Array
private
Placeholder for the "checkbox" currently selected records, stored in 'primary key value' format.
Default: []
_subscrChk
Array
private
Holder for the EventHandle for the individual INPUT[checkbox]'s click handler within each TR (set via delegate in _bindCheckboxSelect)
Default: null
_subscrChkAll
Array
private
Holder for the EventHandle for the "select all" INPUT[checkbox] click handler in the TH (set via delegate in _bindCheckboxSelect)
Default: null
colSelect
String
public
Key name of the "checkbox" select column that is added to DataTable's column configurations
Default: 'chkSelect'
tmplTH
String
public
HTML template for creation of the TH column of the "checkbox" select column.
Default: '<input type="checkbox" class="{className}" title="{columnTitleTH}"/>'
Attributes
checkboxSelected
Array
Attribute that is used to retrieve the "checkbox" selected records from the DataTable at any time.
Also can be used to set initially "checked" records by entering an {Array} of record indices. (See method _setCheckboxSelected).
When a get('checkboxSelected') is requested, an {Array} of {Objects} containing members as
{tr,record,pkvalues} is returned for each checked row. (See method _getCheckboxSelected).
Default: []
checkboxSelectMode
Boolean
Attribute that is used to trigger "checkbox" selection mode, and inserting of a checkbox select column to the current DataTable.
Default: false
primaryKeys
String | Array
Attribute to set the "primary keys" for the DataTable that uniquely define the record (Model) attributes to use to search for specific records.
Primary keys can be defined either with this attribute primaryKeys OR by placing an extra object property
in the DataTable column configuration as "primaryKey:true".
This attribute is more useful in use cases where the primary key is not displayed in a column.
Default: See above
Example:
// sets a single primary key to data field with key:'emp_id'
myDT.set('primaryKeys','emp_id');
// sets dual primary keys to two data fields with key:'inventory_id' and key:'lot_id'
myDT.set('primaryKeys',['inventory_id','lot_id']);
// OR
var myDT = new Y.DataTable({
columns: [
{key:'inventory_id', label:'Inventory Code', primaryKey:true},
{key:'item_code', label:'Sales Item'},
{key:'lot_id', label:'Lot Code', primaryKey:true},
...
});
Events
checkboxclearAll
Fires after the "select all" checkbox is clicked and all records are cleared
checkboxSetAll
Fires after the "select all" checkbox is clicked and all records are selected