EasyUI中combobox的使用方法和一个代码实例

Posted 2020-09-26 古兰精

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了EasyUI中combobox的使用方法和一个代码实例相关的知识，希望对你有一定的参考价值。

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):取消指定的值

代码实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>combobox</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="jQuery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script type="text/javascript">
//动态加载数据集文件数据
function loadData(){
    $(‘#cc‘).combobox({
        url:‘combobox_data.json‘,
        valueField:‘id‘,
        textField:‘text‘
    });
}

//设置下拉框的值
function setValue(){
    $("#cc").combobox("setValue","动态添加的列表值");
}

//获取当前选择的值
function getValue(){
    var selectText=$("#cc").combobox("getValue");
    alert("当前选择的是:"+selectText);
}
//禁用当前选择框
function disable(){
    $("#cc").combobox("disable");
}
//启用当前选择框
function enable(){
    $("#cc").combobox("enable");
}

$(‘#cc1‘).combobox({
    filter: function(q, row){
        var opts = $(this).combobox(‘options‘);
        return row[opts.textField].indexOf(q) == 0;
    },
    formatter: function(row){
        var opts = $(this).combobox(‘options‘);
        return row[opts.textField];
    }
});
</script>
</head>
<body>
<h2>ComboBox</h2>
<div style="margin:10px 0;">
<a href="#" class="easyui-linkbutton" onclick="loadData()">LoadData</a>
<a href="#" class="easyui-linkbutton" onclick="setValue()">SetValue</a>
<a href="#" class="easyui-linkbutton" onclick="getValue()">GetValue</a>
<a href="#" class="easyui-linkbutton" onclick="disable()">Disable</a>
<a href="#" class="easyui-linkbutton" onclick="enable()">Enable</a>
</div>
<p>单项选择的ComboBox: </p>
<select id="cc" class="easyui-combobox" name="state" style="width:200px;" data-options="required:true,width:150">
<option value="AL">Alabama</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH" selected>Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
</select>
<br/>
<p>本地数据源的Combobox</p>
<input class="easyui-combobox" id="cc1" 
    data-options="valueField:‘lable‘,textField:‘value‘,
    data:[{
                lable:‘Java‘,
                value:‘java‘
            },
            {
                lable:‘liferay‘,
                value:‘liferay‘
            },
            {
                lable:‘jiar‘,
                value:‘jiar‘
            },
            {
                lable:‘ruby‘,
                value:‘ruby‘
            }
        ]"/>
<br />
<p>来源网页数据的Combobox</p>
<input class="easyui-combobox" id="cc2" 
    data-options=" valueField: ‘id‘, textField: ‘text‘,url: ‘get_data1.php‘,
    onSelect: function(rec){
            var url = ‘get_data2.php?id=‘+rec.id;
            $(‘#cc3‘).combobox(‘reload‘, url);
        }" />
<input id="cc3" class="easyui-combobox" data-options="valueField:‘id‘,textField:‘text‘" />
<br/>
<p>多项选择的ComboBox: </p>
<select id="cc4" class="easyui-combobox" name="state" style="width:200px;" 
    data-options="url:‘combobox_data.json‘,
        valueField:‘id‘,
        textField:‘text‘,
        multiple:true,
        panelHeight:‘auto‘
        "/>
</body>
</html>

以上是关于EasyUI中combobox的使用方法和一个代码实例的主要内容，如果未能解决你的问题，请参考以下文章

jsp中使用easyui combobox时，为啥选择项前后会有好长的空格

easyui combobox 动态加载的两种方法

easyui combobox 用代码赋值不触发change事件,选择值会触发

jquery easyui combobox 添加添加选择项

关于easyui combobox

easyui combobox如何搞一个没有值的选项。