支持搜索、自定义输入的下拉框组件–combobox组件使用文档

  • Post author:
  • Post category:其他




easyui插件–combobox组合框



官方下载


官网下载



Jquery EasyUI 官网API



Jquery EasyUI 中文网API



使用说明


1、引入依赖的css和js文件
<link rel="stylesheet" href="<c:url value="/public/lib/easyui/easyui.css" />" type="text/css">
<link rel="stylesheet" href="<c:url value="/public/lib/easyui/icon.css" />" type="text/css">
<script src="<c:url value="/public/lib/jquery/jquery-1.12.1.min.js"/>"></script>
<script src="<c:url value="/public/lib/easyui/jquery.easyui.min.js" />" type="text/javascript"></script>


2、初始化元素

(1) 使用带有预定义的元素创建组合框(不推荐)

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
    <option value="aitem1">aitem1</option>
    <option>bitem2</option>
    <option>bitem3</option>
    <option>ditem4</option>
    <option>eitem5</option>
</select>
<!--或者使用带有预定义的input进行创建-->
<input  id="cc"  class="easyui-combobox"  name="dept"
  data-options="valueField:'id',textField:'text',url:'get_data.php'">

(2)使用原生html,通过js进行创建

 <select id="cc">
    <option value="1">1</option >
    <option value="2">2</option >
    <option value="3">3</option >
</select>
<!-- 或者使用input读取json文件 -->
<input  id="cc"  name="dept"  value="aa">
//select初始化
$('#cc').combobox({});
//input json动态获取数据初始化
$('#cc').combobox({
   url:'combobox_data.json',
   valueField:'id',
   textField:'text'
});

说明:使用json格式的数据注意对数据的配置,如以上的初始化数据示例:

[{"id":1,"text":"text1"},
{"id":2,"text":"text2"}]


常用属性–combobox扩展属性
名称 类型 描述 默认值
★valueField String 绑定远程数据的key值 value
★valueText String 绑定远程数据时的value值 text
★ url String 从远程加载数据时的url地址 null
★method String 从远程获取数据时的加载方式 post
★data Array 用于加载的数据列表 none
mode String 数据加载的模式,分为local本地加载和remote远程加载 local
loader json Load 定义如何从远程服务器加载数据 null


常用属性 – 继承自combo插件
名称 类型 描述 默认值
★ width number 组件的宽度 auto
★height number 组件的高度 22
★panelWidth number 下拉面板的宽度 null
★panelHeight number 下拉面板的高度 200
★multiple boolean 是否支持多选 false
separator String 多选时文本的分隔符
★editable boolean 是否支持输入 true
★disabled boolean 是否禁用文本域 false
★readonly Boolean 是否使文本域只读 false
★hasDownArrow Boolean 是否显示向下的箭头 true
★value String 组件的默认值 null
delay number 从最后一个键的输入事件起所产生的延时效应 200


事件 — combobox扩展事件
名称 参数 描述
onBeforeLoad param 在请求发生之前触发,return false 则取消该动作
onLoadSuccess none 远程加载数据成功后触发
onLoadError none 远程加载数据失败后触发
★onSelect recordd(列表项) 当选择一个列表项时触发
★onUnselect recordd(列表项) 当取消一个列表项时触发


事件 — 继承自combo组件
名称 参数 描述
★onShowPanel none 当下拉面板显示时触发
★onHidePanel none 当下拉面板隐藏时触发
★★★onChange (newValue, oldValue) 当值发生改变时触发


方法 — combobox扩展
名称 参数 描述
getData none 返回加载的数据
loadData data 加载本地列表数据
reload url 请求数据的url,会重置上一次的url
setValues values 多选赋值
★★★setValue value 单选赋值
★★★clear null 清除组合框的值
select value 选择指定的选项
unSelect value 取消指定的选项


方法 — 继承自combo组件
名称 参数 描述
textbox none 返回文本框的对象
destory none 销毁组件
resize width 调整组件的宽度
showPanel none 显示下拉面板
hidePanel none 隐藏下拉面板
disable none 禁用组件
enable none 启用组件
clear none 清除组件的值
reset none 重置组件的值
★★★getValues none 获取组件的值的数组
★★★getValue none 获取组件的值



版权声明:本文为weixin_41305441原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。