ComboGrid Document

扩展自$.fn.combo.defaults和$.fn.datagrid.defaults。使用$.fn.combogrid.defaults重写默认值对象。
数据表格下拉框结合了可编辑文本框控件和下拉数据表格面板控件，该控件允许用户快速查找和选择，并且该控件提供了键盘导航支持，对行进行筛选。

依赖关系：

• combo
• datagrid

用法：

创建数据表格下拉框

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

				
<select id="cc" class="easyui-combogrid" name="dept" style="width:250px;"   
        data-options="    
            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}    
            ]]    
        "></select>  
				
			

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

				
<input id="cc" name="dept" value="01" />  
<script type="text/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}    
    ]]    
});  
</script>
				
			

自动完成功能

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

				
<script type="text/javascript">
$('#cc').combogrid({    
    delay: 500,    
    mode: 'remote',    
    url: 'get_data.php',    
    idField: 'id',    
    textField: 'name',    
    columns: [[    
        {field:'code',title:'Code',width:120,sortable:true},    
        {field:'name',title:'Name',width:400,sortable:true}    
    ]]    
});  
</script>
				
			

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

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

属性：

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

				
<script type="text/javascript">
$('#cc').combogrid({
  filter: function(q, row){a
    var opts = $(this).combogrid('options');
    return row[opts.textField].indexOf(q) == 0;
  }
});
</script>
				
			

事件：

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

方法：

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

				
<script type="text/javascript">
var g = $('#cc').combogrid('grid'); // 获取数据表格对象
var r = g.datagrid('getSelected');  // 获取选择的行
alert(r.name);
</script>
				
			

				
<script type="text/javascript">
$('#cc').combogrid('setValues', ['001','007']);
$('#cc').combogrid('setValues', ['001','007',{id:'008',name:'name008'}]);
</script>
				
			

				
<script type="text/javascript">
$('#cc').combogrid('setValue', '002');
$('#cc').combogrid('setValue', {id:'003',name:'name003'});
</script>