EasyUI之Combobox 数据加载完之后执行

        开始做的时候是想利用url属性把远程数据加载来之后显示combobox,后来要做一个需求就是当远程访问的时候没有数据的时候需要禁用掉一些控件。查了一些资料,并最后得出了下面的代码片段:

         onLoadSuccess事件就是在url执行完成之后执行的(但是我不没有查到为什么回调函数里面的代码会执行两次,如果你alert(xxx)的话,会调用两次,求有朋友看见了知道的话,可以帮忙回答一下。)

        getData:这个参数传进去之后就是获得远程访问的数据,在这里有一个疑问就是我利用document.getElementById("businessType").combobox("getData");竟然没有获得数据,提示说没有这个方法。不知道为什么(望解答)。

            onLoadSuccess:function(){
                var data =  $('#businessType').combobox('getData');
                if(!data){
                     $('#dowmloadRecords').linkbutton('disable');
                     $('#businessType').combobox({ disabled: true });
                }
                else{
                     $('#dowmloadRecords').linkbutton('enable');
                }
            }    

后来又经过多次的了解,并加了一个技术群,问了里面的大神,他说的是回调函数可以传参数,官网的api没有更新,所以我后来把上面的代码改为如下就可以很好的使用了。

<td>业务类型:<input id="businessType" name="businessType"
	class="easyui-combobox"
	data-options="
				url:'getCurrentBusinessTypeOfUserId.json',
				editable:false,						
				valueField: 'BUSINESSTYPE',
				textField: 'BUSINESSTYPENAME',
				panelHeight:'auto',
				onLoadSuccess:function(data){
					if(data.length == 0){
						 $('#dowmloadRecords').linkbutton('disable');
					}
					else{
						 $('#dowmloadRecords').linkbutton('enable');
					}
				}	
				" />
</td>


下面结合官网看的指导文档,并做一下笔记。

该组合框显示一个可编辑的文本框,下拉列表,从中用户可以选择一个或多个值。用户可以输入文本进行选择,也可以从列表中选择一个或多个值。

(1)、创建一个combobox从定义好的select元素结构中

<ol class="linenums"><pre name="code" class="java"><select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
    <option value="aa">aitem1</option>
    <option>bitem2</option>
    <option>bitem3</option>
    <option>ditem4</option>
    <option>eitem5</option>
</select>

     
    (2)、利用input标签来创建combobox 
    

        <input id="cc" class="easyui-combobox" name="dept"
        data-options="valueField:'id',textField:'text',url:'get_data.php'">

    (3)、利用javascript来创建combobox

        <input id="cc" name="dept" value="aa">
    
        $('#cc').combobox({
        url:'combobox_data.json',
        valueField:'id',
        textField:'text'
        });<span id="result_box" lang="zh-CN"><span><span id="result_box" lang="zh-CN"><span></span></span></span></span>

    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):重新加载远程数据列表

        $('#cc').combobox('reload');  // reload list data using old URL
        $('#cc').combobox('reload','get_data.php');  // reload list data using new URL

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

    setValue(value):设置combobox的值

    clear():清空combobox的值

    select(value):选中指定的值

    unselect(value):取消指定的值


    • 3
      点赞
    • 3
      收藏
      觉得还不错? 一键收藏
    • 0
      评论

    “相关推荐”对你有帮助么?

    • 非常没帮助
    • 没帮助
    • 一般
    • 有帮助
    • 非常有帮助
    提交
    评论
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

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

    抵扣说明:

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

    余额充值