jQuery Easyui学习之datagrid 动态添加、移除editor
发布于 2017-04-10 09:25:08 | 245 次阅读 | 评论: 0 | 来源: 网友投递
EasyUI jQuery UI插件
jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
使用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位号码!'
}
}
}]别的操作都可以据此拓展.
推荐阅读
最新资讯