jQuery EasyUI -ComboBox（下拉列表框）

一、combobox 前台页面动态加载显示

判断输入值在下拉列表是否存在 
var nameStr =''; 
    $(document).ready(function(){ 

        $('#customerId').combobox({  
            prompt:'请输入或选择客户名称', 　　//prompt属性为没有选中任何选项的时候显示的标签 如“--性别--”
            url:'${rc.contextPath}/sale/findBusinessPartnerByName',  
            valueField:'id',  
            textField:'text' , 
            onClick: function(node) { 
                attributeShow($("#customerId").combotree("getValue")); 
            }, 
            filter: function(q, row){ 　　　　//filter属性模糊查询
                var opts = $(this).combobox('options'); 
                //return row[opts.textField].indexOf(q) == 0; 
                return row[opts.textField].indexOf(q)>-1;//将从头位置匹配改为任意匹配 
            }, 
            onLoadSuccess: function(){ 
                var partnerId = '${(saleOrder.partnerId)!}'; 
                if(partnerId){ 
                    $('#customerId').combobox('setValue',partnerId); 
                } 
            }, 
            onSelect: function(){ 
                var partnerId = $("#customerId").combotree("getValue"); 
                $("#business_partner_id").val(partnerId); 
                findBusinessPartnerContactByPartnerId(partnerId); 
                findSaleAddressByPartnerId(partnerId); 
            }, 
            onChange: function(newValue, oldValue){ 
                var v = $("#customerId").combotree("getText"); 
                var arr = nameStr.split(','); 
                var index = $.inArray(v, arr); 
                if(index < 0 ){    
                    $("#business_partner_id").val(''); 
                }else{ 
$("#business_partner_id").val($("#customerId").combobox("getValue")); 
} 
            }, 
            formatter: function(row){ 
                var opts = $(this).combobox('options'); 
                nameStr += row[opts.textField] + "," ; 
                return row[opts.textField]; 
            } 
        }); 

    });

 

 

Combobox用法和方法参数:

1、 需要引入class=" easyui-combobox”

2、 参数设置需要在data-options中设置

3、 属性参数配置：

valueField：基础数据值名称绑定到Combobox(提交值)

textField：基础数据的字段名称绑定的Combobox（显示值）

mode:定义当文本改变时如何加载列表数据，当设置为remote模式下，什么类型的用户将被发送http请求参数名为'q'的服务器，以获取新的数据。

url：从远程URL来加载列表数据

method：http方法检索列表数据

data：列表中被加载的数据

filter：定义如何过滤本地数据“模式”设置为'local'

formatter：定义如何呈现行

loader：定义如何从远程服务器加载数据

4、 事件：

onBeforeLoad(param): 操作之前将数据加载，返回false就取消这个荷载作用

onLoadSuccess():触发时，远程数据加载成功

onLoadError：触发时，远程数据加载错误

ONSELECT：触发，当用户选择一个列表项

onUnselect：触发，当用户取消选择一个列表

5、方法：

options()：返回选择对象

getData():返回加载的数据

loadData(data):加载列表数据

reload(url):重新加载远程数据列表

setValues(values):设置combobox的值数组

setValue(value):设置combobox的值

clear():清空combobox的值

select(value):选中指定的值

unselect(value):取消指定的值

 

 

 

二、创建combobox

官方API指出，创建combobox有三种方式：

1、通过<select>标签

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
    <option value="aa">aitem1</option>
</select>

 

2、通过<input>标签

<input id="cc" class="easyui-combobox" name="dept" data-options="valueField:'id',textField:'text',url:'get_data.php'" />

 

3、通过<input>标签和Javascript代码

<input id="cc" name="dept" value="aa">

$('#cc').combobox({
    url:'combobox_data.json',
    valueField:'id',
    textField:'text'
});

