easyUI combobox实现联动效果
我在做项目时,经常用到easyUI框架,今天总结一下easyUI中的combobox吧
创建easyui-combobox的方法,在easyUI的官网都有:
1、从带有预定义结构的 元素创建组合框(combobox)
<select id="cc" class="easyui-combobox" name="dept" style="width:200px;"> <option value="aa">aitem1</option> <option>bitem2</option> <option>bitem3</option> <option>ditem4</option> <option>eitem5</option> </select>
2、从标记创建组合框(combobox)
<input id="cc" class="easyui-combobox" name="dept" data-options="valueField:'id',textField:'text',url:'get_data.php'">
3、使用 javascript 创建组合框(combobox)
<input id="cc" name="dept" value="aa">
$('#cc').combobox({
url:'combobox_data.json',
valueField:'id',
textField:'text'
});
json 数据格式的示例:
[{
"id":1,
"text":"text1"
},{
"id":2,
"text":"text2"
},{
"id":3,
"text":"text3",
"selected":true
},{
"id":4,
"text":"text4"
},{
"id":5,
"text":"text5"
}]
它的属性和方法就不在赘述了,可以上官网查看。
下面来说一下关于两个combobox发联动
//初始化下拉列表
function InitCombobox() {
$("#combobox_one").combobox({
onLoadSuccess: function(){
var types = $("#combobox_one").combobox('getData');
if (types.length > 0){
$("#combobox_one").combobox('select', types[0].Value); //全部
}
}
});
$("#combobox_two").combobox({
url:'...';
onLoadSuccess: function(){
var types = $("#combobox_one").combobox('getData');
if (types.length > 0){
$("#combobox_two").combobox('select', types[0].Value); //全部
}
},
onSelect: function(record){
var url = '...' + record.Value;
$("#combobox_one").combobox('reload', url);
}
});
$(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").combobox({
valueField: 'value',//值字段
textField: 'text',//显示的字段
data: typeData,
panelHeight: 170,
onSelect: function() {
var myOptValue = $("#type").combobox("getValue");
//1.清空原来的classify这个combobox中的选项
$("#classify").combobox("clear");
//2.动态添加"操作类型"的下拉列表框的option
if (myOptValue != null && (myOptValue == 'prodName' || myOptValue == 'prodStatus')) {
console.info("myOptValue = " + myOptValue);
$("#classify").combobox({
panelHeight: 50,
data: options01
});
} else {
$("#classify").combobox({
panelHeight: 140,
data: options02
});
}
//3.清空文本输入框——用户输入的条件
//$("#userInputCondition").val("");
}
});
//初始化classify的下拉列表
$("#classify").combobox({
valueField: 'value',
textField: 'text',
data: options02,
panelHeight: 140,
});
});
下面是一个关于省市区的联动:
var h = $(window).height() * 0.65;
// 省级
$('#province').combobox({
valueField: 'name', //值字段
textField: 'name', //显示的字段
url: '/TidewaySHPServer/area/findAllProvince',//url为java后台查询省级列表的方法地址
panelHeight: h,
editable: true,
//模糊查询
filter: function(q, row) {
var opts = $(this).combobox('options');
return row[opts.textField].indexOf(q) == 0; //从头匹配,改成>=即可在任意地方匹配
},
onSelect: function(rec) {
$('#city').combobox('setValue', "");
$('#county').combobox('setValue', "");
var url = '/TidewaySHPServer/area/findAllCity?parentId=' + rec.areaId;//url为java后台查询事级列表的方法地址
$('#city').combobox('reload', url);
}
});
//市区
$('#city').combobox({
valueField: 'name', //值字段
textField: 'name', //显示的字段
panelHeight: 'auto',
editable: false, //不可编辑,只能选择
value: '',
onSelect: function(rec) {
$('#county').combobox('setValue', "");
var url = '/TidewaySHPServer/area/findAllDistrictOrCounty?parentId=' + rec.areaId;//url为java后台查询区县级列表的方法地址
$('#county').combobox('reload', url);
}
});
//区 县
$('#county').combobox({
valueField: 'areaId',
textField: 'name',
panelHeight: 'auto',
editable: false,
});
基本上想写的都写完了,主要是多个combobox的联动效果,写的不完美大家相互学习一下
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- EasyUI学习之Combobox下拉列表(1)
- EasyUI学习之Combobox级联下拉列表(2)
- jQuery EasyUI编辑DataGrid用combobox实现多级联动
- Easyui的combobox实现动态数据级联效果
- Easyui form combobox省市区三级联动
- 如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
- EasyUI中combobox默认值注意事项
- jQuery+easyui中的combobox实现下拉框特效
- jquery easyui combobox模糊过滤(示例代码)
- jQuery EasyUI API 中文文档 - ComboBox组合框
相关文章
js之ActiveX控件使用说明 new ActiveXObject()
ActiveX 控件广泛用于Internet。它们可以通过提供视频、动画内容等来增加浏览的乐趣。不过,这些程序可能出问题或者向您提供不需要的内容2014-03-03
input file样式修改以及图片预览删除功能详细概括(推荐)
这篇文章主要介绍了input file样式修改以及图片预览删除功能,input file 按钮改成自己想要的样式以及.图片预览功能的实现,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。2017-08-08


最新评论