js怎么定义combobox_jQuery EasyUI -ComboBox(下拉列表框)

本文详细介绍了JavaScript和jQuery EasyUI中的ComboBox(下拉列表框)的使用方法,包括前台页面动态加载显示、创建ComboBox、本地及远程数据加载、自定义模糊查询和数据库查询。还探讨了ComboBox的属性、事件、方法以及与远程数据交互的实现,包括onBeforeLoad、onLoadSuccess、onSelect等事件,以及setValue、reload等方法。示例代码展示了如何处理联动下拉框和数据过滤。
摘要由CSDN通过智能技术生成

一、combobox 前台页面动态加载显示

判断输入值在下拉列表是否存在

var nameStr ='';

$(document).ready(function(){

$('#customerId').combobox({

prompt:'请输入或选择客户名称',//prompt属性为没有选中任何选项的时候显示的标签 如“--性别--”url:'${rc.contextPath}/sale/findBusinessPartnerByName',

valueField:'id',

textField:'text' ,

onClick: function(node) {

attributeShow($("#customerId").combotree("getValue"));

},

filter: function(q, row){//filter属性模糊查询var opts = $(this).combobox('options');

//return row[opts.textField].indexOf(q) == 0;

return row[opts.textField].indexOf(q)>-1;//将从头位置匹配改为任意匹配

},

onLoadSuccess: function(){

var partnerId = '${(saleOrder.partnerId)!}';

if(partnerId){

$('#customerId').combobox('setValue',partnerId);

}

},

onSelect: function(){

var partnerId = $("#customerId").combotree("getValue");

$("#business_partner_id").val(partnerId);

findBusinessPartnerContactByPartnerId(partnerId);

findSaleAddressByPartnerId(partnerId);

},

onChange: function(newValue, oldValue){

var v = $("#customerId").combotree("getText");

var arr = nameStr.split(',');

var index = $.inArray(v, arr);

if(index < 0 ){

$("#business_partner_id").val('');

}else{

$("#business_partner_id").val($("#customerId").combobox("getValue"));

}

},

formatter: function(row){

var opts = $(this).combobox('options');

nameStr += row[opts.textField] + "," ;

return row[opts.textField];

}

});

});

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:触发时,远程数据加载错误

ONSELECT:触发,当用户选择一个列表项

onUnselect:触发,当用户取消选择一个列表

5、方法:

options():返回选择对象

getData():返回加载的数据

loadData(data):加载列表数据

reload(url

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值