三者孰优孰劣就不赘述了。原理很简单：创建一个容器；把数据放入容器。创建容器最简单莫过于HTML标签，插入数据最灵活莫过于Javascript动态处理。

 

4、例子

生成combobox的数据一般从服务器数据获得，所以，通常的用法应该是这样：

$.ajax({
    url : url,
    async : false,  　　//同步方式运行
    success : function(d) {
        $("#organTypeNo").combobox({
            valueField : 'id',
            textField : 'text',
            editable : true,
            required : true,
            mode : 'local',
            data: d.rows
        });
    }
});

AJAX请求的JSON数据格式如下：

{
"total":1,
"rows":[{"id":"U010101","text":"鞋类"}]
}

 

三、combobox本地模糊查询

需求：查询下拉框指定数据

 

例如：输入汉字“北”

出现很多包含汉字“北”的结果，实际上，EasyUI自带的查询功能只能查出以“北”开头的内容，而无法查出“北”在其他位置的数据，这由EasyUI的filter所限制：

 

var opts = $(this).combobox('options');
return row[opts.textField].indexOf(q) == 0;

要实现自定义效果，需覆盖EasyUI的filter

 

 

//combobox可编辑
$.fn.combobox.defaults.editable = true;
//combobox自定义模糊查询
$.fn.combobox.defaults.filter = function(q, row){
    var opts = $(this).combobox('options');
    return row[opts.textField].indexOf(q) >= 0;
};

说明：filter属性仅用于过滤本地已经加载的数据，而不能过滤远程数据。filter实现的原理很简单：遍历所有数据并与输入字符匹配，匹配结果为true则显示，反之隐藏。EasyUI还有另一个BUG，当输入框输入的字符串和下拉框中某一个完全匹配时，EasyUI会自动选中这一项，再手动点击不会触发onSelect事件，与其联动的其他控件不会得到刷新，比如下面的代码

 

$.ajax({
        dataType: 'json',
        url : BasePath + "/org_organ_brand/list.json?sort=order_no&order=asc&rows=50000",
        success : function(d) {
            $('#brandNo').combobox({
                valueField : 'brandNo',
                textField : 'brandCname',
                editable:true ,
                required: true,
                data : d.rows,
                onSelect:function(){//通过onSelect事件来联动下一级下拉框
                    var brandNo = $('#brandNo').combobox('getValue');
                    var userId = $("#userId").val();
                    $.ajax({
                        dataType: 'json',
                        url : BasePath + "/org_organ_brand_detail/list.json?sort=order_no&order=desc&rows=50000&brandNo="+brandNo + "&userId=" + userId,
                        success : function(d1) {
                            $('#brandDetailNo').combotree({
                                editable:true,
                                multiple:true ,
                                required: true,
                                data : d1.rows
                            });
                        }
                    });
                }
            });
        }
    });

 

 

四、combobox数据库模糊查询

1、remote模式

如果我想在输入框输入字符然后实时向数据库查询，该怎么办呢？
官方API指出：

mode

string

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

local

将mode设为 ‘remote’，为该combobox指定URL和loadFilter属性

 

 

$("#organTypeNo").combobox({
    valueField : 'id',
    textField : 'text',
    editable : true,
    required : true,
    mode : 'remote',
    url : url,
    loadFilter : function (data) {return data.rows;}
});

设置loadFilter是为了处理返回的数据格式，如果格式正确，loadFilter无需配置。此时在下拉框输入数据就会去请求URL的内容并显示。

 

说明：输入的字符将以名为‘q’的参数传入后台，而不是添加在请求URL的后面，需要在request中捕获该参数作为数据库查询条件。

2、remote和local模式切换

需求：二级联动下拉框，下拉框二随下拉框一的值在local和remote之间切换，怎么实现呢？

 

当然是在下拉框一变化时判断其值，然后设置下拉框二的mode，代码如下：

 

