easyui的combobox控件进一步优化

时间:2022-04-12 09:43:40

最近的项目中使用到easyui的combobox控件,感觉它还是有一些不太满足我的需求的。


比如这个,类型这个下拉列表字段

easyui的combobox控件进一步优化


我输入了一个类型里不存在的值后,然后我继续填其它的信息,提交时,表单就直接把这个“不存在的值”当成类型提交了,结果就出错了,因为我的后台是接收类型的id值的,所以我需要如果用户输入了一个不存在的值后,鼠标点击其它地方后,自动把值清除了。

easyui的combobox控件进一步优化


我给combobox添加一个blur默认事件,当失去焦点时,判断它的值是否为空,或者它的值跟文本如果是一样的话,就清除控件的值

if($.fn.combobox){
	$.fn.combobox.defaults.inputEvents.blur=function(){
		var combo=$(this).closest(".combo").prev();//因为它是隐藏本来的元素,创建easyui的元素,所以得先找到我定义的那个combobox
		var value = combo.combobox("getValue");//取得combobox的值
		var text = combo.combobox("getText");//取得combobox的文本
		if (!value ||text == value) {
			combo.combobox("clear");
		}
	};
}

---------------------------------------------------------------------------------

还有一个问题,combobox的默认过滤方式都是按这样的,比如笔记本电脑,你输入“电脑”,查询不到,你必须按它的顺序,输入“笔”才查询到。

我改了combobox默认的filter事件。

if($.fn.combobox){
	$.fn.combobox.defaults.filter =  function(q, row){
		var opts = $(this).combobox('options');
		return row[opts.textField].indexOf(q) >-1;
	};
}
----------------------------------------------------------------------------------------------------------------------------------------

还有一个问题,就是比如我设置mode为remote的话,就是填写关键字后向服务器查询数据,但当你打空格时,这个控件也会向服务器发送,所以我要过滤掉关键字两边的空格

if($.fn.combobox){
	$.fn.combobox.defaults.onBeforeLoad=function(param){
		if($.trim(param.q).length<=0){
			return false;
		}
	};
}