EasyUI實現下拉列表補全以及數據關聯功能

最近在開發項目的時候，使用EasyUI框架，實現下拉列表自動選取或者自動補全的功能，同時也要對數據進行關聯，也就是聯動，類似於省市縣的功能，選擇省份，出現對應的市。

一、下拉別表補全功能

<input class="easyui-combobox" name="earId" style="width:90%"
                   data-options="
                    label:'個體編號：',
                    labelWidth:150,
                   required:true,
                   labelAlign:'right',
                   valueField: 'ear_id',
                   textField: 'ear_id',
                   validType:{length:[1,16]},
                   url:'m/sheepInfo/comList'
                "
            />

功能後臺的代碼爲：

//mapper層   查詢表中所有的ear_id信息 
@Select("select ear_id from sheep_base_data")
public List<SheepBaseData> getEarIDinfo();

//service層
public List<SheepBaseData> getEarIDinfo(){
        return  teachermapper.getEarIDinfo();
    }

//controller層
@RequestMapping(value = "m/sheepInfo/comList", method = {RequestMethod.GET, RequestMethod.POST})

public List<SheepBaseData> getEarIDinfo(){
    List<SheepBaseData> getEarIDinfo = teacherservice.getEarIDinfo();
    return getEarIDinfo ;
}

功能測試截圖:

數據表中已有的ear_id如下所示：

下拉表選擇界面：

自動補全界面：

總結：combobox的補全功能，只需要在data-options屬性中添加url

二、數據關聯（二級聯動）

以前的一篇博客寫過關於二級聯動的，不過過程比較麻煩，通過js實現二級聯動，博客鏈接如下：https://blog.csdn.net/wilson_m/article/details/79138077

今天所要實現的二級聯動將更加簡潔，不使用js便可以實現。

功能描述：通過選取指定的羊舍，選取對應羊舍下的羊圈。

<input class="easyui-combobox" name="sheepcotId" style="width:90%"
                   data-options="
                    label:'羊舍：',
                    labelWidth:100,
                   required:true,
                   labelAlign:'right',
                   valueField: 'id',
                   textField: 'name',
                   editable:false,
                   url:baseurl + 'm/sheepcot/comList',
                   onSelect:function(rec){
                        $('#sheepfold').combobox('reload', baseurl + 'm/sheepfold/comList?sheepcotId=' + rec.id);
                    }
                "
            />
<input class="easyui-combobox" name="sheepfoldId" style="width:90%" id="sheepfold"
                   data-options="
                    label:'羊圈：',
                    labelWidth:100,
                   required:true,
                   labelAlign:'right',
                   valueField: 'id',
                   textField: 'name',
                   editable:false,
                   url:baseurl + 'm/sheepfold/comList'
                "
            />