EasyUI_Datagrid编辑-键盘上下键选择行，锁定编辑单元格所在的列

最新推荐文章于 2022-09-15 16:25:58 发布

haichao118

最新推荐文章于 2022-09-15 16:25:58 发布

阅读量643

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/haichao118/article/details/112801638

版权

笔记专栏收录该内容

27 篇文章 2 订阅

订阅专栏

Datagrid行编辑，通常我们是单击某一行进行编辑.

但是当我们在录入单据的时候，每次录入一行数据就要用鼠标去点击，就不方便了。

思路：

编辑的时候，使用jQuery为行里面的元素绑定一个keydown事件就好了。

一般都是textbox，或combobox，他们生成的html元素都是 <input type='text' /> 只是渲染的不同具体可以查看DOM元素

代码：

在onBeginEdit时候，给元素绑定事件

onBeginEdit: function (rowIndex, rowData) {
$("input[type='text']").bind('keydown', function (e) {
switch (e.keyCode) {
case 38://向下键
var selRow = $("#RequisitionDetail").datagrid("getSelected");
var selRowIndex = $("#RequisitionDetail").datagrid("getRowIndex", selRow);
$("#RequisitionDetail").datagrid("endEdit", selRowIndex);
$("#RequisitionDetail").datagrid("selectRow", selRowIndex - 1);
$("#RequisitionDetail").datagrid("beginEdit", selRowIndex - 1);
var ed = $('#RequisitionDetail').datagrid('getEditor', { index: selRowIndex - 1, field: 'fQuantity' });
$(ed.target).siblings("span").children("input[type='text']").focus();
break;
case 40://向上键
var selRow = $("#RequisitionDetail").datagrid("getSelected");
var selRowIndex = $("#RequisitionDetail").datagrid("getRowIndex", selRow);
$("#RequisitionDetail").datagrid("endEdit", selRowIndex);
$("#RequisitionDetail").datagrid("selectRow", selRowIndex +1);
$("#RequisitionDetail").datagrid("beginEdit", selRowIndex + 1);
var ed = $('#RequisitionDetail').datagrid('getEditor', { index: selRowIndex + 1, field: 'fQuantity' });
$(ed.target).siblings("span").children("input[type='text']").focus();
break;
}

})
},