//店铺特殊处理
if(organLevel == 6){
    $("#organTypeNo").combobox({
        valueField : 'id',
        textField : 'text',
        editable : true,
        required : true,
        mode : 'remote',
        url : BasePath + "/uc_store/list.json?sort=store_no&order=asc&rows=50",
        loadFilter : function (data) {return data.rows;}
    });
    return;
}
//正常处理非店铺情况
var url = '';
if(organLevel <= 3){
    url = BasePath + "/org_organ_type/list.json?rows=20&level=" + organLevel;
}
$.ajax({
    url : url,
    success : function(d) {
        $("#organTypeNo").combobox({
            valueField : 'id',
            textField : 'text',
            editable : true,
            required : true,
            mode : 'local',
            data: d.rows
        });
    }
});

说明：与‘remote’有关的属性有url和loadFilter，mode为‘local’时，url和loadFilter无效
但是很不幸，这样做浏览器报错，变更下拉框一的值的时候，下拉框二的mode不能随之变化（这应该是EasyUI的BUG），仅仅当下拉框一的值变化不导致下拉框二mode变化时，二级联动可以正常使用，一旦需要下拉框二切换mode，就会导致错误

 

怎么解决呢？
方法一：等EasyUI修复BUG；
方法二：下拉框一变更时重置下拉框二（把它清理的干干净净，不受之前设置的影响）

 

//初始化organTypeNo的combobox
var parent = $("#organTypeNo").parents("div.fitem");
$("#organTypeNo").combobox('destroy');
parent.append('<input id="organTypeNo" class="ipt" style="width:150px;"/>');

说明：因为EasyUI解析的缘故，无法使用jQuery的remove()和replaceWith()方法来实现重置，而且EasyUI没有有效的reset方法，只能完全删除后重建。
加上这样的代码应该正确了吧，运行项目，仍然报错：

 

还需将AJAX请求声明为同步请求

$.ajax({
    url : url,
    async : false,//声明为同步请求
    success : function(d) {
        $("#organTypeNo").combobox({
            valueField : 'id',
            textField : 'text',
            editable : true,
            required : true,
            mode : 'local',
            data: d.rows
        });
    }
});

 

 

 

 

本节主要给大家讲解组合框控件Combo Box。组合框控件Combo Box同样相当常见，例如，在Windows系统的控制面板上设置语言或位置时，有很多选项，用来进行选择的控件就是组合框控件。它为我们的日常操作提供了很多方便。

扩展自$.fn.combo.defaults。使用$.fn.combobox.defaults重写默认值对象。

下拉列表框显示一个可编辑文本框和下拉式列表，用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。

使用案例：

通过<select>元素、<input>标签、Javascript三种方法来创建下拉列表框。

1、通过<select>元素创建一个预定义结构的下拉列表框。

<select id=”cc” class=”easyui-combobox” name=”dept” style=”width:200px;”>
<option value=”aa”>aitem1</option>
<option>bitem2</option>
<option>bitem3</option>
<option>ditem4</option>
<option>eitem5</option>
</select>

2、通过<input>标签创建下拉列表框。

<input id=”cc” class=”easyui-combobox” name=”dept”
data-options=”valueField:’id’,textField:’text’,url:’get_data.php'” />

3、使用Javascript创建下拉列表框。

<input id=”cc” name=”dept” value=”aa”>

$(‘#cc’).combobox({
url:’combobox_data.json’,
valueField:’id’,
textField:’text’
});

创建2个有依赖关系的下拉列表框。

代码如下：

