easyUI可编辑表格编辑器添加事件

在使用easyUI的可编辑表格时，可以为编辑器添加键盘事件处理，这样就可以直接通过键盘进行操作，大大提升编辑效率。比如说在编辑完一行时，可以按下回车就自动添加新行而不用去点击添加行按钮，在编辑到一半想取消编辑时，可以按键盘的方向键↑从而取消编辑。
为编辑器添加事件，有两种方式。
方式一：通过api获取对应的编辑器jQuery对象，为该对象添加事件
方式二：通过类选择器选中对应的编辑器，再为它添加事件（当前编辑行有一个class是其他行没有的）

需要注意的是，方式一通过api获取编辑器的jQuery对象时，api是通过editor.target来获取的，但在1.5版本的easyUI中，这是获取不到真正的编辑器对象的，通过浏览器的开发者工具查看代码发现，每个编辑器大概都是这种结构

type="text" class="datagrid-editable-input textbox-f" style="display: none;">
class="textbox textbox-invalid" style="width: 322px; height: 24px;">
    "_easyui_textbox_input2" type="text"  class="textbox-text validatebox-text validatebox-invalid textbox-prompt" autocomplete="off" tabindex="" placeholder="" style="text-align: start; margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 22px; line-height: 22px; width: 320px;" title="">
    type="hidden" class="textbox-value" value="">

editor.target 获取到的实际上是而真正用于输入的对象是span标签里面第一个input，所以应该为这个input添加事件而不是editor.target。

方式一代码：

var editors = $("#keyEventGrid").datagrid("getEditors",index);
for(var i=0; ivar editor = editors[i];
        $(editor.target.siblings("span").children("input"))
                .on("keydown",function(e){
                        var code = e.keyCode || e.which;
                        if(code == 13){
                            addRow("keyEventGrid");//添加新行
                        }else if(code == 38){
                            cancelRow("keyEventGrid");//取消编辑行
                        }
            })
}

方式二：

$(".datagrid-row-editing .textbox-text").on("keydown",function(e){
        var code = e.keyCode || e.which;
        if(code == 13){
                addRow("keyEventGrid");
        }else if(code == 38){
                cancelRow("keyEventGrid");
        }
});

完整示例代码

    
        "UTF-8">
        
        "stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css"/>
        "stylesheet" type="text/css" href="../easyui1.5/themes/bootstrap/easyui.css"/>
        "stylesheet" type="text/css" href="../easyui1.5/themes/icon.css"/>