
1、在HBuilder软件中创建web项目,并在web项目指定的目录下创建静态页面select.html。
2、引入EasyUI插件核心css和js文件,并引入jQuery核心js文件。
3、下面开始编写ComboBox容器,该控件利用的是select标签元素构成的,设置ComboBox样式,如下图所示。
4、编辑js代码,获取ComboBox选中的值和文本,利用getValue和getText方法分别获取值和文本。
combobox里面有一个loadFilter回调函数,这个函数就是过滤后台返回的数据并显示,那么那就可以获取到后台返回的数据(后台返回的数据是一个数组),并在这个数组前面加一条数据"-请选择-";然后return就行了;$("#你的id").combobox({loadFilter:function(data){
//这里你想怎么改变data数据就怎么改变(增删改,都可以),只要格式正确
return data
}})
Combobox用法和方法参数: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:定义如何从远程服务器加载数据
4、 事件:
onBeforeLoad(param): *** 作之前将数据加载,返回false就取消这个荷载作用
onLoadSuccess():触发时,远程数据加载成功
onLoadError:触发时,远程数据加载错误
ONS www.hbbz08.com ELECT:触发,当用户选择一个列表项
onUnselect:触发,当用户取消选择一个列表
5、方法:
options():返回选择对象
getData():返回加载的数据
loadData(data):加载列表数据
reload(url):重新加载远程数据列表
setValues(values):设置combobox的值数组
setValue(value):设置combobox的值
clear():清空combobox的值
select(value):选中指定的值
unselect(value):取消指定的值
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)