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与jquery中跳出循环的区别总结
Nov 04 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
JS计算网页停留时间代码
Apr 28 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
JS监听Esc 键触发事键
Apr 14 Javascript
微信小程序实现聊天室功能
Jun 14 Javascript
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 ftp文件上传函数(基础版)
2010/06/03 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
vue this.reload 方法 配置
2018/09/12 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
python将字符串转换成数组的方法
2015/04/29 Python
Python制作数据导入导出工具
2015/07/31 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
scrapy-splash简单使用详解
2021/02/21 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
森林防火宣传标语
2014/06/27 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
论文答谢词
2015/01/20 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android
OpenFeign实现远程调用
2022/08/14 Java/Android