<input id=”cc1″ class=”easyui-combobox” data-options=”
valueField: ‘id’,
textField: ‘text’,
url: ‘get_data1.php’,
onSelect: function(rec){
var url = ‘get_data2.php?id=’+rec.id;
$(‘#cc2′).combobox(‘reload’, url);
}” />
<input id=”cc2″ class=”easyui-combobox” data-options=”valueField:’id’,textField:’text'” />

JSON数据格式化例子：

[{
“id”:1,
“text”:”text1″
},{
“id”:2,
“text”:”text2″
},{
“id”:3,
“text”:”text3″,
“selected”:true
},{
“id”:4,
“text”:”text4″
},{
“id”:5,
“text”:”text5″
}]

属性：

下拉列表框属性扩展自combo(自定义下拉框)，下拉列表框新增的属性如下：

属性名	属性值类型	描述
valueField	string	基础数据值名称绑定到该下拉列表框。
textField	string	基础数据字段名称绑定到该下拉列表框。
groupField	string	指定分组的字段名称（译者注：分组的字段由数据源决定）。（该属性自1.3.4版开始可用）
groupFormatter	function(group)	返回格式化后的分组标题文本，以显示分组项（该属性自1.3.4版开始可用） 代码示例：   $('#cc').combobox({ groupFormatter: function(group){ return '<span style="color:red">' + group + '</span>'; } });
mode	string	定义了当文本改变时如何读取列表数据。设置为’remote’时，下拉列表框将会从服务器加载数据。当设置为“remote”模式时，用户输入将被发送至名为’q’的HTTP请求参数到服务器检索新数据。
url	string	通过URL加载远程列表数据。
method	string	HTTP方法检索数据(POST / GET)。
data	array	数据列表加载。代码示例：   <input class="easyui-combobox" data-options=" valueField: 'label', textField: 'value', data: [{ label: 'java', value: 'Java' },{ label: 'perl', value: 'Perl' },{ label: 'ruby', value: 'Ruby' }]" />
filter	function	定义当’mode’设置为’local’时如何过滤本地数据，函数有2个参数： q：用户输入的文本。 row：列表行数据。 返回true的时候允许行显示。代码示例：   $('#cc').combobox({ filter: function(q, row){ var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) == 0; } });
formatter	function	定义如何渲染行。该函数接受1个参数：row。代码示例：   $('#cc').combobox({ formatter: function(row){ var opts = $(this).combobox('options'); return row[opts.textField]; } });
loader	function(param,success,error)	定义了如何从远程服务器加载数据。返回false可以忽略该动作。该函数具备如下参数： param：传递到远程服务器的参数对象。 success(data)：在检索数据成功的时候调用该回调函数。 error()：在检索数据失败的时候调用该回调函数。
loadFilter	function(data)	返回过滤后的数据并显示。（该属性自1.3.3版开始可用）

事件：

下拉列表框事件继承自combo(自定义下拉框)，下拉列表框新增的事件如下：

事件名	事件参数	描述
onBeforeLoad	param	在请求加载数据之前触发，返回false取消该加载动作。代码示例：   // 在加载服务器数据之前改变http请求参数的值 $('#cc').combobox({ onBeforeLoad: function(param){ param.id = 2; param.language = 'js'; } });
onLoadSuccess	none	在加载远程数据成功的时候触发。
onLoadError	none	在加载远程数据失败的时候触发。
onSelect	record	在用户选择列表项的时候触发。
onUnselect	record	在用户取消选择列表项的时候触发。

方法：

 

 

 

下拉列表框扩展自combo(自定义下拉框)，下拉列表框新增或重写的方法如下：

方法名	方法参数	描述
options	none	返回属性对象。
getData	none	返回加载数据。
loadData	data	读取本地列表数据。
reload	url	请求远程列表数据。通过’url’参数重写原始URL值。代码示例：   $('#cc').combobox('reload');     // 使用旧的URL重新载入列表数据 $('#cc').combobox('reload','get_data.php'); // 使用新的URL重新载入列表数据
setValues	values	设置下拉列表框值数组。代码示例：   $('#cc').combobox('setValues', ['001','002']);
setValue	value	设置下拉列表框的值。代码示例：   $('#cc').combobox('setValue', '001');
clear	none	清除下拉列表框的值。
select	value	选择指定项。
unselect	value	取消选择指定项。