• 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";
     
  • 相关阅读:
    跟我一起写 Makefile
    NFS服务器配置
    q
    tar命令的详细解释
    etc/xinetd.d目录介绍
    ubuntu 10.04下的配置tftp服务器
    莫队板子
    Day8(分块)
    字符串板子
    字符串练习题
  • 原文地址:https://www.cnblogs.com/zdz8207/p/jquery-easyui-combobox.html
Copyright © 2020-2023  润新知