jQuery EasyUI - ComboBox组合框

最新推荐文章于 2017-11-30 15:33:50 发布

奋斗中的小白123

最新推荐文章于 2017-11-30 15:33:50 发布

阅读量625

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/zlin_221/article/details/46698627

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery EasyUI - ComboBox组合框

例子：

从后台传过来的数据为json格式

[

{"menuname":"xx管理","description":"可以对xx进行管理"},

{"menuname":"xx管理","description":"可以对xx进行管理"}

]

//打开一个窗口，窗口在页面内写好，窗口默认关闭
   $(document).ready(function(){
   $('#menu').combobox({
   url:'<%=basePath%>menu/findmenustoadd.action?rolename='+encodeURI(encodeURI(rolename)),
   valueField:'description',
   textField:'menuname',
   onSelect:function(record){
   $("#description").empty();
   $("#description").append(record.description);
   }
});
   $('#newmenuwin').window('open');
   });

jQuery EasyUI - ComboBox组合框 API

作者：字体：[ 增加减小] 类型：转载

jQuery EasyUI API 中文文档 - ComboBox组合框,使用jQuery EasyUI的朋友可以参考下。

扩展自 $.fn.combo.defaults。用 $.fn.combobox.defaults 重写了 defaults。

依赖
combo
用法
<select id="cc" name="dept" style="width:200px;">
<option value="aa">aitem1</option>
<option>bitem2</option>
<option>bitem3</option>
<option>ditem4</option>
<option>eitem5</option>
</select>
<input id="cc" name="dept" value="aa">

复制代码代码如下:

$('#cc').combobox({
url:'combobox_data.json',
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，下列是为combobox 增加的特性。

名称	类型	说明	默认值
valueField	string	绑定到 ComboBox 的 value 上的基础数据的名称。	value
textField	string	绑定到 ComboBox 的 text 上的基础数据的名称。	text
mode	string	定义在文本改变时如何加载列表数据。如果组合框从服务器加载就设为 'remote' 。	local
url	string	从远程加载列表数据的 URL 。	null
method	string	用来检索数据的 http method 。	post
data	array	被加载的列表数据。	null
filter	function	定义当 'mode' 设为 'local' 时如何过滤数据。这个函数有两个参数： q：用户输入的文字 row：列表中的行数据。返回 true 就允许显示该行。
formatter	function	定义如何呈现行。这个函数有一个参数：row。

事件

其事件扩展自 combo，下列是为 combobox 增加的事件。

名称	参数	说明
onLoadSuccess	none	当远程数据加载成功时触发。
onLoadError	none	当远程数据加载失败时触发。
onSelect	record	当用户选择一个列表项时触发。
onUnselect	record	当用户取消选择一个列表项时触发。

方法

其方法扩展自 combo，下列是为 combobox 追加或重写的方法。

名称	参数	说明
options	none	返回 options 对象。
getData	none	返回加载的数据。
loadData	data	加载本地列表数据。
reload	url	请求远程的列表数据。
setValues	values	把数组设置为组合框的值。
setValue	value	设置组合框的值。
clear	none	清除组合框的值。
select	value	选择指定的选项。
unselect	value	取消选择指定的选项。

风流涕淌翻译

百度搜索答案：

$('#a').combobox({
  url:'123.action',
  valueField:'id',   
  textField:'text',
  onSelect:function(record){
    var value = record.id;
    var text = record.text;

  }
});