第二百二十三节，jQuery EasyUI，ComboBox(下拉列表框)组件

jQuery EasyUI，ComboBox(下拉列表框)组件，可以远程加载数据的下拉列表组件

学习要点：

　　1.加载方式

　　2.属性列表

　　3.事件列表

　　4.方法列表

本节课重点了解 EasyUI 中 ComboBox(下拉列表框)组件的使用方法，这个组件依赖于 Combo(自定义下拉框)组件。

一．加载方式

class 加载方式

<select id="box" class="easyui-combobox" name="box" style="width:200px;">
    <option value="aaaa">aaaa</option>
    <option value="bbbb">bbbb</option>
    <option value="cccc">cccc</option>
    <option value="dddd">dddd</option>
    <option value="eeee">eeee</option>
</select>

JS 加载方式

<input id="box" name="user">

js代码

combobox()将一个input元素执行，(下拉列表框)组件

$(function () {
    $(‘#box‘).combobox({
        valueField: ‘id‘,
        textField: ‘user‘,
        url: ‘content.json‘,
    });
});

二．属性列表

valueField   string 基础数据值名称绑定到该下拉列表框。默认为 value。

textField   string 基础数据字段名称绑定到该下拉列表框。默认值 text。

groupField   string 指定分组的字段名称。默认值 null。

groupFormatter   function(group)返回格式化后的分组标题文本，以显示分组项

mode   string定义了当文本改变时如何读取列表数据。设置为‘remote‘时，下拉列表框将会从服务器加载数据。当设置为“remote”模式时，用户输入将被发送到名为‘q‘的 HTTP 请求参数到服务器检索新数据。

url   string 通过 URL 加载远程列表数据。

method   string HTTP 方法检索数据(POST / GET)。

data   array 数据列表加载。

filter   function定义当‘mode‘设置为‘local‘时如何过滤本地数据，函数有 2 个参数：q：用户输入的文本。row：列表行数据。返回 true 的时候允许行显示。

formatter   function 定义如何渲染行。该函数接受 1 个参数：row。

loader   function(param,success,error)定义了如何从远程服务器加载数据。返回false 可以忽略该动作。该函数具备如下参数：param：传递到远程服务器的参数对象。success(data)：在检索数据成功的时候调用该回调函数。error()：在检索数据失败的时候调用该回调函数。

loadFilter function(data) 返回过滤后的数据并显示。

第二百二十三节，jQuery EasyUI，ComboBox(下拉列表框)组件

原文：http://www.cnblogs.com/adc8868/p/6713962.html