网博开发者社区

 找回密码
 立即注册
搜索
查看: 94|回复: 0

jQuery EasyUI 入门(20)

[复制链接]

44

主题

51

帖子

198

积分

老师

积分
198
发表于 2017-11-14 12:28:28 | 显示全部楼层 |阅读模式
ComboBox(下拉列表框)
扩展自$.fn.combo.defaults。使用$.fn.combobox.defaults重写默认值对象。
下拉列表框显示一个可编辑文本框和下拉式列表,用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。

依赖关系   combo 使用案例
通过<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>

        <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>
通过<input>标签创建下拉列表框。


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

        <input id="cc" class="easyui-combobox" name="dept"                data-options="valueField:'id',textField:'text',url:'get_data.php'" />
使用Javascript创建下拉列表框。


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

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


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

        $('#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'" />

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

        [{                "id":1,                "text":"text1"        },{                "id":2,                "text":"text2"        },{                "id":3,                "text":"text3",                "selected":true        },{                "id":4,                "text":"text4"        },{                "id":5,                "text":"text5"        }]
属性
下拉列表框属性扩展自combo(自定义下拉框),下拉列表框新增的属性如下:

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


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

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


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

方法名方法参数描述
optionsnone返回属性对象。
getDatanone返回加载数据。
loadDatadata读取本地列表数据。
reloadurl请求远程列表数据。通过'url'参数重写原始URL值。 代码示例:
$('#cc').combobox('reload');      // 使用旧的URL重新载入列表数据$('#cc').combobox('reload','get_data.php');  // 使用新的URL重新载入列表数据
setValuesvalues设置下拉列表框值数组。 代码示例:
$('#cc').combobox('setValues', ['001','002']);
setValuevalue设置下拉列表框的值。 代码示例:
$('#cc').combobox('setValue', '001');
clearnone清除下拉列表框的值。
selectvalue选择指定项。
unselectvalue取消选择指定项。


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|网博开发者社区 ( 苏ICP备05021715号-1 )

GMT+8, 2018-1-23 22:52 , Processed in 0.079798 second(s), 26 queries .

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表