jQuery Easyui学习之datagrid 动态添加、移除editor


Posted in Javascript onJanuary 27, 2016

 使用easyui行编辑的时候完成编辑的功能比较简单,但是如果要根据一个框的值动态改变别的值或者编辑的时候禁用某个框的时候就比较麻烦了。

比如像下面这样:添加行的时候每个值都是手动输入,修改的时候第一个值不能修改。我们来看下怎么实现这样的效果。

jQuery Easyui学习之datagrid 动态添加、移除editor

easyui本身是不提供这么细节的功能的,需要我们自己拓展下:

在编辑的时候移除第一列的editor属性,添加的时候,添加第一列的属性。

//扩展datagrid:动态添加删除editor
$.extend($.fn.datagrid.methods, { 
addEditor : function(jq, param) { 
if (param instanceof Array) { 
$.each(param, function(index, item) { 
var e = $(jq).datagrid('getColumnOption', item.field); 
e.editor = item.editor; }); 
} else { 
var e = $(jq).datagrid('getColumnOption', param.field); 
e.editor = param.editor; 
} 
}, 
removeEditor : function(jq, param) { 
if (param instanceof Array) { 
$.each(param, function(index, item) { 
var e = $(jq).datagrid('getColumnOption', item); 
e.editor = {}; 
}); 
} else { 
var e = $(jq).datagrid('getColumnOption', param);
e.editor = {}; 
} 
}
});

调用:

移除:

$("#dg").datagrid('removeEditor','cardNo');//这里的cardNo是需要移除editor的列的field值

添加:

$("#dg").datagrid('addEditor',[ //添加cardNo列editor
{field:'cardNo',editor:{
type:'textbox',
options:{
required:true,
validType:'length[3,3]', 
invalidMessage:'请输入3位号码!'
}
}
}]

别的操作都可以据此拓展.

Javascript 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
利用 JavaScript 构建命令行应用
Nov 17 Javascript
js实现简单排列组合的方法
Jan 27 #Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 #Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 #Javascript
jQuery ajax分页插件实例代码
Jan 27 #Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 #Javascript
jquery ajax分页插件的简单实现
Jan 27 #Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 #Javascript
You might like
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
用PHP进行MySQL删除记录操作代码
2008/06/07 PHP
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
原生JS轮播图插件
2017/02/09 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
小区停车场管理制度
2014/01/27 职场文书
生日庆典策划方案
2014/06/02 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
《三国志》赏析
2019/08/27 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
基于JavaScript实现省市联动效果
2021/06/22 Javascript
Redis读写分离搭建的完整步骤
2021/09/14 Redis
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers