1. 程式人生 > >ComboBox 組合框

ComboBox 組合框

我個人理解的就是<select></select>下拉列表框的功能,不過這裡支援搜尋功能

用法:

html部分:<input   name="pro_id"       id="bind_prods"       class="easyui-combobox"/>

<script type="text/javascript">

  $('#bind_prods').combobox({
    mode:'remote',            (如果想支援搜尋功能,必須加次特性,傳過去的變數名稱為“q”,接受如$_GET['q'])   ,sql語句加條件:" where position like '%" . $data['q'] . "%'"
    url:'basic/bind_channel.php?a=get_tree_products_bind',                   (請求資料來源)
    valueField:'id',
    textField:'name',
    method:'get',
    multiple:true,              (支援多選,預設不支援)   

    separator:' '     (預設是逗號)


});

$('#bind_prods').combobox('setValues', ['001','002']);   //如果編輯進來顯示已經選中的值

</script>

注意:1、url請求返回的資料型別必須是json格式,如:[{   "id":1,  "text":"text1"},{ "id":2,  "test":"text2"  }]

方法:

options():返回選擇物件

getData():返回載入的資料

loadData(data):載入列表資料

reload(url):重新載入遠端資料列表

setValues(values):設定combobox的值陣列

setValue(value):設定combobox的值

clear():清空combobox的值

select(value):選中指定的值

unselect(value):取消指定的值


事件:

onSelect:當用戶選擇一個列表項時觸發。(引數:record)

onLoadSuccess:當遠端資料載入成功時觸發。

onLoadError:當遠端資料載入失敗時觸發。

onUnselect:當用戶取消選擇一個列表項時觸發。(引數:record)


例如:

   $('#set_channeltype_id').combobox({
          mode:'remote',
          url:'union/add_cps_channel.php?a=get_channeltype',
          valueField:'id',
          textField:'type_name',
          method:'get',
         onSelect:function(record){
             var peo = $('#bind_prod_type').combobox('getValue');           (獲取value值用$('#bind_prod_type').combobox('getValue');  獲取text值用getText)
            if(peo==0){
                 $('.showbind').css('display','none');
            }
           else{
                 $('.showbind').css('display','');
           }
       }    
    });