EasyUI中Combox组合框的简单使用

我不是女神ヾ 2023-10-18 20:19 21阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

### 用法 ###

从带有预定义结构的 <select> 元素创建组合框（combobox）。

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
    
    <option value="aa">aitem1</option>
    
    <option>bitem2</option>
    
    <option>bitem3</option>
    
    <option>ditem4</option>
    
    <option>eitem5</option>
    
    </select>

从 <input> 标记创建组合框（combobox）。

使用 javascript 创建组合框（combobox）。

<input id="cc" name="dept" value="aa">
    
    $('#cc').combobox({
    
    url:'combobox_data.json',
    
    valueField:'id',
    
    textField:'text'
    
    });

创建两个依赖的组合框（combobox）。

json 数据格式的示例：

[{
    
    "id":1,
    
    "text":"text1"
    
    },{
    
    "id":2,
    
    "text":"text2"
    
    },{
    
    "id":3,
    
    "text":"text3",
    
    "selected":true
    
    },{
    
    "id":4,
    
    "text":"text4"
    
    },{
    
    "id":5,
    
    "text":"text5"
    
    }]

### 属性 ###

该属性扩展自组合（combo），下面是为组合框（combobox）添加的属性。

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>valueField</td> 
   <td>string</td> 
   <td>绑定到该组合框（ComboBox）的 value 上的基础数据的名称。</td> 
   <td>value</td> 
  </tr> 
  <tr> 
   <td>textField</td> 
   <td>string</td> 
   <td>绑定到该组合框（ComboBox）的 text 上的基础数据的名称。</td> 
   <td>text</td> 
  </tr> 
  <tr> 
   <td>groupField</td> 
   <td>string</td> 
   <td>指示要被分组的字段。该属性自版本 1.3.4 起可用。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>groupFormatter</td> 
   <td>function(group)</td> 
   <td>返回要显示在分组项目上的分组文本。该属性自版本 1.3.4 起可用。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#cc').combobox({ </li> 
     <li>groupFormatter: function(group){ </li> 
     <li>return '&lt;span style="color:red"&gt;' + group + '&lt;/span&gt;';</li> 
     <li>}</li> 
     <li>});</li> 
    </ol></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>mode</td> 
   <td>string</td> 
   <td>定义在文本改变时如何加载列表数据。如果组合框（combobox）从服务器加载就设置为 'remote'。当设置为 'remote' 模式时，用户输入的值将会被作为名为 'q' 的 http 请求参数发送到服务器，以获取新的数据。</td> 
   <td>local</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>string</td> 
   <td>从远程加载列表数据的 URL 。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>method</td> 
   <td>string</td> 
   <td>用来检索数据的 http 方法。</td> 
   <td>post</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td>array</td> 
   <td>被加载的列表数据。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>&lt;input class="easyui-combobox" data-options="</li> 
     <li>valueField: 'label',</li> 
     <li>textField: 'value',</li> 
     <li>data: [{ </li> 
     <li>label: 'java',</li> 
     <li>value: 'Java'</li> 
     <li>},{ </li> 
     <li>label: 'perl',</li> 
     <li>value: 'Perl'</li> 
     <li>},{ </li> 
     <li>label: 'ruby',</li> 
     <li>value: 'Ruby'</li> 
     <li>}]" /&gt;</li> 
    </ol></td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>filter</td> 
   <td>function</td> 
   <td>定义当 'mode' 设置为 'local' 时如何过滤本地数据。该函数有两个参数：<br> q：用户输入的文本。<br> row：列表中的行数据。<br> 返回 true 则允许显示该行。<br><br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#cc').combobox({ </li> 
     <li>filter: function(q, row){ </li> 
     <li>var opts = $(this).combobox('options');</li> 
     <li>return row[opts.textField].indexOf(q) == 0;</li> 
     <li>}</li> 
     <li>});</li> 
    </ol></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>formatter</td> 
   <td>function</td> 
   <td>定义如何呈现行。该函数有一个参数：row。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#cc').combobox({ </li> 
     <li>formatter: function(row){ </li> 
     <li>var opts = $(this).combobox('options');</li> 
     <li>return row[opts.textField];</li> 
     <li>}</li> 
     <li>});</li> 
    </ol></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>loader</td> 
   <td>function(param,success,error)</td> 
   <td>定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数：<br> param：要传到远程服务器的参数对象。<br> success(data)：当获取数据成功时将被调用的回调函数。<br> error()：当获取数据失败时将被调用的回调函数。</td> 
   <td>json loader</td> 
  </tr> 
  <tr> 
   <td>loadFilter</td> 
   <td>function(data)</td> 
   <td>返回要显示的过滤数据。该属性自版本 1.3.3 起可用。</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

### 事件 ###

该事件扩展自组合（combo），下面是为组合框（combobox）添加的事件。

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>onBeforeLoad</td> 
   <td>param</td> 
   <td>在请求加载数据之前触发，返回 false 则取消加载动作。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>// change the http request parameters before load data from server</li> 
     <li>$('#cc').combobox({ </li> 
     <li>onBeforeLoad: function(param){ </li> 
     <li>param.id = 2;</li> 
     <li>param.language = 'js';</li> 
     <li>}</li> 
     <li>});</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>onLoadSuccess</td> 
   <td>none</td> 
   <td>当远程数据加载成功时触发。</td> 
  </tr> 
  <tr> 
   <td>onLoadError</td> 
   <td>none</td> 
   <td>当远程数据加载失败时触发。</td> 
  </tr> 
  <tr> 
   <td>onSelect</td> 
   <td>record</td> 
   <td>当用户选择一个列表项时触发。</td> 
  </tr> 
  <tr> 
   <td>onUnselect</td> 
   <td>record</td> 
   <td>当用户取消选择一个列表项时触发。</td> 
  </tr> 
 </tbody> 
</table>

### 方法 ###

该方法扩展自组合（combo），下面是为组合框（combobox）添加或重写的方法。

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>none</td> 
   <td>返回选项（options）对象。</td> 
  </tr> 
  <tr> 
   <td>getData</td> 
   <td>none</td> 
   <td>返回加载的数据。</td> 
  </tr> 
  <tr> 
   <td>loadData</td> 
   <td>data</td> 
   <td>加载本地列表数据。</td> 
  </tr> 
  <tr> 
   <td>reload</td> 
   <td>url</td> 
   <td>请求远程的列表数据。传 'url' 参数来重写原始的 URL 值。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#cc').combobox('reload'); // reload list data using old URL</li> 
     <li>$('#cc').combobox('reload','get_data.php'); // reload list data using new URL</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>setValues</td> 
   <td>values</td> 
   <td>设置组合框（combobox）值的数组。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#cc').combobox('setValues', ['001','002']);</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>setValue</td> 
   <td>value</td> 
   <td>设置组合框（combobox）的值。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#cc').combobox('setValue', '001');</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>clear</td> 
   <td>none</td> 
   <td>清除组合框（combobox）的值。</td> 
  </tr> 
  <tr> 
   <td>select</td> 
   <td>value</td> 
   <td>选择指定的选项。</td> 
  </tr> 
  <tr> 
   <td>unselect</td> 
   <td>value</td> 
   <td>取消选择指定的选项。</td> 
  </tr> 
 </tbody> 
</table>

## 实现 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
        <script type="text/javascript" src="/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    <select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
        <option value="aa">aitem1</option>
        <option>bitem2</option>
        <option>bitem3</option>
        <option>ditem4</option>
        <option>eitem5</option>
    </select>
    </body>
    </html>

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190621203230566.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70