在使用easyUI的可编辑表格时,可以为编辑器添加键盘事件处理,这样就可以直接通过键盘进行操作,大大提升编辑效率。比如说在编辑完一行时,可以按下回车就自动添加新行而不用去点击添加行按钮,在编辑到一半想取消编辑时,可以按键盘的方向键↑从而取消编辑。
为编辑器添加事件,有两种方式。
方式一:通过api获取对应的编辑器jQuery对象,为该对象添加事件
方式二:通过类选择器选中对应的编辑器,再为它添加事件(当前编辑行有一个class是其他行没有的)
需要注意的是,方式一通过api获取编辑器的jQuery对象时,api是通过editor.target来获取的,但在1.5版本的easyUI中,这是获取不到真正的编辑器对象的,通过浏览器的开发者工具查看代码发现,每个编辑器大概都是这种结构
<input type="text" class="datagrid-editable-input textbox-f" style="display: none;">
<span class="textbox textbox-invalid" style="width: 322px; height: 24px;">
<input id="_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="">
<input type="hidden" class="textbox-value" value=""></span>
editor.target 获取到的实际上是<input type="text" class="datagrid-editable-input textbox-f" style="display: none;">
而真正用于输入的对象是span标签里面第一个input,所以应该为这个input添加事件而不是editor.target。
方式一代码:
var editors = $("#keyEventGrid").datagrid("getEditors",index);
for(var i=0; i<editors.length; i++){
var 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");
}
});
完整示例代码
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>可编辑表格编辑器自定义事件</title>
<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../easyui1.5/themes/bootstrap/easyui.css"/>
<link rel="stylesheet" type="text/css" href="../easyui1.5/themes/icon.css"/>
<script src="../easyui1.5/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../easyui1.5/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../easyui1.5/jquery.edatagrid.js" type="text/javascript" charset="utf-8"></script>
<script src="../easyui1.5/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></sctipr>
<style type="text/css">
/**
* 解决在编辑时看不到内容的问题,这是由于使用easyUI的bootstrap主题导致的
*/
.datagrid-row.datagrid-row-editing.datagrid-row-selected{
background: #F3F3F3;
color: #333333;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<table id="keyEventGrid" style="width: 100%;height: 400px;"></table>
<div id="gridToolbar" class="container-fluid">
<div class="row">
<div class="col-sm-12">
<a class="btn btn-sm btn-primary pull-right" onclick="addRow('keyEventGrid')">增加</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function(){
$("#keyEventGrid").edatagrid({
toolbar:"#gridToolbar",
singleSelect:true,
fitColumns:true,
columns:[[
{field:"userName",title:"用户名",width:80,eidtor:{type:"textbox",options:{required:true}}},
{field:"age",title:"年龄",width:40,editor:"numberbox",align:"right"},
{field:"cell",title:"手机",width:60,editor:{type:"textbox",options:{required:true}}},
{field:"qq",title:"QQ",width:60,editor:"textbox"}
]],
onAdd:function(index,row){
//使第一个编辑器获取焦点
$(".datagrid-row-editing .textbox-text")[0].focus();
//使用方式一或方式二注册事件
},
onSave:function(index,row){
//在添加新行时,onSave事件会被触发执行
//可以在这里添加一个保存的方法,在添加新行时,将上一行编辑的内容保存到数据库
//也可以直接在edatagrid添加一个saveUrl属性,这样不用写保存方法,也可以保存,缺点是保存时只能将row数据传到后台而不能添加其他数据
//当然,每编辑一行就保存一行的做法可能不太好,可以不处理这个保存的事件,在工具栏上添加一个保存按钮,当编辑完所有行时,点击保存按钮一次性保存
}
});
});
function addRow(grid){
$("#"+grid).edatagrid("addRow");
}
function cancelRow(grid){
$("#"+grid).edatagrid("cancelRow");
}
</script>
</body>
</html>