01  $('#cc').combobox({
02       valueField:'id',
03       textField:'city',
04       data:[
05           {"id":1," country":"中國(guó)","city":"北京市"},
06           {"id":2," country":"中國(guó)","city":"上海市"},
07           {"id":3," country":"中國(guó)","city":"重慶市"},
08           {"id":4," country":"中國(guó)","city":"天津市"},
09           {"id":5," country":"美國(guó)","city":"華盛頓"},
10           {"id":6," country":"美國(guó)","city":"紐約"},
11           {"id":7," country":"美國(guó)","city":"舊金山"},
12           {"id":8," country":"英國(guó)","city":"倫敦"},
13           {"id":9," country":"英國(guó)","city":"伯明翰"},
14           {"id":10," country":"英國(guó)","city":"利茲"},
15           {"id":11," country":"法國(guó)","city":"巴黎"},
16           {"id":12," country":"法國(guó)","city":"馬賽"},
17           {"id":13," country":"法國(guó)","city":"里昂"},
18       ],
19  });

01  $city = array(
02      array("id"=>1," country"=>"中國(guó)","city"=>"北京市"),
03      array("id"=>2," country"=>"中國(guó)","city"=>"上海市"),
04      array("id"=>3," country"=>"中國(guó)","city"=>"重慶市"),
05      array("id"=>4," country"=>"中國(guó)","city"=>"天津市"),
06      array("id"=>5," country"=>"美國(guó)","city"=>"華盛頓"),
07      array("id"=>6," country"=>"美國(guó)","city"=>"紐約"),
08      array("id"=>7," country"=>"美國(guó)","city"=>"舊金山"),
09      array("id"=>8," country"=>"英國(guó)","city"=>"倫敦"),
10      array("id"=>9," country"=>"英國(guó)","city"=>"伯明翰"),
11      array("id"=>10," country"=>"英國(guó)","city"=>"利茲"),
12      array("id"=>11," country"=>"法國(guó)","city"=>"巴黎"),
13      array("id"=>12," country"=>"法國(guó)","city"=>"馬賽"),
14      array("id"=>13," country"=>"法國(guó)","city"=>"里昂")
15  );
16  echo JSON($city);

01  $('#cc').combobox({
02       valueField:'id',
03       textField:'city',
04       url:" getData.php"
05  });

01  $('#cc').combobox({
02       //擴(kuò)展自Combo的屬性
03       width: 400,
04       panelHeight:450,
05       //ComboBox新增屬性
06       valueField:'id',
07       textField:'city',
08       groupField:'country',
09       url:"server/getCountry.php",
10       groupFormatter:function(group){
11           if(group == "中國(guó)"){
12                return "<img src='img/zg.png'></img>";
13           }else if(group == "美國(guó)"){
14                return "<img src='img/mg.png'></img>";
15           }else if(group == "英國(guó)"){
16                return "<img src='img/yg.png'></img>";
17           }else if(group == "法國(guó)"){
18                return "<img src='img/fg.png' width='36' height='27'></img>";
19           }else{
20                return "";
21           }
22       },
23       formatter:function(row){
24           var opts = $(this).combobox("options");
25           var text = row[opts.textField];
26           if(text == "北京市"||text == "華盛頓"||text == "倫敦"||text == "巴黎"){
27                return "<b>"+text+"</b>";
28           }
29           else{
30                return text;
31           }
32       },
33  });

01   mode: "local",
02   filter:function(q,row)
03   {
04       var opts = $('#cc').combobox("options");//獲取該組合框全部的屬性
05       var groupname =row[opts.groupField];//獲取該行數(shù)據(jù)的分組值
06       if(groupname == q){
07           return row[opts.textField];           //當(dāng)用戶輸入的值等于分組值時(shí)則顯示數(shù)據(jù)
08       }
09       else{
10           return false;
11       }
12  }

提示

filter屬性默認(rèn)檢索規(guī)則是顯示包含用戶輸入的關(guān)鍵字的數(shù)據(jù)。例如輸入“北京”，將會(huì)檢索到“北京市”。

01      mode: "remote",
02      loader:function(param,success,error){
03          var q = param.q;                //獲取文本框中輸入的數(shù)據(jù)
04          if(q.length<1){
05              return false;
06          }
07          $.ajax({                        //利用ajax請(qǐng)求獲取數(shù)據(jù)
08              url: ' filterCountry.php?q='+q,
09              dataType: 'json',
10              type:'get',
11              success: function(data){
12                   success(data);
13              },
14              error:function(){
15                       error();
16                   }
17              });
18      }
19     loadFilter:function(data){
20      //服務(wù)器端檢索完畢后的回調(diào)函數(shù)，data為服務(wù)器返回的值，
21      //開發(fā)者可以進(jìn)一步對(duì)數(shù)據(jù)進(jìn)行過(guò)濾
22     return data;
23  }

01  $limit = $_GET['q'];
02  $result = db::select("select * from country where country = :country",array(
03      "country"=>$limit
04  ))->getResult();
05  echo Data::toJson($result);

01  url:" getData.php",
02  queryParams:{"c":'中國(guó)'},
03  method: 'get'

01  $limit = $_GET['c'];
02  $result = db::select("select * from country where country = :country",array(
03      "country"=>$limit
04  ))->getResult();
05  echo Data::toJson($result);

提示

loader屬性中的param參數(shù)是一個(gè)包含queryParams屬性和用戶輸入值的對(duì)象，在上例中我們也可以通過(guò)param.c獲取到queryParams屬性中的限制參數(shù)，這種設(shè)計(jì)保證我們?cè)谙蚍?wù)器檢索數(shù)據(jù)時(shí)也可以限制在指定范圍內(nèi)檢索。

提示

在EasyUI中很多參數(shù)都是對(duì)象，如果讀者不清楚參數(shù)的具體含義，可以使用本書在2.1.2節(jié)中提供的writeObj函數(shù)打印對(duì)象。

01  $('#cc').combobox("setValue","1");//選中單個(gè)數(shù)據(jù)
02  $('#cc').combobox("setValues","1,2");//選中多個(gè)數(shù)據(jù)