easyUI combobox realizes linkage effect
- 2021-07-12 04:49:11
- OfStack
I often use the easyUI framework when doing projects. Today, summarize combobox in easyUI
The methods of creating easyui-combobox are available in official website of easyUI:
1. Create a combo box from an element with a predefined structure (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. Create a combo box from a tag (combobox)
<input id="cc" class="easyui-combobox" name="dept"
data-options="valueField:'id',textField:'text',url:'get_data.php'">
3. Create a combo box using javascript (combobox)
< input id="cc" name="dept" value="aa" >
$('#cc').combobox({
url:'combobox_data.json',
valueField:'id',
textField:'text'
});
Example of json data format:
[{
"id":1,
"text":"text1"
},{
"id":2,
"text":"text2"
},{
"id":3,
"text":"text3",
"selected":true
},{
"id":4,
"text":"text4"
},{
"id":5,
"text":"text5"
}]
Its attributes and methods will not be repeated, but can be viewed in official website.
Let's talk about the linkage between two combobox
// Initialize drop-down list
function InitCombobox() {
$("#combobox_one").combobox({
onLoadSuccess: function(){
var types = $("#combobox_one").combobox('getData');
if (types.length > 0){
$("#combobox_one").combobox('select', types[0].Value); // All
}
}
});
$("#combobox_two").combobox({
url:'...';
onLoadSuccess: function(){
var types = $("#combobox_one").combobox('getData');
if (types.length > 0){
$("#combobox_two").combobox('select', types[0].Value); // All
}
},
onSelect: function(record){
var url = '...' + record.Value;
$("#combobox_one").combobox('reload', url);
}
});
$(function() {
var typeData = [{
text: " Source ",
value: "prodName"
}, {
text: " Emission ",
value: "ars"
}];
var options01 = [{
text: " Domestic sewage ",
value: "eq"
}, {
text: " Industrial water ",
value: "ne"
}];
var options02 = [{
text: " Industrial water ",
value: "ne"
}, {
text: " Domestic garbage ",
value: "ge"
}];
// Initialize the drop-down list of query items
$("#type").combobox({
valueField: 'value',// Value field
textField: 'text',// Fields displayed
data: typeData,
panelHeight: 170,
onSelect: function() {
var myOptValue = $("#type").combobox("getValue");
//1. Empty the original classify This combobox Options in
$("#classify").combobox("clear");
//2. Dynamic addition " Operation type " Of the drop-down list box of 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. Empty the text input box-the condition entered by the user
//$("#userInputCondition").val("");
}
});
// Initialization classify Drop-down list of
$("#classify").combobox({
valueField: 'value',
textField: 'text',
data: options02,
panelHeight: 140,
});
});
The following is a linkage between provinces and cities:
var h = $(window).height() * 0.65;
// Provincial
$('#province').combobox({
valueField: 'name', // Value field
textField: 'name', // Fields displayed
url: '/TidewaySHPServer/area/findAllProvince',//url For java Method address for querying provincial list in the background
panelHeight: h,
editable: true,
// Fuzzy query
filter: function(q, row) {
var opts = $(this).combobox('options');
return row[opts.textField].indexOf(q) == 0; // Ab initio matching , Change to >= You can match anywhere
},
onSelect: function(rec) {
$('#city').combobox('setValue', "");
$('#county').combobox('setValue', "");
var url = '/TidewaySHPServer/area/findAllCity?parentId=' + rec.areaId;//url For java Method address of background query event level list
$('#city').combobox('reload', url);
}
});
// Urban area
$('#city').combobox({
valueField: 'name', // Value field
textField: 'name', // Fields displayed
panelHeight: 'auto',
editable: false, // Non-editable, only select
value: '',
onSelect: function(rec) {
$('#county').combobox('setValue', "");
var url = '/TidewaySHPServer/area/findAllDistrictOrCounty?parentId=' + rec.areaId;//url For java Method address of background query district and county list
$('#county').combobox('reload', url);
}
});
// District County
$('#county').combobox({
valueField: 'areaId',
textField: 'name',
panelHeight: 'auto',
editable: false,
});
Basically, what I want to write is finished, mainly the linkage effect of multiple combobox, and the imperfect writing is that everyone learns from each other 1