easyui-edatagrid.js实现回车键结束编辑功能的实例


Posted in Javascript onApril 12, 2017

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实现回车键结束编辑功能的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
Jquery插件 easyUI属性汇总
Jan 19 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
jquery操作select方法汇总
Feb 05 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
JavaScript位移运算符(无符号) >>> 三个大于号 的使用方法详解
Mar 31 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
bootstrap表单示例代码分享
May 18 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
Vue生命周期示例详解
Apr 12 #Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 #Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 #Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 #Javascript
javascript数据结构之串的概念与用法分析
Apr 12 #Javascript
详解RequireJS按需加载样式文件
Apr 12 #Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 #Javascript
You might like
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
javaScript之split与join的区别(详解)
2017/11/08 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
python实现XML解析的方法解析
2019/11/16 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
初中教师德育工作总结2015
2015/05/12 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
vue中div禁止点击事件的实现
2022/04/02 Vue.js
Python基本的内置数据类型及使用方法
2022/04/13 Python