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

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;
                    }

                })
            },