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 相关文章推荐
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
AngularJS报错$apply already in progress的解决方法分析
Jan 30 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
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 Ajax乱码
2008/04/09 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
Js动态创建div
2008/09/25 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
详解Python的Django框架中的模版相关知识
2015/07/15 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
详细介绍Python的鸭子类型
2016/09/12 Python
Python读写docx文件的方法
2018/05/08 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
光声世纪笔试题目
2012/08/25 面试题
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
科研先进个人典型材料
2014/01/31 职场文书
劳动之星获奖感言
2014/02/01 职场文书
职业生涯规划书范文
2014/03/10 职场文书
目标管理责任书
2014/04/15 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android