combogrid（数据表格下拉框）

含义

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

依赖

• combo
• datagrid

使用

标签创建

javascript创建

$('#cc').combogrid({    
    panelWidth:450,    
    value:'006',    
    idField:'code',    
    textField:'name',    
    url:'datagrid_data.json',    
    columns:[[    
        {field:'code',title:'Code',width:60},    
        {field:'name',title:'Name',width:100},    
        {field:'addr',title:'Address',width:120},    
        {field:'col4',title:'Col41',width:100}    
    ]]    
}); 

属性

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

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

事件

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

方法

方法名	参数	含义	例子
options	none	返回属性对象
grid	node	返回数据表格对象	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	清除组件的值

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

方法名	参数	含义	例子
options	none	返回属性对象
grid	node	返回数据表格对象	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	清除组件的值

我的demo

image

  
  
  
  
  
  
  
  


  
Basic Form combogrid 
    

    

        

          
combogrid
          
        

        


          combogrid action

          

            SetValue
            GetValue
            Disable
            Enable
          
          
        

        


          
combogrid action
          
        

        


          
combogrid change