我在做项目时,经常用到easyUI框架,今天总结一下easyUI中的组合框吧
创建easyui-combobox的方法,在easyUI的官网都有:
1,从带有预定义结构的元素创建组合框(组合框)
& lt;选择id=癱c”类=name=安棵拧北取癳asyui-combobox”;
& lt;选项值=" https://www.yisu.com/zixun/aa "祝辞aitem1
& lt; option> bitem2
& lt; option> bitem3
& lt; option> ditem4
& lt; option> eitem5
& lt;/select>
之前
2,从标记创建组合框(组合框)
& lt;输入id=癱c”类=癳asyui-combobox”name="部门"
数据选项=" valueField:“id”,文本框:“文本”,url: get_data.php”比;
之前
3,使用javascript创建组合框(组合框)
$ (' # cc ') .combobox ({
url:“combobox_data.json”,
valueField:“id”,
文本框:“文本”
}）;
之前
json数据格式的示例:
[{
“id”: 1、
“文本”:“text1”
}, {
“id”: 2
“文本”:“text2”
}, {
“id”: 3,
“文本”:“text3”,
“选择”:真的
}, {
“id”: 4
“文本”:“text4”
}, {
“id”: 5
“文本”:“text5”
})
之前
它的属性和方法就不在赘述了,可以上官网查看。
下面来说一下关于两个组合框发联动
//初始化下拉列表
函数InitCombobox () {
$ (" # combobox_one ") .combobox ({>
$(函数(){
var typeData=https://www.yisu.com/zixun/[{
:“来源”,
价值:“prodName”
}， {
文本:“排放”,
价值:“研究所”
});
var options01=[{
文本:“生活污水”,
价值:“情商”
}， {
文本:“工业用水”,
价值:“不”
});
var options02=[{
文本:“工业用水”,
价值:“不”
}， {
文本:“生活垃圾”,
价值:“通用电气”
});//初始化查询项目的下拉列表
$(" #类型”).combobox ({
valueField:“价值”,//值字段
文本框:“文本”,//显示的字段
数据:typeData,
panelHeight: 170,>
h=$ var(窗口).height () * 0.65;//省级
$(" #省”).combobox ({
valueField: '名称',//值字段
文本框:'名称',//显示的字段
url: '/TidewaySHPServer/区域/findAllProvince ',//url为java后台查询省级列表的方法地址
panelHeight: h,
编辑:没错,//模糊查询
过滤器:函数(q,行){
var选择=$(这).combobox(选项);
返回行[opts.textField] .indexOf (q)==0;//从头匹配,改成祝辞=即可在任意地方匹配
}，
onSelect:函数(rec) {
$(' #城市').combobox (“setValue”、" ");
$(' #县).combobox (“setValue”、" ");
var url='/TidewaySHPServer/区域/findAllCity& # 63; parentId=' + rec.areaId;//url为java后台查询事级列表的方法地址
$(" #城市”).combobox(“重新加载”,url);
}
}）;//市区
$(" #城市”).combobox ({
valueField: '名称',//值字段
文本框:'名称',//显示的字段
panelHeight:“汽车”,
编辑:假的,//不可编辑,只能选择
价值:”,
onSelect:函数(rec) {
$(' #县).combobox (“setValue”、" ");
var url='/TidewaySHPServer/区域/findAllDistrictOrCounty& # 63; parentId=' + rec.areaId;//url为java后台查询区县级列表的方法地址
$(' #县).combobox(“重新加载”,url);
}
}）;//区县
$(' #县).combobox ({
valueField:“areaId”,
文本框:“名字”,
panelHeight:“汽车”,
编辑:假的,
}）;
之前
基本上想写的都写完了,主要是多个组合框的联动效果,写的不完美大家相互学习一下
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
