jquery EasyUI 的下拉框内容自动过滤

你的名字 2022-07-14 01:53 411阅读 0赞

环境：jquery EasyUI 1.4.1

关于内容自动过滤的下拉框涉及2种 combobox（又combo扩展而来）、 combogrid（又combo和datagrid扩展而来）

内容过滤的属性是mode,其值为local或remote，默认为local

mode功能定义：

当文本改变时如何读取列表数据。设置为'remote'时，下拉列表框将会从服务器加载数据。当设置为“remote”模式时，用户输入将被发送到名为'q'的HTTP请求参数到服务器检索新数据。

注意一下几点：

1 默认为local ，即你不配置该属性时，combobox的效果会根据你首次加载的data为基础，随着你输入值的改变，它会自动过滤下拉内容的值的多少，很智能；而combogrid的local时，效果和combobox不同，它只会将接近输入值的内容放置到当前区域，并有颜色不同的标识，并不会数据过滤

2 指定mode为remote时，会随着输入的改变去服务器重新加载data，发送的url就是下拉框本身的url，并携带参数q来传递输入框中的值，很方便，不过性能可想而知

下面列出基本的配法

最基本的combobo和combogrid的local形式

$('#cc').combobox({    
        url:'/xx/test.do',  
        //mode:'local',//默认即使local
        valueField:'id',    
        textField:'text'   
    });
    
    $('#cc').combogrid({    
        panelWidth:450,    
        value:'006',//默认值
        //mode:'local',//默认即使local</pre>    idField:'code', //注意这里和combobox不一样
        textField:'name',
        url:'datagrid_data.json',
        columns:[[
            {field:'code',title:'Code',width:60},
            {field:'name',title:'Name',width:100},
            {field:'addr',title:'Address',width:120},
            {field:'col4',title:'Col41',width:100}
        ]]
    });
    
    下面是remote形式
    $('#cc').combobox({    
        url:'/xx/test.do',  
        mode:'remote',//默认即使local
        valueField:'id',    
        textField:'text'   
    });
    
    $('#cc').combogrid({    
        panelWidth:450,    
        value:'006',//默认值
        mode:'remote',//默认即使local
        idField:'code',//注意这里和combobox不一样 
        textField:'name',    
        url:'datagrid_data.json',    
        columns:[[ 
            {field:'code',title:'Code',width:60},
            {field:'name',title:'Name',width:100},
            {field:'addr',title:'Address',width:120},
            {field:'col4',title:'Col41',width:100} 
        ]] 
    });
    
    下面介绍一种特殊情况
        对于在datagrid中使用editor时，如果使用combobo或combogrid的editor怎么办呢？local是默认值就不说了，不指定mode就OK了，而mode=remote的配法略显不同</p>
    $("#CC").datagrid({
        fitColumns : true,// 自适应列宽
        singleSelect : true,
        rownumbers : true,
        url : '/EasyPiping/materials/bom/manage/getBomList.do',
        queryParams : {
            pipeSectionId : pipeSectionId
        },
        columns : [ [{
            field : 'commodityCode',
            title : '材料编号',
            align : 'center',
            width : 100,
            editor : {
                type : 'combogrid',
                options : {
                    url : url4Materials,
                    prompt : '请选择',
                    idField : 'id',
                    textField : 'text',
                    mode:'remote',
                    panelWidth:310,
                    columns:[[    
                        {field:'id',title:'id',width:60,hidden:true},    
                        {field:'text',title:'材料编码',width:100},
                        {field:'description',title:'材料描述',width:200},
                        {field:'unit',title:'单位',width:200,hidden:true}
                    ]],
                    editable : true,
                    required : true,
                    validType : [ 'email',"remote['/xx/test.do','commodityCode']"],
                    onSelect : function(rowIndex, rowData) {
                       
                    }
                }
            }                            
        }] ]
    });
    上面的排版不好，，懒的找了，其实配法是从ValidateBox控件学来的