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 相关文章推荐
关于JavaScript中string 的replace
Apr 12 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
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 has encountered an Access Violation
2007/01/15 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
客户端js性能优化小技巧整理
2013/11/05 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
python查找指定具有相同内容文件的方法
2015/06/28 Python
Python批量更改文件名的实现方法
2017/10/29 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
先进工作者获奖感言
2014/02/08 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
通报表扬范文
2015/01/17 职场文书
2015年党小组工作总结
2015/05/26 职场文书
Vue h函数的使用详解
2022/02/18 Vue.js