combobox

使用案例

要求后台 API 返回数组，不要返回 JsonResult 类型的对象，下面的 onLoadSuccess 中是设置默认值的实现 事件 onChange 的钩子函数没有直接写在 html 中，那么要在 js 中实现

<label>发货抬头:</label>
<input name="sendoutTitle" class="easyui-combobox"
  data-options="
    url: 'configTitle/dropList',
    method: 'GET',
    required: true,
    textField: 'sid',
    valueField: 'sid',
    limitToList: true,
    panelHeight: 'auto',
    onLoadSuccess:function(){
      let loadData = $(this).combobox('getData');
      let valueField = $(this).combobox('options').valueField;
      if(loadData != undefined && loadData.length>0){
        $(this).combobox('setValue',loadData[0][valueField]);
      }
    },
		onChange: onChangeStore
		"
>
            
            
// 可以如下赋值一个对象数组 opts 给组件作为数据源            
const opts = SystemConst.priority();
$('#comboboxPriority').combobox({
    data:opts,
    required:true,
    limitToList:true,
    panelHeight:250,
    valueField:'sid',
    textField:'sid',
});

获取、设置值

// 获取值
$('#combobox的id').combobox('getValue');
// 设置值
$('#combobox的id').combobox('setValue',123);

隐藏与显示

$('#typeId').next(".combo").show();
$('#typeId').next(".combo").hide();

获取值字段名

let valueField = $(this).combobox('options').valueField;

更改事件触发业务逻辑

下面代码的事件 onChange 中触发更新其他 combobox重新加载数据

<input id="contactCompanyId" name="contactCompanyId" class="easyui-combobox"
data-options="label:'客户名称：',
labelAlign:'right',
  url:'jcContactcompany/listQuery',
  method:'GET',
textField:'ctName',
  valueField:'id',
  sIdField: 'ctCode',
limitToList:true,
  panelHeight:300,
  panelWidth:'auto',
required:true,
  filter:function(q,row){
  let options = $(this).combobox('options');
  let textField = row[options.textField] || '';
  let sIdField = row[options.valueField] || '';
  return textField.toString().toUpperCase().indexOf(q.toUpperCase()) >= 0
    || sIdField.toString().toUpperCase().indexOf(q.toUpperCase()) >= 0;
},
onSelect:function(record){
  $('#hasTax').combobox('setValue', !!record['hasTax']);
  $('#deliveryAddress1').combobox('setValue',record['sendAddress01']);
},
onChange:function(newVal,oldVal){
  if(newVal){
    $('#deliveryAddress1').combobox('reload','jcContactcompany/queryAddressByPk/'+newVal);
  }
},
loadFilter:function(data=[]){
  let textField = $(this).combobox('options').textField;
  return data.map(item=>{
    let code = item['ctCode'] || '';
    item[textField] =code+'-'+item[textField];
    return item;
  })
}
">

样式

使下拉菜单的宽度同控件文本区域的宽度则不要设置属性 panelHeight（将该属性从data-options中删除）即 panelWidth:'auto' 表示下拉菜单的宽度足够显示其中的内容 - 可能会超过控件文本控件的宽度

注意事项

• 请求数据的 url 必须是 get 请求，后台返回的数据必须是数组形式，不可返回 JsonResult 对象