jquery easyUI中combobox的使用总结
一、如何让jquery-easyui的combobox像select那样不可编辑?
为combobox添加editable属性 设置为false
$('#goods_series').combobox({
url:"xxx/getBrandsGoodsSeries",
valueField:'goods_series',
textField:'goods_series',
editable:false
});
获取值:
'goods_series':$("#goods_series").combobox("getValue"),
表单:
<input class="easyui-combobox" type="text" id="goods_series" name="goods_series"/>
二、让combobox可输入,为combobox添加editable属性 设置为true,输入内容是作为搜索下拉框里面值的快捷方式,可以设置本地和romote两种方式
三、如何让combobox兼容选择和输入,并把输入的内容作为新增内容?
easyui本身输入的只是作为搜索快捷方式,没有提供api接口可以直接获取到输入框里面的内容,也不能直接根据ID或者input里面的值(输入框是combobox组件自动添加的,没有ID)。
通过大量测试实战结果得出的一个解决方法是:获取所有.combo-text然后获取父节点上一个兄弟节点,判断comboname(组件自动添加的)属性值为对应input的name时获取这个input的值
function getGoodSeries(){
var value = "";
//console.log($(".combo-text"));
$.each($(".combo-text"),function(i,o){
//console.log($(o).parent().prev().attr('comboname'));
if($(o).parent().prev().attr('comboname') == 'goods_series'){
//console.log($(o).val());
value = $(o).val();
}
});
return value;
}
//提交表单获取值的时候使用:var goods_series = getGoodSeries();
function goodsbrandSelect(){
$('#goods_series').combobox({
url:"xxx",
valueField:'goods_series',
textField:'goods_series',
//hasDownArrow:false,
editable:true
});
}
级联方式在上一个combobox的data-options里面加上onSelect:goodsbrandSelect,onLoadSuccess:goodsbrandSelect
四、editable:true + hasDownArrow:false 可以作为一组打造自动提示输入框没有下拉框的效果。
五、onChange事件可以在有级联项时,作为清空级联项值的一个扩展点。但是并不能作为载入级联项值的地方,因为此时主combobox还没选中。
载入级联项值的地方应该是在onSelect和onLoadSuccess事件中,function中传入有参数rec,也就是选中的那条记录
六、onBeforeLoad函数会在两种情况下触发:1.combobox初始化的时候 2.remote方式发起请求成功收到服务器传来的值时
其中1初始化时无论载入方式是local还是remote,是url还是data方式,都会触发onBeforeLoad。
当通过url载入数据onBeforeLoad返回false,就无法载入数据,通过data载入数据无论onBeforeLoad返回什么,combobox都已经有data数据了。
可以利用这个函数处理local模式下的级联等。
onBeforeLoad若return true那就会发起请求到服务器请求数据,若成功获得数据,就会触发onLoadSuccess
七、group可以展现两层树形目录形式方便用户选择,设置示例:
groupField:'gf',
groupFormatter:function(group){
return function(group){
//doSomething
};
},
这里的groupField就是需要group的字段,一般这个字段存的都是id或code等。
在groupFormatter中将其匹配成显示内容。