zoukankan      html  css  js  c++  java
  • jquery easyUI中combobox的使用总结

    jquery easyUI中combobox的使用总结

    一、如何让jquery-easyui的combobox像select那样不可编辑?
    为combobox添加editable属性 设置为false
    $('#goods_series').combobox({
    url:"xxx/getBrandsGoodsSeries",
    valueField:'goods_series',
    textField:'goods_series',
    editable:false
    });
    获取值:
    'goods_series':$("#goods_series").combobox("getValue"),
    表单:
    <input class="easyui-combobox" type="text" id="goods_series" name="goods_series"/>

    二、让combobox可输入,为combobox添加editable属性 设置为true,输入内容是作为搜索下拉框里面值的快捷方式,可以设置本地和romote两种方式

    三、如何让combobox兼容选择和输入,并把输入的内容作为新增内容?
    easyui本身输入的只是作为搜索快捷方式,没有提供api接口可以直接获取到输入框里面的内容,也不能直接根据ID或者input里面的值(输入框是combobox组件自动添加的,没有ID)。
    通过大量测试实战结果得出的一个解决方法是:获取所有.combo-text然后获取父节点上一个兄弟节点,判断comboname(组件自动添加的)属性值为对应input的name时获取这个input的值
    function getGoodSeries(){
    var value = "";
    //console.log($(".combo-text"));
    $.each($(".combo-text"),function(i,o){
    //console.log($(o).parent().prev().attr('comboname'));
    if($(o).parent().prev().attr('comboname') == 'goods_series'){
    //console.log($(o).val());
    value = $(o).val();
    }
    });
    return value;
    }
    //提交表单获取值的时候使用:var goods_series = getGoodSeries();

    function goodsbrandSelect(){
    $('#goods_series').combobox({
    url:"xxx",
    valueField:'goods_series',
    textField:'goods_series',
    //hasDownArrow:false,
    editable:true
    });
    }

    级联方式在上一个combobox的data-options里面加上onSelect:goodsbrandSelect,onLoadSuccess:goodsbrandSelect

    四、editable:true + hasDownArrow:false 可以作为一组打造自动提示输入框没有下拉框的效果。

    五、onChange事件可以在有级联项时,作为清空级联项值的一个扩展点。但是并不能作为载入级联项值的地方,因为此时主combobox还没选中。
    载入级联项值的地方应该是在onSelect和onLoadSuccess事件中,function中传入有参数rec,也就是选中的那条记录

    六、onBeforeLoad函数会在两种情况下触发:1.combobox初始化的时候 2.remote方式发起请求成功收到服务器传来的值时
    其中1初始化时无论载入方式是local还是remote,是url还是data方式,都会触发onBeforeLoad。
    当通过url载入数据onBeforeLoad返回false,就无法载入数据,通过data载入数据无论onBeforeLoad返回什么,combobox都已经有data数据了。
    可以利用这个函数处理local模式下的级联等。
    onBeforeLoad若return true那就会发起请求到服务器请求数据,若成功获得数据,就会触发onLoadSuccess

    七、group可以展现两层树形目录形式方便用户选择,设置示例:
    groupField:'gf',
    groupFormatter:function(group){
    return function(group){
    //doSomething
    };
    },
    这里的groupField就是需要group的字段,一般这个字段存的都是id或code等。
    在groupFormatter中将其匹配成显示内容。

     另外在火狐下他会缓存上次选择后的下拉框内容,即默认缓存input的值,只有使用ctl+F5强制刷新的才可以清除 缓存记录。需要加个参数让他不要缓存,在不想使用缓存的input 中添加 autocomplete="off" 或者在 input 所在的form 标签中添加 autocomplete="off";
     
  • 相关阅读:
    设计模式学习总结系列应用实例
    【研究课题】高校特殊学生的发现及培养机制研究
    Linux下Oracle11G RAC报错:在安装oracle软件时报file not found一例
    python pro practice
    openstack python sdk list tenants get token get servers
    openstack api
    python
    git for windows
    openstack api users list get token get servers
    linux 流量监控
  • 原文地址:https://www.cnblogs.com/zdz8207/p/jquery-easyui-combobox.html
Copyright © 2011-2022 走看看