EasyUI，comobox兼容可编辑和和下拉框

小咪咪 2022-08-05 11:27 213阅读 0赞

# 问题初遇 #

最近在开发一个功能的时候遇到一个问题。

EasyUI中的comobox，组合框可以在下拉框中选择，也可以手动输入后，因为有自带的模糊查询，下拉框中有对应内容的提示。

问题来了：

1、如果你不去选择安卓，这里应该提示你这名称是有错的。

2、如果你输入了360，这里没有360的选项，但是数据库里面有360这个对应的一个平台的时候，是正确的，

没有的话应该返回错误。

![Center][]

# EasyUI comobox实现原理 #

这个实现一般是：

## 前端页面： ##

//获取应用名combobox的选项
    $('#platform').combobox({
        url:'paltform.action',
        valueField:'id',
        textField:'text'
    });

valueFiled为绑定到comobox的value上的基础数据的名称。textFiled为绑定到comobox的text上的基础数据的名称。

就像上面的安卓，安卓其实是text的值，其实value值是一个数字。

一般数据库设计的时候遵循三范式，所以关联表的时候，一张表里面有另一张表的id，根据id再去取对应的名称。

## 后端 ##

platform.action的实现：

其实EasyUI是的数据格式要求是json，本篇文章的例子是id和text字段，json串里面需要这两个属性。

所以我们可以新建一个类comobox，包括这两个字段。

然后去数据库请求平台数据，将id和text传进comobox类中，再封装成list对象。

然后转换为json串，返回前端。

[{"id":"1","text":"安卓"}]

# 问题的解决 #

## 最简单的解决办法 ##

直接将组合框设置成不可编辑，这样就一定手动选择下拉框。

editable="false"

缺点，如果组合框有100个选项又不可编辑，即不能使用模糊查询，这样操作起来十分复杂。

## 自己想到的方法    ##

因为选中下拉框之后，最后后台获取的不是text字段，而是text对应的value，即平台的id。

所以例子中的 安 没选中的时候，传入的值是安，而不是安卓对应的id，此时，只要判断

它为数字非法就可以了。

if(!(/^[+]?[1-9]+\d*$/i.test($('#platform').combobox('getValue')))){
    	$.messager.alert("提示","请在下拉框中选择平台");
    	return;
    }

但是，如果平台就是数字命名怎么办呢，如果不做判断，那么他会插进这个数字，

但是事实上，这个数字并不是于平台数据表里面的id。所以，要再请求一次，查询id是否存在于数据库。

特别的是，输入这个东西没有id对应值的时候，value的值和text的值是相同的。

所以输入安这种情况，是没有id对应值的。$('\#platform').combobox('getValue')此时不是数字，所以这种情况是这样排除的。

if(!(/^[+]?[1-9]+\d*$/i.test($('#platform').combobox('getValue')))){
    	$.messager.alert("提示","请在下拉框中选择平台");
    	return;
    }else if(/^[+]?[1-9]+\d*$/i.test($('#platform').combobox('getValue'))){
    	$.ajax({
    		type: "GET",
    		dataType: "text",
    		url:"platformIDExist.action?platformid="+$('#platform').combobox('getValue'),
    		success: function(data){
    		data = $.trim(data);
    		if(data == "false"){
    			$.messager.alert("提示","该平台不存在!");
    			return  ;
    		}else{
    			validatesuccess();
    		}
    			},
    		error: function(){
    			$.messager.alert("提示","网络连接失败!");
    		}
    	});
    }

当输入360的时候，$('\#platform').combobox('getValue')此时是数字，但是，数据库可能存在这个id。虽然这个有点多余，但是平台名称并不是全部都是文字。

将此id通过ajax再次请求，进行判断数据库是否存在然后返回值即可。

这样之后，可应对各种情况。

当输入平台名但是没输入完全或者没选中的时候，提示选择下拉框。

当输入平台名是数字但是又提交的时候，根据数字id在数据库中是否存在进行插入。

问题解决。

[Center]: /images/20220731/d653698fe4b64e3186bcaec96ebc9abf.png