easyUI combobox实现联动效果

easyUI combobox实现联动效果

我在做项目时，经常用到easyUI框架，今天总结一下easyUI中的combobox吧

创建easyui-combobox的方法，在easyUI的官网都有：

1、从带有预定义结构的 元素创建组合框（combobox）

aitem1

bitem2

bitem3

ditem4

eitem5

2、从标记创建组合框（combobox）

data-options="valueField:'id',textField:'text',url:'get_data.php'">

3、使用 javascript 创建组合框（combobox）

$('#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的联动效果，写的不完美大家相互学习一下

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。