快捷導(dǎo)航

easyUI combobox實(shí)現(xiàn)聯(lián)動(dòng)效果

更新時(shí)間：2017年01月17日 16:54:51 作者：牧羊人_cily

這篇文章主要為大家詳細(xì)介紹了easyUI combobox實(shí)現(xiàn)聯(lián)動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

我在做項(xiàng)目時(shí)，經(jīng)常用到easyUI框架，今天總結(jié)一下easyUI中的combobox吧
創(chuàng)建easyui-combobox的方法，在easyUI的官網(wǎng)都有：

1、從帶有預(yù)定義結(jié)構(gòu)的元素創(chuàng)建組合框（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、從標(biāo)記創(chuàng)建組合框（combobox）

<input id="cc" class="easyui-combobox" name="dept"
data-options="valueField:'id',textField:'text',url:'get_data.php'">

3、使用 javascript 創(chuàng)建組合框（combobox）

$('#cc').combobox({
  url:'combobox_data.json',
  valueField:'id',
  textField:'text'
});

json 數(shù)據(jù)格式的示例：

[{
  "id":1,
  "text":"text1"
},{
  "id":2,
  "text":"text2"
},{
  "id":3,
  "text":"text3",
  "selected":true
},{
  "id":4,
  "text":"text4"
},{
  "id":5,
  "text":"text5"
}]

它的屬性和方法就不在贅述了，可以上官網(wǎng)查看。
下面來(lái)說(shuō)一下關(guān)于兩個(gè)combobox發(fā)聯(lián)動(dòng)

//初始化下拉列表
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: "來(lái)源",
    value: "prodName"
  }, {
    text: "排放",
    value: "ars"
  }];
  var options01 = [{
    text: "生活污水",
    value: "eq"
  }, {
    text: "工業(yè)用水",
    value: "ne"
  }];
  var options02 = [{
    text: "工業(yè)用水",
    value: "ne"
  }, {
    text: "生活垃圾",
    value: "ge"
  }];
  //初始化查詢項(xiàng)目的下拉列表
  $("#type").combobox({
    valueField: 'value',//值字段
    textField: 'text',//顯示的字段
    data: typeData,
    panelHeight: 170,
    onSelect: function() {
      var myOptValue = $("#type").combobox("getValue");
      //1.清空原來(lái)的classify這個(gè)combobox中的選項(xiàng)
      $("#classify").combobox("clear");
      //2.動(dòng)態(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,
  });
});

下面是一個(gè)關(guān)于省市區(qū)的聯(lián)動(dòng)：

var h = $(window).height() * 0.65;
// 省級(jí) 
$('#province').combobox({
  valueField: 'name', //值字段
  textField: 'name', //顯示的字段
  url: '/TidewaySHPServer/area/findAllProvince',//url為java后臺(tái)查詢省級(jí)列表的方法地址
  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后臺(tái)查詢事級(jí)列表的方法地址
    $('#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后臺(tái)查詢區(qū)縣級(jí)列表的方法地址
    $('#county').combobox('reload', url);
  }
});
//區(qū) 縣
$('#county').combobox({
  valueField: 'areaId',
  textField: 'name',
  panelHeight: 'auto',
  editable: false,
});

基本上想寫(xiě)的都寫(xiě)完了，主要是多個(gè)combobox的聯(lián)動(dòng)效果，寫(xiě)的不完美大家相互學(xué)習(xí)一下

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: