EasyUI-ComboGrid（数据表格下拉框）

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

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

依赖关系

• combo
  
• datagrid
  

使用案例

创建数据表格下拉框

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

1.  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.         “  
    

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

1.  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(数据表格)，树形下拉框新增属性如下：

事件

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

方法

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

声明: 除非转自他站（如有侵权，请联系处理）外，本文采用 BY-NC-SA 协议进行授权 | 智乐兔
转载请注明：转自《EasyUI-ComboGrid（数据表格下拉框）》
本文地址：https://www.zhiletu.com/archives-2484.html
关注公众号：