Restrict selection to a particular column
Restrict selection to a particular column
I've got an invoice table with 4 columns (item, quantity, item price and total price) and I'm making it fully keyboard accessible, so the user can navigate through the rows (which are added dinamically) and change the amount of items (with jeditable), thus automatically updating total price.
The behavior I need to get is to let the user go up and down the table with the arrow keys, and focus (only) each qty field, be able to modify it, and return to the "add new item" input.
How can I restrict this selectable capability only to the quantity column?
Here in the tiscussions I've found a way to hide columns so they become unselectable, but it's not what I need.
The behavior I need to get is to let the user go up and down the table with the arrow keys, and focus (only) each qty field, be able to modify it, and return to the "add new item" input.
How can I restrict this selectable capability only to the quantity column?
Here in the tiscussions I've found a way to hide columns so they become unselectable, but it's not what I need.
This discussion has been closed.
Replies
Has it been implemented yet?
Allan
[quote]
[code]
function _fnKey ( e , reFocus )
{
/* If user or system has blocked KeyTable from doing anything, just ignore this event */
if ( _that.block || !_bKeyCapture )
{
return true;
}
/* If a modifier key is pressed (exapct shift), ignore the event */
if ( e.metaKey || e.altKey || e.ctrlKey )
{
return true;
}
var x, y;
var iTableWidth, iTableHeight;
/* Get table height and width - done here so as to be dynamic (if table is updated) */
if ( _oDatatable )
{
/*
* Locate the current node in the DataTable overriding the old positions - the reason for
* is is that there might have been some DataTables interaction between the last focus and
* now
*/
var oSettings = _oDatatable.fnSettings();
iTableWidth = oSettings.aoColumns.length;
iTableHeight = oSettings.aiDisplay.length;
/* cek reFocus if there is data in there then its from the recursive function call
*
*/
if(_fnFindDtCell(reFocus) !== null ){ _nOldFocus = reFocus; }
var aDtPos = _fnFindDtCell( _nOldFocus );
if ( aDtPos === null )
{
/* If the table has been updated such that the focused cell can't be seen - do nothing */
return;
}
_iOldX = aDtPos[ 0 ];
_iOldY = aDtPos[ 1 ];
}
else
{
iTableWidth = _nBody.getElementsByTagName('tr')[0].getElementsByTagName('td').length;
iTableHeight = _nBody.getElementsByTagName('tr').length;
}
/* Capture shift+tab to match the left arrow key */
var iKey = (e.keyCode == 9 && e.shiftKey) ? -1 : e.keyCode;
switch( iKey )
{
case 13: /* return */
_fnEventFire( "action", _iOldX, _iOldY );
return true;
case 27: /* esc */
if ( !_fnEventFire( "esc", _iOldX, _iOldY ) )
{
/* Only lose focus if there isn't an escape handler on the cell */
_fnBlur();
}
break;
case -1:
case 37: /* left arrow */
if ( _iOldX > 0 ) {
x = _iOldX - 1;
y = _iOldY;
} else if ( _iOldY > 0 ) {
x = iTableWidth-1;
y = _iOldY - 1;
} else {
/* at start of table */
if ( iKey == -1 && _bForm )
{
/* If we are in a form, return focus to the 'input' element such that tabbing will
* follow correctly in the browser
*/
_bInputFocused = true;
_nInput.focus();
/* This timeout is a little nasty - but IE appears to have some asyhnc behaviour for
* focus
*/
setTimeout( function(){ _bInputFocused = false; }, 0 );
_bKeyCapture = false;
_fnBlur();
return true;
}
else
{
return false;
}
}
break;
case 38: /* up arrow */
if ( _iOldY > 0 ) {
x = _iOldX;
y = _iOldY - 1;
} else {
return false;
}
break;
case 9: /* tab */
case 39: /* right arrow */
if ( _iOldX < iTableWidth-1 ) {
x = _iOldX + 1;
y = _iOldY;
} else if ( _iOldY < iTableHeight-1 ) {
x = 0;
y = _iOldY + 1;
} else {
/* at end of table */
if ( iKey == 9 && _bForm )
{
/* If we are in a form, return focus to the 'input' element such that tabbing will
* follow correctly in the browser
*/
_bInputFocused = true;
_nInput.focus();
/* This timeout is a little nasty - but IE appears to have some asyhnc behaviour for
* focus
*/
setTimeout( function(){ _bInputFocused = false; }, 0 );
_bKeyCapture = false;
_fnBlur();
return true;
}
else
{
return false;
}
}
break;
case 40: /* down arrow */
if ( _iOldY < iTableHeight-1 ) {
x = _iOldX;
y = _iOldY + 1;
} else {
return false;
}
break;
default: /* Nothing we are interested in */
return true;
}
/* if the target destination have a unselected class repeat the event */
if(jQuery(_fnCellFromCoords(x, y)).hasClass('unselected')){
/* Remove old focus (with blur event if needed) */
if ( _nOldFocus !== null )
{
_fnRemoveFocus( _nOldFocus );
}
return _fnKey ( e , _fnCellFromCoords(x, y));}
_fnSetFocus( _fnCellFromCoords(x, y) );
return false;
}
[/code]
[/quote]
Basicly i add checking if the destination node has a unselected class. if the destination node has it then repeat the event :D
Hope this help :D