EasyUI ComboGrid（数据表格下拉框）_easyui下拉框 string数组-CSDN博客

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

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

http://blog.csdn.net/hsliwei/article/details/9134219

Properties

这些属性继承至 combo,下面是combobox的一些新增属性.

Name	Type	Description	Default
valueField	string	绑定到这个combobox的基础数据值名.	value
textField	string	绑定到这个combobox的数据字段名.	text
mode	string	当文本改变时定义如何加载显示列表数据.如果设置为'remote' combobox从远程服务器加载数据.当设置为'remote'模式时, 用户输入的信息将发送作为http请求参数,参数名为'q'到服务器检索新的数据.	local
url	string	一个从远程服务器加载列表数据的URL.	null
method	string	检索数据的http请求方法.	post
data	array	需要加载到列表的数据. 示例代码: <input class="easyui-combobox" data-options=" valueField: 'label', textField: 'value', data: [{ label: 'java', value: 'Java' },{ label: 'perl', value: 'Perl' },{ label: 'ruby', value: 'Ruby' }]" />	null
filter	function	定义如何过滤本地数据,当'mode'设置为'local'的时候. 这个函数提供两个参数: q: 用户输入的文本. row: 列表的行数据. 返回true 允许行显示 . 示例代码: $('#cc').combobox({ filter: function(q, row){ var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) == 0; } });
formatter	function	定义如何呈现行. 这个函数提供一个参数 :row. 示例代码: $('#cc').combobox({ formatter: function(row){ var opts = $(this).combobox('options'); return row[opts.textField]; } });
loader	function(param,success,error)	定义如何从远程服务器加载数据. 返回false终止这个动作.这个函数提供一下参数: param:传递给远程服务器的参数对象. success(data): 当检索数据成功这个回调函数将被调用. error():当检索数据失败(异常,而不是返回空数据的时候)这个函数将被调用.	json loader

Events

事件继承至 combo, 以下是combobox的新增事件.

Name	Parameters	Description
onBeforeLoad	param	一个请求在加载数据之前触发,返回false取消这个加载动作. 示例代码: // 在从远程服务器加载数据之前改变请求参数 $('#cc').combobox({ onBeforeLoad: function(param){ param.id = 2; param.language = 'js'; } });
onLoadSuccess	none	当远程数据加载成功之后触发.
onLoadError	none	远程数据加载出错触发.
onSelect	record	当用户选择一个列表项的时候触发.
onUnselect	record	当用户取消选择一个列表项的时候触发.

Methods

方法继承至 combo,以下是combobox的新增的或者是重写的方法.

Name	Parameter	Description
options	none	返回 options 对象.
getData	none	返回加载数据.
loadData	data	返回本地列表数据.
reload	url	请求远程服务器列表数据.传入'url'参数重写原始的URL值. 示例代码: $('#cc').combobox('reload'); //使用原始URL重新加载列表数据 $('#cc').combobox('reload','get_data.php'); //使用新的URL重新加载列表数据
setValues	values	设置 combobox 值数组. 示例代码: $('#cc').combobox('setValues', ['001','002']);
setValue	value	设置 combobox 值. 示例代码: $('#cc').combobox('setValues', '001');
clear	none	清除 combobox 值.
select	value	选择特定的项.
unselect	value	取消特定的选择项.
$('#Id').combogrid('grid').datagrid('selectRecord',value值); 用来设置默认选中 $('#goodsSelect').combogrid('grid').datagrid("clearSelections");清除选择

combox 例子

//打开运输工具BOX
   function open_Transport_box(){
       var transTool= $('#transTool').combogrid({
           rownumbers:true,//显示序号
           pageSize: 5,//每页显示的记录条数，默认为10
            pageList: [5,10],//可以设置每页记录条数的列表
           pagination: true,//是否显示分页栏
           nowrap: true,//数据是否换行
           striped: true,//数据背景颜色交替
           panelWidth:400,//容器宽度
           fitColumns:true,//自适应列宽
           width:120,
           //delay:300,
           mode: 'remote', //远程加载数据
           idField:'x_code',//唯一列
           textField:'x_cn',//显示文本列
           url:'transportToolAction.do?method=findTransToolCode',//URL
           columns:[[
               {field:'x_code',title:'注册号',width:60},
               {field:'x_name',title:'企业名称',width:100},
               {field:'x_cn',title:'x_cn',hidden:true,width:120}
           ]],
           //点击赋值
           onClickRow:function(){
               $('#transTool').val( $('#transTool').combogrid('getValue'));
           },onLoadSuccess:function(){
               var grid= $('#transTool').combogrid('grid');
               var rs=$(grid).datagrid('getRows');
               if(rs.length>0){
                   var d=rs[0];
                   $('#transTool').combogrid('grid').datagrid('selectRecord',d.x_code);
               }
           }
       });
       //回车赋值
       transTool.combogrid('textbox').keyup(function(event) {
           if (event.keyCode == '13') {
               $('#transTool').val( $('#transTool').combogrid('getValue'));
           }
       });
       transTool.combogrid('textbox').blur(function() {
           alert(23);
       });
//       //失去焦点赋值
//       $("input").blur(function(){
//           alert($('#transTool').combogrid('getValue'));
//           $('#transTool').val( $('#transTool').combogrid('getValue'));
//       });
   }