站内搜索：
首页 >> 前端 >> 内容
EasyUI组合框

时间：2016/7/30 9:19:57

组合框（combobox）显示一个可编辑的文本框和下拉列表，用户可以从下拉列表中选择一个或多个值。用户可以直接输入文本到列表的顶部，或者从列表中选择一个或多个现成的值。

1、用法

（1）、从带有预定义结构的 <select> 元素创建组合框（combobox）。

<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> 标记创建组合框（combobox）。

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

（3）、使用 javascript 创建组合框（combobox）。

<input id="cc" name="dept" value="aa">
$('#cc').combobox({
    url:'combobox_data.json',
    valueField:'id',
    textField:'text'
});

（4）、创建两个依赖的组合框（combobox）。

<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"
}]

2、属性

该属性扩展自组合（combo），下面是为组合框（combobox）添加的属性。

名称

类型

描述

默认值

valueField

string

绑定到该组合框（ComboBox）的 value 上的基础数据的名称。

value

textField

string

绑定到该组合框（ComboBox）的 text 上的基础数据的名称。

text

groupField

string

指示要被分组的字段。该属性自版本 1.3.4 起可用。

null

groupFormatter

function(group)

返回要显示在分组项目上的分组文本。该属性自版本 1.3.4 起可用。

mode

string

定义在文本改变时如何加载列表数据。如果组合框（combobox）从服务

器加载就设置为 'remote'。当设置为 'remote' 模式时，用户输入的

值将会被作为名为 'q' 的 http 请求参数发送到服务器，以获取新的数据。

local

url

string

从远程加载列表数据的 URL 。

null

method

string

用来检索数据的 http 方法。

post

data

array

被加载的列表数据。

null

filter

function

定义当 'mode' 设置为 'local' 时如何过滤本地数据。该函数有两个参数：
q：用户输入的文本。
row：列表中的行数据。
返回 true 则允许显示该行。

formatter

function

定义如何呈现行。该函数有一个参数：row。

loader

function(param,success,error)

定义如何从远程服务器加载数据。返回 false 则取消该动作。

该函数有下列参数：
param：要传到远程服务器的参数对象。
success(data)：当获取数据成功时将被调用的回调函数。
error()：当获取数据失败时将被调用的回调函数。

json loader

loadFilter

function(data)

返回要显示的过滤数据。该属性自版本 1.3.3 起可用。

3、事件

该事件扩展自组合（combo），下面是为组合框（combobox）添加的事件。

名称

参数

描述

onBeforeLoad

param

在请求加载数据之前触发，返回 false 则取消加载动作。

onLoadSuccess

none

当远程数据加载成功时触发。

onLoadError

none

当远程数据加载失败时触发。

onSelect

record

当用户选择一个列表项时触发。

onUnselect

record

当用户取消选择一个列表项时触发。

4、方法

该方法扩展自组合（combo），下面是为组合框（combobox）添加或重写的方法。

名称

参数

描述

options

none

返回选项（options）对象。

getData

none

返回加载的数据。

loadData

data

加载本地列表数据。

reload

url

请求远程的列表数据。传 'url' 参数来重写原始的 URL 值。

setValues

values

设置组合框（combobox）值的数组。

setValue

value

设置组合框（combobox）的值。

clear

none

清除组合框（combobox）的值。

select

value

选择指定的选项。

unselect

value

取消选择指定的选项。

5、实例

（1）、基础组合

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../css/easyui.css">
<link rel="stylesheet" type="text/css" href="../css/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic ComboBox</h2>
<p>Type in ComboBox to try auto complete.</p>
<p style="margin:20px 0"></p>
<select class="easyui-combobox" name="state" style="width:200px;">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
</select>
</body>
</html>

EasyUI组合框

<喎?http://www.weiyer.com/Search.asp?KeyWord=/kf/ware/vc/" target="_blank" class="keylink">vcD4KPGgyPqOoMqOpPHN0cm9uZz6horbg0NDX6brPv/I8L3N0cm9uZz48L2gyPgo8cD48cHJlIGNsYXNzPQ=="brush:sql;"><pre name="code" class="html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Multiline ComboBox - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../css/easyui.css"> <link rel="stylesheet" type="text/css" href="../css/icon.css"> <link rel="stylesheet" type="text/css" href="../css/demo.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> </head> <body> <h2>Multiline ComboBox</h2> <p>This example shows how to create a multiline ComboBox.</p> <p style="margin:20px 0"></p> <select class="easyui-combobox" name="state" data-options="multiple:true,multiline:true" style="width:200px;height:50px"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> </select> </body> </html>





EasyUI组合框


（3）、组合框组


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Group ComboBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../css/easyui.css">
<link rel="stylesheet" type="text/css" href="../css/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Group ComboBox</h2>
<p>This example shows how to display combobox items in groups.</p>
<p style="margin:20px 0">
<input id="cc" class="easyui-combobox" name="browser" style="width:280px;" data-options="
url: 'combobox_data2.json',
method: 'get',
valueField:'value',
textField:'text',
groupField:'group'
">
</body>
</html>


EasyUI组合框






（4）、多项选择


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Select - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../css/easyui.css">
<link rel="stylesheet" type="text/css" href="../css/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Load Dynamic ComboBox Data</h2>
<p>Drop down the panel and select multiple items.</p>
<p style="margin:20px 0"></p>
<input class="easyui-combobox"
name="language"
data-options="
url:'combobox_data1.json',
method:'get',
valueField:'id',
textField:'text',
multiple:true,
panelHeight:'auto'
">
 
</body>
</html>


EasyUI组合框






（5）、组合框操作


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ComboBox Actions - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../css/easyui.css">
<link rel="stylesheet" type="text/css" href="../css/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<h2>ComboBox</h2>
<p>Click the buttons below to perform actions.</p>
<p style="margin:20px 0;">
<a href="javascript：void(0)" class="easyui-linkbutton" onclick="setvalue()">SetValue</a>
<a href="javascript：void(0)" class="easyui-linkbutton" onclick="alert($('#state').combobox('getValue'))">GetValue</a>
<a href="javascript：void(0)" class="easyui-linkbutton" onclick="$('#state').combobox('disable')">Disable</a>
<a href="javascript：void(0)" class="easyui-linkbutton" onclick="$('#state').combobox('enable')">Enable</a>
</p>
<script type="text/javascript">
function setvalue(){
$.messager.prompt('SetValue','Please input the value(AL,AZ,UT,etc):',function(v){
if (v){
$('#state').combobox('setValue',v);
}
});
}
</script>
<select id="state" class="easyui-combobox" name="state" style="width:200px;">
<option value="AL">Alabama</option>
<option value="AK" selected>Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
</select>
</body>
</html>


EasyUI组合框








						

		






  • 上一篇：JavaSript模块化---AMD&&CMD
  • 下一篇：Web性能优化：图片优化
    • 

    

    
  
    用户评论
    
  
    
  
    

    


    
  
    相关文章
    
  
    
  
    

    
        


    返回顶部
    

    易笔记手机版