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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
Bootstrap3 图片(响应式图片&图片形状)
Jan 04 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
微信小程序转发事件实现解析
Oct 22 Javascript
JS实现公告上线滚动效果
Jan 10 Javascript
利用JavaScript写一个简单计算器
Nov 27 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
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
python3安装crypto出错及解决方法
2019/07/30 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
机动车登记业务委托书
2014/10/08 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
北京英语导游词
2015/02/12 职场文书
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫
css3 选择器
2022/05/11 HTML / CSS
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技