我在做项目时，经常用到easyUI框架，今天总结一下easyUI中的comboBox吧
创建easyui-comboBox的方法，在easyUI的官网都有：
1、从带有预定义结构的 元素创建组合框（comboBox）
rush:js;">
2、从标记创建组合框（comboBox）
rush:xhtml;">
Box" name="dept"
data-options="valueField:'id',textField:'text',url:'get_data.
PHP'">
3、使用 javascript 创建组合框（comboBox）
rush:js;">
$('#cc').combo
Box({
url:'combo
Box_data.json',valueField:'id',textField:'text'
});
json 数据格式的示例：
rush:css;">
[{
"id":1,"text":"text1"
},{
"id":2,"text":"text2"
},{
"id":3,"text":"text3","selected":true
},{
"id":4,"text":"text4"
},{
"id":5,"text":"text5"
}]
它的属性和方法就不在赘述了，可以上官网查看。
下面来说一下关于两个comboBox发联动
0){
$("#combo
Box_one").combo
Box('select',types[0].Value); //全部
}
}
});
$("#combo
Box_two").combo
Box({
url:'...';
onLoadSuccess: function(){
var types = $("#combo
Box_one").combo
Box('getData');
if (types.length > 0){
$("#combo
Box_two").combo
Box('select',types[0].Value); //全部
}
},onSelect: function(record){
var url = '...' + record.Value;
$("#combo
Box_one").combo
Box('reload',url);
}
});
rush:js;">
$(function() {
var typeData = [{
text: "来源",value: "prodName"
},{
text: "排放",value: "ars"
}];
var options01 = [{
text: "生活污水",value: "eq"
},{
text: "工业用水",value: "ne"
}];
var options02 = [{
text: "工业用水",value: "ne"
},{
text: "生活
垃圾",value: "ge"
}];
//初始化
查询项目的下拉列表
$("#type").combo
Box({
valueField: 'value',//值字段
textField: 'text',//
显示的字段
data: typeData,panelHeight: 170,onSelect: function() {
var myOptValue = $("#type").combo
Box("getValue");
//1.清空原来的classify这个combo
Box中的选项
$("#classify").combo
Box("clear");
//2.动态
添加"操作类型"的下拉列表框的option
if (myOptValue != null && (myOptValue == 'prodName' || myOptValue == 'prodStatus')) {
console.info("myOptValue = " + myOptValue);
$("#classify").combo
Box({
panelHeight: 50,data: options01
});
} else {
$("#classify").combo
Box({
panelHeight: 140,data: options02
});
}
//3.清空文本输入框——
用户输入的条件
//$("#userInputCondition").val("");
}
});
//初始化classify的下拉列表
$("#classify").combo
Box({
valueField: 'value',textField: 'text',data: options02,panelHeight: 140,});
});
下面是一个关于省市区的联动：
=即可在任意地方匹配
},onSelect: function(rec) {
$('#city').combo
Box('setValue',"");
$('#county').combo
Box('setValue',"");
var url = '/TidewaySHPServer/area/findAllCity?parentId=' + rec.areaId;//url为java
后台查询事级列表的
方法地址
$('#city').combo
Box('reload',url);
}
});
//市区
$('#city').combo
Box({
valueField: 'name',//
显示的字段
panelHeight: 'auto',editable: false,//不可编辑，只能选择
value: '',onSelect: function(rec) {
$('#county').combo
Box('setValue',"");
var url = '/TidewaySHPServer/area/findAll
districtOrCounty?parentId=' + rec.areaId;//url为java
后台查询区县级列表的
方法地址
$('#county').combo
Box('reload',url);
}
});
//区 县
$('#county').combo
Box({
valueField: 'areaId',textField: 'name',panelHeight: 'auto',});
基本上想写的都写完了，主要是多个comboBox的联动效果，写的不完美大家相互学习一下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
