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


Related articles: