grid.on('keydown', function(e) {
var grid = Ext.getCmp('projectCaseListId');
var k = e.getKey();
var view = grid.getView();
if(grid.getSelectionModel().getCount()>=1){//checkselect时不响应该事件
view.removeRowClass(lastrownum1,'x-grid3-row-selected1');
return ;
}
if(k==38){ //up
if(lastrownum1==0)//在最上面一行时位置保持不动
{
view.focusRow(0);
lastrownum1=0;
}else{
view.removeRowClass(lastrownum1,'x-grid3-row-selected1');//移除上一次的高亮显示样式
lastrownum1=lastrownum1-1;
view.focusRow(lastrownum1);
view.addRowClass(lastrownum1,'x-grid3-row-selected1');//添加目标行的高亮样式
}
}
if(k==40){//down
if(lastrownum1==(grid.getStore().getCount()-1))
{
lastrownum1=grid.getStore().getCount()-1;
view.focusRow(lastrownum1);
}else{
view.removeRowClass(lastrownum1,'x-grid3-row-selected1');
lastrownum1=lastrownum1+1;
view.focusRow(lastrownum1);
view.addRowClass(lastrownum1,'x-grid3-row-selected1');
}
}
}
x-grid3-row-selected1 //jsp中新加的select样式,select样式去掉check部分即可
本文介绍了一种使用ExtJS框架实现Grid表格上下键导航的方法。通过监听键盘事件,当用户按下上下箭头键时,表格能够高亮显示当前选中的行,并确保焦点始终停留在表格内。此外,还详细说明了如何避免已选择行响应键盘事件,从而提供更加流畅的用户体验。
1万+

被折叠的 条评论
为什么被折叠?



