EasyUI edatagrid 实现回车键结束编辑功能

作者:资源驿站时间:2026-10-22 03:00:12浏览:363

针对EasyUI edatagrid缺乏回车结束编辑功能的问题,通过重写onDblClickCell事件,在单元格内绑定keydown监听器。当检测到回车键(keyCode 13)时,调用endEdit方法结束当前行编辑,提升操作便捷性。

EasyUI edatagrid 回车键结束编辑功能实现

EasyUI的可编辑表格默认并不支持回车事件。这导致在使用edatagrid结束编辑状态时操作较为繁琐,除非用户点击其他行或将焦点移出表格,否则无法自动取消当前编辑行的状态。

为了简化结束编辑的操作流程,可以为每个单元格添加回车事件处理。当用户按下回车键时,自动结束当前行的编辑状态。具体实现方式是重写edatagrid的onDblClickCell事件,代码如下所示:


onDblClickCell : function(index, field, value) {
 if (opts.editing) {
  $(this).edatagrid('editRow', index);
  focusEditor(field);
  //以下是我添加的代码
  var currentEdatagrid = $(this);
  $('.datagrid-editable .textbox,.datagrid-editable .datagrid-editable-input,.datagrid-editable .textbox-text').bind('keydown', function(e){
       var code = e.keyCode || e.which;
       if(code == 13){
       $(currentEdatagrid).datagrid('acceptChanges');
       $(currentEdatagrid).datagrid('endEdit', index);
       }
    });
  //添加代码结束
 }
 if (opts.onDblClickCell) {
  opts.onDblClickCell.call(target, index, field,value);
 }
},

此外,也可以单独定义一个onEnterCell事件来进行处理,这种方式具有更高的灵活性。通过这种方式,可以直接调用onEnterCell:function(index){}来执行相关逻辑。

以上介绍了EasyUI edatagrid.js实现回车键结束编辑功能的完整方法,希望能为读者提供参考,并欢迎大家继续支持本站。

作者最新文章