jQuery EasyUI editor扩展,使其支持combo多选下拉列表
2013-12-25 20:59
399 查看
在使用EasyUI treeGrid的editor进行行编辑的时候需要使用到combo多选下拉列表,通过查询API和源码后发现它并不支持combo,于是决定自己扩展,自定义一个combo Editor;
通过查看源代码发现,定义一个editor,需要实现四个方法(init,getValue,setValue,resize)
![](http://img1.51cto.com/attachment/201312/204024365.jpg)
这里一般注意init,getValue和setValue这三个方法,需要注意的是,这里的setValue和getValue方法都是针对于editor的,是给editor设值和获取值的。
定义combo:
$.extend($.fn.datagrid.defaults.editors, {
combo: {
init: function(container, options){
var input = $('<select id="cc"></select>').appendTo(container);
input.combo(options);
var html = "";
html+='<div id="sp">';
html+='<div style="color:#99BBE8;background:#fafafa;padding:5px;">'+options.title+'</div>';
for(var i=0;i<options.data.length;i++){
html+='<input type="checkbox" name="lang" value="'+options.data[i].id+'"><span>'+options.data[i].name+'</span><br/>';
}
html+='</div>';
$(html).appendTo($('#cc').combo('panel'));
$('#sp input').click(function(){
var _value="";
var _text="";
$("[name=lang]:input:checked").each(function(){
_value+=$(this).val()+",";
_text+=$(this).next("span").text()+",";
});
if(_value.length>0){
_value=_value.substring(0,_value.length-1);
}
if(_text.length>0){
_text=_text.substring(0,_text.length-1);
}
$('#cc').combo('setValue',_value).combo('setText', _text);
});
return input;
},
destroy: function(target){
$(target).combo('destroy');
},
getValue: function(target){
return $(target).combo('getValue');
},
setValue: function(target, value){
$(target).combo('setValue', value);
},
resize: function(target, width){
$(target).combo('resize',width);
}
}
});
使用:
![](http://img1.51cto.com/attachment/201312/205735583.jpg)
页面展示效果:
![](http://img1.51cto.com/attachment/201312/205812579.jpg)
通过查看源代码发现,定义一个editor,需要实现四个方法(init,getValue,setValue,resize)
![](http://img1.51cto.com/attachment/201312/204024365.jpg)
这里一般注意init,getValue和setValue这三个方法,需要注意的是,这里的setValue和getValue方法都是针对于editor的,是给editor设值和获取值的。
定义combo:
$.extend($.fn.datagrid.defaults.editors, {
combo: {
init: function(container, options){
var input = $('<select id="cc"></select>').appendTo(container);
input.combo(options);
var html = "";
html+='<div id="sp">';
html+='<div style="color:#99BBE8;background:#fafafa;padding:5px;">'+options.title+'</div>';
for(var i=0;i<options.data.length;i++){
html+='<input type="checkbox" name="lang" value="'+options.data[i].id+'"><span>'+options.data[i].name+'</span><br/>';
}
html+='</div>';
$(html).appendTo($('#cc').combo('panel'));
$('#sp input').click(function(){
var _value="";
var _text="";
$("[name=lang]:input:checked").each(function(){
_value+=$(this).val()+",";
_text+=$(this).next("span").text()+",";
});
if(_value.length>0){
_value=_value.substring(0,_value.length-1);
}
if(_text.length>0){
_text=_text.substring(0,_text.length-1);
}
$('#cc').combo('setValue',_value).combo('setText', _text);
});
return input;
},
destroy: function(target){
$(target).combo('destroy');
},
getValue: function(target){
return $(target).combo('getValue');
},
setValue: function(target, value){
$(target).combo('setValue', value);
},
resize: function(target, width){
$(target).combo('resize',width);
}
}
});
使用:
![](http://img1.51cto.com/attachment/201312/205735583.jpg)
页面展示效果:
![](http://img1.51cto.com/attachment/201312/205812579.jpg)
相关文章推荐
- JS实现支持多选的遍历下拉列表代码
- 扩展Ext的Combobox实现多选下拉列表
- JS实现支持多选的遍历下拉列表代码
- Extjs 多选下拉框 Ext.ux.form.LovCombo默认选择及其它BUG修复版支持多选/全选/全不选ext3.x
- Extjs 多选下拉框 Ext.ux.form.LovCombo默认选择及其它BUG修复版支持多选/全选/全不选ext3.x
- 扩展Ext的Combobox实现多选下拉列表
- jquery easyui中获取下拉列表的值
- 下拉列表多选的时候如何获取值
- Android表单组件,单选,多选,下拉列表,日期选择,时间选择
- jQuery仿google搜索下拉列表 支持键盘上下键 支持鼠标移动
- jquery easyui 多选下拉框的实现
- delphi "设置数据表属性是,再字段编辑器(Fields Editor) 的Table Properties 下拉列表中",字段编辑器在哪里呀???
- 无序列表(Ul)实现下拉多选[Jquery方式]
- ext-2.0扩展多选下拉框(代码及演示)
- 下拉列表,单选与多选
- 支持下拉多选的自动完成控件
- 实现下拉列表支持DataGrid的AutoCompleteBox
- jquery easyui中获取下拉列表的值
- 狗血的IE6,获取多选下拉列表值时,竟然总是无法获取正确的值
- ruby导出含格式和下拉列表(支持超长下拉)的excel文件