我在做項目時，經常用到easyUI框架，今天總結一下easyUI中的combobox吧
創(chuàng)建easyui-combobox的方法，在easyUI的官網都有：
成都創(chuàng)新互聯(lián)主打移動網站、成都網站建設、成都網站設計、網站改版、網絡推廣、網站維護、申請域名、等互聯(lián)網信息服務，為各行業(yè)提供服務。在技術實力的保障下，我們?yōu)榭蛻舫兄Z穩(wěn)定，放心的服務，根據網站的內容與功能再決定采用什么樣的設計。最后，要實現(xiàn)符合網站需求的內容、功能與設計，我們還會規(guī)劃穩(wěn)定安全的技術方案做保障。
1、從帶有預定義結構的 元素創(chuàng)建組合框（combobox）
2、從標記創(chuàng)建組合框（combobox）
3、使用 javascript 創(chuàng)建組合框（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發(fā)聯(lián)動
//初始化下拉列表
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: "工業(yè)用水",
value: "ne"
}];
var options02 = [{
text: "工業(yè)用水",
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.動態(tài)添加"操作類型"的下拉列表框的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,
});
});
下面是一個關于省市區(qū)的聯(lián)動：
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);
}
});
//市區(qū)
$('#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后臺查詢區(qū)縣級列表的方法地址
$('#county').combobox('reload', url);
}
});
//區(qū) 縣
$('#county').combobox({
valueField: 'areaId',
textField: 'name',
panelHeight: 'auto',
editable: false,
});
基本上想寫的都寫完了，主要是多個combobox的聯(lián)動效果，寫的不完美大家相互學習一下
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
