EasyUI combobox动态加载远程数据

combobox从远程加载数据的几种情况

• 后台可以直接对数据进行处理，返回符合格式的json数据
• 两个下拉框联动效果
• 后台无法对数据进行处理，需要前端对数据进行处理
• 实时从后台查询重新加载效果

后台直接对数据进行处理（实现1、2种情况）

正确的json数据格式

    [{
          label: 'java',//需要返回的value的值
          value: 'Java'//文本显示的值
    },{
          label: 'perl',
          value: 'Perl'
    },{
          label: 'ruby',
          value: 'Ruby'
  }]

html代码

<input class="form-control item-txt"  name="category" placeholder="请选择类别" id="category">
<input class="form-control item-txt"  name="type" placeholder="请选择类型" id="type">

JS代码

$("#category").combobox({
    valueField:"value",
    textField:"label",
    mmethod:"get",
    url:"get-category.json",
    onSelect:function(rec){//实现选中一个数据后另一个数据发生联动
        let url = "get-type.php?type="+rec.value;
        $('#type').combobox('reload', url);
    }
})
$("#type").combobox({
    valueField:"value",
    textField:"label",
    mmethod:"get",
    url:"get-type.php",
})

---

后台无法对数据进行处理，只能返回数组格式数据（实现3、4种情况）

html代码

<input class="form-control item-txt"  name="brand" id="brand"  placeholder="请选择品牌">

JS代码

封装初始化函数

let comboboxUI = {
    /**
      * formatBrandJSON 对ajax请求返回的数据进行格式化处理
      * @param brandRes {Array} 通过ajax返回的数组数据，格式：{"品牌1" , "品牌2",...}
      * @returns {{brandJSON: Array}} 格式化后的标准comboboxjson数据，格式：[{valye:"1" , text:"品牌1"}...]
     */
    formatBrandJSON:function(brandRes){
            let brandArray = brandRes,brandJSON = [];
            brandArray.forEach(function (item) {
                let brnadObj = {value:item , text:item};
                brandJSON.push(brnadObj);
            })
            return { brandJSON:brandJSON };
        },
    //再次请求ajax后更新本地数据，格式同formatBrandJSON参数一致
    reloadBrand:function(newRes){
       $("#brand").combobox("loadData",comboboxUI.formatBrandJSON(newRes).brandJSON);
    },
    /**
      * initBrand 初始化combobox插件
      * @param res {Array} 通过ajax返回的数组数据，格式：{"品牌1" , "品牌2",...}
     */
    initBrand:function(res){
        let brandJSON = comboboxUI.formatBrandJSON(res).brandJSON;//对请求到的数据初始化
        let itemValue="";
        $("#brand").combobox({
            valueField: 'value',
            textField: 'text',
            data:brandJSON,
            prompt:"请输入品牌",//提示值
            hasDownArrow:false,//是否需要显示下拉按钮
            onChange:function (newValue , oldValue) {//值改变事件，输入框发生改变后实时从后台查询数据加载
                if(newValue.length!=""){
                    $.ajax({
                        url:"./get-brand",
                        type:"GET",
                        data:""
                    }).then(function(res){
                        comboboxUI.reloadBrand(res);
                    })
                }
            }
        });
    }
}

使用初始化函数

$.ajax({
    url:"./get-brand",
    type:"GET",
    data:""
}).then(function(res){
    comboboxUI.initBrand(res);
})

总结

1、加载方式分为两种：一种直接从后台获取合格的数据加载，一种是将后台数据加载到本地后进行处理
2、动态加载数据分为两种：一种两个输入框之间的联动，一种是根据输入实时加载后台数据
3、核心概念：如果是不可输入的下拉框联动，选择onSelect事件触发。如果是根据输入内容发生实时请求，选择onChange事件触发。

更多API参考

支持搜索、自定义输入的下拉框组件–combobox组件使用文档