• combo 自动查询


    combo自动查询分local和remote两种模式。

    remote模式

    远程模式,需要配置的几个参数:

    - mode:'remote'        点击下拉菜单,store才开始加载数据

    - queryParam:'query'    默认“query“,与后台交互的查询字段名称

    - minChars:4        remote模式下默认是4

    示例代码:

      {
            xtype:'combo',
            hiddenName:"orgId",
            store:orgStore,  
            displayField:"name",
            fieldLabel:"部门",
            valueField:"id",
            queryParam:'orgName',  // 自定义查询参数为orgName
            mode:"remote"
        }
    

      

    local模式

    本地模式,需要配置的参数:

    - mode:'local'     数据已经被加载

    - minChars:0      remote模式下默认是0

    注意:

    • 问题分析

    combo的local模式本身就带有自动搜索功能,但是中文查询可能会无效!! 
    combo查询实现,是调用其doQuery(q, forceAll)方法来实现,第一个参数q是输入的文本,第二参数forceAll是布尔类型,表示如果为true,输入长度小于minChars也可以强制搜索;如果为false,清除store中之前所有的过滤器。 
    但是问题就出在q这里,通常情况下我们输入字母、数字自动搜索都是没问题,当输入中文的时候就会出问题。那出什么问题呢? 
    q实际上是你键盘上键入的字符,举个例子,比如你要搜索”场“,使用拼音输入法,这里的q实际是”chang“,所以中文查询会失败

    • 解决方案

    使用keyup事件来触发自动搜索,参见示例代码

    示例代码:

     {
            xtype:'combo',
            hiddenName:"orgId",
            store:orgStore, 
            displayField:"name",
            fieldLabel:"部门",
            valueField:"id",
            mode:"local",
            maxHeight:300,
            enableKeyEvents:true,  // 开启键盘事件
            listeners:{
                keyup:function(that, e, eOpts){
                    var query = that.getRawValue();  // 获取输入的文本值
                    that.doQuery(query); // 执行搜索
                }
            }
        }
    

      

    总结

    1. combo自动搜索分remote模式和local模式,配置参数有差异。
    2. local模式下中文搜索会失败,使用keyup事件实现搜索功能。
    Time is a great teacher, but unfortunately it kills all its pupils.
  • 相关阅读:
    jQuery基础及选择器
    JavaScript面向对象
    JavaScript操作DOM
    JavaScript Bom对象
    jquery内容
    jQuery基础
    正则表达式
    表单校验
    使用jQuery操作DOM
    jQuery中的动画
  • 原文地址:https://www.cnblogs.com/bella-fly/p/5083337.html
Copyright © 2020-2023  润新知