jQuery EasyUI ComboBox：组合框使用与API解析

"jQuery EasyUI API 中文文档 - ComboBox组合框" jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列轻量级、易于使用的组件，帮助开发者快速构建用户界面。ComboBox 是 EasyUI 提供的一个组件，用于创建具有下拉列表功能的输入框，它在基础的 `$.fn.combo.defaults` 上进行了扩展，并通过 `$.fn.combobox.defaults` 进行了默认设置的重写。 依赖 ComboBox 的使用依赖于基础的 `combo` 组件。在 HTML 结构中，我们需要一个 `<select>` 元素来定义下拉选项，以及一个 `<input>` 元素作为用户交互的文本框。这两个元素可以使用相同的 ID，如示例中的 "cc"，EasyUI 会根据 ID 连接它们。 用法 为了将 `<select>` 转换为 ComboBox，需要使用 jQuery 选择器并调用 `combobox` 方法，如下所示： ```javascript $('#cc').combobox({ url: 'combobox_data.json', valueField: 'id', textField: 'text' }); ``` 这里的 `url` 指定了从服务器获取数据的接口，`valueField` 定义了数据中与组合框 value 相关联的字段名，`textField` 则是与文本显示相关的字段名。 JSON 数据格式 ComboBox 通常从服务器获取 JSON 数据，数据结构如下： ```json [ { "id": 1, "text": "text1" }, { "id": 2, "text": "text2" }, { "id": 3, "text": "text3", "selected": true }, { "id": 4, "text": "text4" }, { "id": 5, "text": "text5" } ] ``` 每个对象包含 `id` 和 `text` 字段，如果有 `selected` 字段且其值为 `true`，则该选项会被预选中。 特性 1. valueField - 字符串类型，表示绑定到 ComboBox 的 value 的基础数据字段名，默认值未指定。 2. textField - 字符串类型，表示绑定到 ComboBox 的 text 的基础数据字段名，默认值未指定。 3. mode - 字符串类型，定义文本变化时如何加载列表数据。默认为 'local'，如果需要从服务器加载，可以设置为 'remote'。 4. url - 字符串类型，从远程加载列表数据的 URL，默认值为 null。 5. method - 字符串类型，用于检索数据的 HTTP 方法，默认为 'post'。 6. data - 数组类型，包含要加载的列表数据，默认值为 null，可直接提供本地数据。 7. filter - 函数类型，当 mode 为 'local' 时，定义如何过滤数据。该函数接受两个参数：用户输入的文本（q）和列表中的行数据（row），返回值为 true 或 false，决定是否显示该行。 8. formatter - 函数类型，定义如何呈现行数据，允许自定义显示样式。 通过以上特性，开发者可以根据实际需求灵活配置 ComboBox，实现丰富的交互效果和数据处理。例如，通过设置 `filter` 函数，可以实现自定义搜索过滤；通过 `formatter` 函数，可以自定义每一项的显示格式。这些特性使得 ComboBox 成为在 Web 应用中构建动态下拉框的强大工具。