jQuery Easyui学习之datagrid 动态添加、移除editor
更新时间:2016年01月27日 10:24:12 投稿:mrr
使用easyui行编辑的时候完成编辑的功能比较简单,但是如果要根据一个框的值动态改变别的值或者编辑的时候禁用某个框的时候就比较麻烦了,下面给大家介绍easyui datagrid 动态添加、移除editor,感兴趣的朋友一起学习吧
使用easyui行编辑的时候完成编辑的功能比较简单,但是如果要根据一个框的值动态改变别的值或者编辑的时候禁用某个框的时候就比较麻烦了。
比如像下面这样:添加行的时候每个值都是手动输入,修改的时候第一个值不能修改。我们来看下怎么实现这样的效果。
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位号码!' } } }]
别的操作都可以据此拓展.
相关文章
jQuery Ajax Post 回调函数不执行问题的解决方法
本文是小编给大家带来的jQuery Ajax Post 回调函数不执行的原因及解决方法,在本文最下面还给大家附加jquery Ajax 不执行回调函数success的原因,这两个问题都非常多见,感兴趣的朋友一起看下吧2016-08-08从零开始学习jQuery (七) jQuery动画实现 让页面动起来
开发人员一直痛疼做动画. 但是有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手! 本文将介绍jQuery的动画相关函数.原来做动画如此简单!2011-02-02jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件HighCharts绘制2D圆环图效果,结合实例形式分析了jQuery使用HighCharts插件绘制圆环图的实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
最新评论