Hello. My English is not very good, that’s why minimum words and maximum code.
All code you can download on GitHub here.
In this article I want to suggest my implementation of keyboard navigation on datatable. This will be work only with primefaces version 4 or higher.
Suppose we have a table:
<p:dataTable id="dataTable" widgetVar="table" ...>
...
</p:dataTable>
Lets wrap it with div which has attribute tabindex:<div tabindex="1" id="table_div">
<p:dataTable id="dataTable" widgetVar="table" ...>
...
</p:dataTable>
</div>
Tabindex gives us opportunity to get focus and bind keydown event on the table. Now bind this events on div with jquery:
$("#table_div").keydown(function(event) {
if (event.which === 38) {
event.preventDefault();
up();
}
if (event.which === 40) {
event.preventDefault();
down();
}
});
and add functions for this events:var down = function() {
//If no rows selected, select first row
if(PF('table').selection.length === 0){
PF('table').selectRow(0);
return;
}
//get index of selected row, if no row is selected return 0
var index = PF('table').originRowIndex;
//get amount of rows in the table
var rows = PF('table').tbody[0].childElementCount;
//increase row index
index++;
//if new index equals number of rows, set index to first row
if (index === rows) {
index = 0;
}
//deselect all selected rows
PF('table').unselectAllRows();
//select new row
PF('table').selectRow(index);
//change originRowIndex value
PF('table').originRowIndex = index;
};
var up = function() {
//get amount of rows in the table
var rows = PF('table').tbody[0].childElementCount;
//get index of selected row, if no row is selected return 0
var index = PF('table').originRowIndex;
//if this is first row, set index to last row
if (index === 0) {
index = rows - 1;
} else {
index--;
}
//unselect all rows
PF('table').unselectAllRows();
//select previous row
PF('table').selectRow(index);
//set index to current selected row
PF('table').originRowIndex = index;
}
That’s all. Our table is ready. If you want to know how select element and send it to the server with enter button, download code from github. I don’t describe how to make navigation in the datatable with multiple selection, but I can do it if necessary.
Комментариев нет:
Отправить комментарий