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";
     
  • 相关阅读:
    那些离不开的 Chrome 扩展插件
    Spring Boot 实战 —— 入门
    Maven 学习笔记
    Linux lvm 分区知识笔记
    Linux 双向 SSH 免密登录
    CentOS Yum 源搭建
    Ubuntu 系统学习
    iOS 测试三方 KIF 的那些事
    Swift 网络请求数据与解析
    iOS Plist 文件的 增 删 改
  • 原文地址:https://www.cnblogs.com/zdz8207/p/jquery-easyui-combobox.html
Copyright © 2011-2022 走看看