文章目录
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事件触发。