欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » JQuery EasyUI 1.3.6官方API文档中文版 » 正文

ComboGrid(数据表格下拉框)

创建时间:2014年09月02日 09:38  阅读次数:(10388)
分享到:

ComboGrid(数据表格下拉框)

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

数据表格下拉框结合了可编辑文本框控件和下拉数据表格面板控件,该控件允许用户快速查找和选择,并且该控件提供了键盘导航支持,对行进行筛选。

 

依赖关系

  • combo
  • datagrid

 

使用案例

创建数据表格下拉框

1. 使用标签创建一个数据表格下拉框。

  1. <select id="cc" class="easyui-combogrid" name="dept" style="width:250px;"  
  2.         data-options="   
  3.             panelWidth:450,   
  4.             value:'006',   
  5.             idField:'code',   
  6.             textField:'name',   
  7.             url:'datagrid_data.json',   
  8.             columns:[[   
  9.                 {field:'code',title:'Code',width:60},   
  10.                 {field:'name',title:'Name',width:100},   
  11.                 {field:'addr',title:'Address',width:120},   
  12.                 {field:'col4',title:'Col41',width:100}   
  13.             ]]   
  14.         "></select>  

2. 使用Javascript通过已经定义的<select>或<input>标签来创建数据表格下拉框。

  1. <input id="cc" name="dept" value="01" />  
  1. $('#cc').combogrid({   
  2.     panelWidth:450,   
  3.     value:'006',   
  4.     
  5.     idField:'code',   
  6.     textField:'name',   
  7.     url:'datagrid_data.json',   
  8.     columns:[[   
  9.         {field:'code',title:'Code',width:60},   
  10.         {field:'name',title:'Name',width:100},   
  11.         {field:'addr',title:'Address',width:120},   
  12.         {field:'col4',title:'Col41',width:100}   
  13.     ]]   
  14. });  
自动完成功能

让我们为数据表格下拉框控件添加高级的自动完成功能。下拉数据表格会根据用户输入显示适合的结果。

  1. $('#cc').combogrid({   
  2.     delay: 500,   
  3.     mode: 'remote',   
  4.     url: 'get_data.php',   
  5.     idField: 'id',   
  6.     textField: 'name',   
  7.     columns: [[   
  8.         {field:'code',title:'Code',width:120,sortable:true},   
  9.         {field:'name',title:'Name',width:400,sortable:true}   
  10.     ]]   
  11. });  

在服务器端,参数'q'必须先检索。用户可以查询数据库,然后返回一个SQL查询结果JSON格式给浏览器

get_data.php:

  1. $q = isset($_POST['q']) ? $_POST['q'] : '';  // the request parameter   
  2. // query database and return JSON result data   
  3. $rs = mysql_query("select * from item where name like '$q%'");   
  4. echo json_encode(...);  

 

属性

数据表格下拉框的属性扩展自combo(自定义下拉框)和datagrid(数据表格),树形下拉框新增属性如下:

属性名 属性值类型 描述 默认值
loadMsg string 在数据表格加载远程数据的时候显示消息。 null
idField string ID字段名称。 null
textField string 要显示在文本框中的文本字段 null
mode string 定义在文本改变的时候如何读取数据网格数据。设置为'remote',数据表格将从远程服务器加载数据。当设置为'remote'模式的时候,用户输入将会发送到名为'q'的http请求参数,向服务器检索新的数据。 local
filter function(q, row) 定义在'mode'设置为'local'的时候如何选择本地数据,返回true时则选择该行。

代码示例:

$('#cc').combogrid({
	filter: function(q, row){
		var opts = $(this).combogrid('options');
		return row[opts.textField].indexOf(q) == 0;
	}
});

 

事件

数据表格下拉框事件完全扩展自combo(自定义下拉框)和datagrid(数据表格)。

 

方法

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

方法名 方法参数 描述
options none 返回属性对象。
grid none 返回数据表格对象。下面的例子显示了如何获取选择的行:
var g = $('#cc').combogrid('grid');	// 获取数据表格对象
var r = g.datagrid('getSelected');	// 获取选择的行
alert(r.name);
setValues values 设置组件值数组。

代码示例:

$('#cc').combogrid('setValues', ['001','007']);
setValue value 设置组件值。

代码示例:

$('#cc').combogrid('setValue', '002');
clear none 清除组件的值。

来源:
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf】

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论1条
  • #1楼  评论人:5  评论时间:2016-8-23 16:43:39
  • 5
发表评论:
留言人:
内  容:
请输入问题 84+88=? 的结果(结果是:172)
结  果: