EasyUI之combobox

HTML ：

1、需要引入class=" easyui-combobox”

2、参数设置需要在data-options中设置

3、属性参数配置：

valueField：基础数据值名称绑定到Combobox(提交值)

textField：基础数据的字段名称绑定的Combobox（显示值）

mode:定义当文本改变时如何加载列表数据，当设置为remote模式下，什么类型的用户将被发送http请求参数名为'q'的服务器，以获取新的数据。

url：从远程URL来加载列表数据

method：http方法检索列表数据

data：列表中被加载的数据

filter：定义如何过滤本地数据“模式”设置为'local'

formatter：定义如何呈现行

loader：定义如何从远程服务器加载数据

<input class="input-30 easyui-combobox" value="${(info.factoryCode)!''}"editable="false"data-options="url:'${ctx}/common/userFactoryList',method:'get',valueField: 'factoryId',textField: 'factoryName',icons: [{iconCls:'iconfont icon-guanbi3',handler: function(e){$(e.data.target).textbox('clear');}}]"prompt="请选择..."id="factoryCode" name="factoryCode" type="text">

url返回json：

[{"id": "8D916FBDFD1E0192E053AC1001020192","factoryId": "01","factoryName": "测试1",},{"id": "C7398B4CD1200072E053AC1001020072","factoryId": "02","factoryName": "测试2",}]

常用取值方法：

options()：返回选择对象

getData():返回加载的数据

loadData(data):加载列表数据

reload(url):重新加载远程数据列表

setValues(values):设置combobox的值数组

setValue(value):设置combobox的值

clear():清空combobox的值

select(value):选中指定的值

unselect(value):取消指定的值

例：

//取ID
var factoryCode= $('#factoryCode').combobox('getValue');
//取显示的name
var factoryName= $('#factoryCode').combobox('getText');

事件：

onBeforeLoad(param): 操作之前将数据加载，返回false就取消这个荷载作用

onLoadSuccess():触发时，远程数据加载成功

onLoadError：触发时，远程数据加载错误

ONSELECT：触发，当用户选择一个列表项

onUnselect：触发，当用户取消选择一个列表

例：

$("#factoryCode").combobox({//用户选择后，触发onChange事件onChange: function (newValue, ordValue) {//取选中的名称let factoryName = $("#factoryCode").combobox("getText")//赋值给另外一个组件内$("#factoryName").textbox("setValue", factoryName )}});

EasyUI文档：Easyui Combobox 组合框_EasyUI 插件

本文从网上搜集资料后自行整理，用于记录。

EasyUI之combobox相关推荐

easyui的combobox下拉框初始化默认值以及保持该值一直显示的方法
easyui的combobox下拉框默认初始值是空,下面是实现从远程加载数据之后初始化默认值,以及让该值一直排在下拉框的最顶部的方式. 目前的需求是需要在初始化的时候添加"全部数据库&quo ...
easyUI的combobox选中无法显示
easyUI的combobox选中无法显示最近,在使用easyUI做前台的页面,遇到一个非常奇葩的问题,就是easyUI的combobox,有下拉的内容,但是,选中之后不会显示到其中文本框中. 首先 ...
EasyUI的combobox用法
EasyUI的combobox用法在ITOO中有一个需求,前台使用的是easyUI的框架,这里有几个combobox下拉框,其中的内容都是可选的. 当下拉框中的内容非常多的时候,用户需要选择其中的所 ...
第二百二十三节，jQuery EasyUI，ComboBox(下拉列表框)组件
jQuery EasyUI,ComboBox(下拉列表框)组件,可以远程加载数据的下拉列表组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 C ...
easyui select ajax,easyui的combobox根据后台数据实现自动输入提示功能
easyui的combobox根据后台数据实现自动输入提示功能发布时间:2020-06-11 10:09:41 来源:51CTO 阅读:1981 作者:crackernet adauhuehkek最 ...
easyUI中combobox中idFeild和textFeild的取值方法
easyUI中combobox是比较常用的选择数据的方式,在官方的API说明中是这样描述的:扩展自 $.fn.combo.defaults.使用 $.fn.combobox.defaults重写默认值 ...
java swing 自动补全_扩展easyui的combobox组件的自动完成（autocomplete）
update:现有有easyui插件直接提供了该功能. 可以请参考:http://www.easyui-extlib.com/ 里面combobox的根据拼音自动显示.里面各种插件造福大家. ---- ...
EasyUI的combobox使用总结
一,combobox的属性,事件和方法 combobox可以配置属性,绑定事件监听,调用方法,理解这几个概念之后会对combobox有更清晰的了解. 1,配置属性 combobox可以配置自己的属性, ...
easyUI的combobox实现级联
先简介下combobox: easyUI重写了select,取而代之的是combobox,有例如以下几种方式能够创建一个combobox 1.使用select标签,并加上class="eas ...
easyUI之ComboBox（下拉列表框）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head ...

EasyUI之combobox

EasyUI之combobox相关推荐

最新文章

热门文章