/ Published in: JavaScript
**(Titanium) JavaScript**
Currently Ti.UI.TableViews don't have native multiple selection behaviour
This function will create and return TableView instance which tracks rows that are *selected* using a supplied array to store the selected indexes.
When a row is clicked it toggles its *selected* state and adds/removes from the array.
**Custom events added to the table**
* onrowselect(e)
* onrowunselect(e)
**e** will be the same event object the originating click event received.
## Example ##
var dataRows []; // collection of TableViewRows
var params = {data:dataRows}; // any normal TableView params
var indexes = [];
var tableview = NAMESPACE.tableViewMultiSelectRows(params,indexes);
tableview.addEventListener('onrowselect',function(e){
Ti.API.log('select');
e.row.backgroundColor = '#f00';
});
tableview.addEventListener('onrowunselect',function(e){
Ti.API.log('unselect');
e.row.backgroundColor = '#fff';
});
tableview.addEventListener('click',function(e){
Ti.API.log(indexes);
});
**NB: this is not suitable for tables where rows are added/removed dynamically - without modification**
Tried setting the array on the table itself but that does not work and always returns an empty array. Also storing the row itself in the array rather than index does not work as it never finds indexOf(e.row) so e.row must be a unique ref to the row each time???
Currently Ti.UI.TableViews don't have native multiple selection behaviour
This function will create and return TableView instance which tracks rows that are *selected* using a supplied array to store the selected indexes.
When a row is clicked it toggles its *selected* state and adds/removes from the array.
**Custom events added to the table**
* onrowselect(e)
* onrowunselect(e)
**e** will be the same event object the originating click event received.
## Example ##
var dataRows []; // collection of TableViewRows
var params = {data:dataRows}; // any normal TableView params
var indexes = [];
var tableview = NAMESPACE.tableViewMultiSelectRows(params,indexes);
tableview.addEventListener('onrowselect',function(e){
Ti.API.log('select');
e.row.backgroundColor = '#f00';
});
tableview.addEventListener('onrowunselect',function(e){
Ti.API.log('unselect');
e.row.backgroundColor = '#fff';
});
tableview.addEventListener('click',function(e){
Ti.API.log(indexes);
});
**NB: this is not suitable for tables where rows are added/removed dynamically - without modification**
Tried setting the array on the table itself but that does not work and always returns an empty array. Also storing the row itself in the array rather than index does not work as it never finds indexOf(e.row) so e.row must be a unique ref to the row each time???
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
NAMESPACE.tableViewMultiSelectRows = function(params,arr) { var table = Ti.UI.createTableView(params); table.addEventListener('click',function(e){ e.rowData.selected = !e.rowData.selected; if(e.rowData.selected) { var pushed = arr.push(e.index); table.fireEvent('onrowselect',e); }else{ var index = arr.indexOf(e.index); if(index>-1) { arr.splice(index,1); table.fireEvent('onrowunselect',e); } } }); return table; };