easyUI的combobox实现级联

本是古典何须时尚 2022-08-12 00:11 205阅读 0赞

**先简单介绍下combobox：**

easyUI重写了select，取而代之的是combobox，有如下几种方式可以创建一个combobox

1、使用select标签，并加上class="easyui-combobox"，这种方式比较适用于静态的选项

2、使用input标签，并加上class="easyui-combobox"，后面跟上data-options，可以用local或是remote方式加载数据

3、使用js方式，和2基本相同，只是把combobox一些属性的设置分离到了js中

**下面是级联的思路：**

combobox实现级联基本上和select类似，比如省份和城市的级联

当省份选完这个事件发生之后，城市的选择框里就会刷新数据，得到当前省份下的所有城市

那么关键点就是——》接收事件——》刷新第二级的选择框

combobox有提供onSelect这个事件点，且传入一个选中的记录rec，比如说我们可以取rec的主键rec.id(比如是浙江，id是29)，那么我们可以拿到这个29去后台查询浙江省下的城市Json数据，这串Json就是需要放到城市combobox中的数据

**那么开始动手吧：**

<tr>
        <td>省份:</td>
        <td><input class="easyui-combobox" name=”province” data-options="
         	method:'get',
         	mode:'remote',
         	url:'test/getProvinceList',
         	onSelect:function(rec){
         		$('[comboname=city]').combobox('clear');
         		$('[comboname=city]').combobox('reload', 'test/getCityListByProvince?id=' + rec.id);
         	},
         	onLoadSuccess:function(){
         		var value = $(this).combobox('getValue');
         		if(value != ''){
        		<span style="white-space:pre">	</span>$('[comboname=city]').combobox('reload', 'test/getCityListByProvince?id=' + $(this).combobox('getValue'));
        			}
         	}
        	">
        </td>
        
        <td>城市:</td>
        <td><input class="easyui-combobox" panelHeight="auto" name="city" data-options="
         		prompt:'请先填入省份名称'
        	">
        </td>
    </tr>

**使用中可能碰到的问题：**

1、为combobox指定name后，经过easyUI自己解析后，生成的combobox（也就是select）没有name这个属性，取而代之的是comboname，因为name要作为input的name。所以要根据name得到combobox要使用comboname

2、$('\[comboname=city\]').combobox('clear'); 这一步也是必要的，不然combobox中之前选中的值将无法清除，比如之前选的是浙江--杭州（id为1），若此时更改省份变为江苏，那么若不加clear，此时城市则变成当前省份id为1的城市，也就是南京（id为1）。要是此id在对应省份无记录，那么就只会显示一个id，那么显然不是我们想看到的。