jQuery EasyUI 表单 – 过滤下拉数据网格

jQuery EasyUI 表单 – 过滤下拉数据网格（ComboGrid）

jQuery EasyUI 中的 combogrid（下拉数据网格）是将下拉框（combo）和数据网格（datagrid）结合的组件。下拉面板是一个可分页、可排序、可过滤的表格，非常适合处理大量数据（如商品列表、用户列表），用户可以在输入框中输入关键字实时过滤数据。

combogrid 支持两种过滤模式：

• local：本地过滤（数据一次性加载，前端过滤）。
• remote：远程过滤（推荐大数据场景，用户输入时发送请求到服务器过滤，返回匹配数据）。

1. 基本用法

<input id="cc" class="easyui-combogrid" style="width:300px;"
       data-options="panelWidth:500, idField:'productid', textField:'name'" />

JavaScript 初始化：

$('#cc').combogrid({
    url: 'products.php',  // 数据源
    idField: 'productid', // 值字段（提交时使用）
    textField: 'name',    // 显示在输入框的字段
    panelWidth: 500,
    panelHeight: 200,
    pagination: true,     // 启用分页
    pageSize: 10,
    fitColumns: true,
    columns: [[
        {field:'productid', title:'商品ID', width:80},
        {field:'name', title:'商品名称', width:120},
        {field:'price', title:'价格', width:80, align:'right'}
    ]]
});

2. 启用过滤（关键部分）

• 默认模式为 remote（用户输入时自动过滤）。
• 在 remote 模式下，输入关键字时会向服务器发送参数 q=关键字（连同分页参数 page、rows）。

远程过滤示例：

$('#cc').combogrid({
    url: 'products.php',
    mode: 'remote',  // 显式设置为远程（默认就是remote）
    delay: 500,      // 输入延迟（毫秒），避免频繁请求
    idField: 'productid',
    textField: 'name',
    pagination: true,
    columns: [[ /* 同上 */ ]]
});

服务器端（PHP 示例）处理过滤：

$q = $_REQUEST['q'] ?? '';  // 获取过滤关键字
$sql = "SELECT * FROM products WHERE name LIKE '%$q%' LIMIT ?, ?";
 // 结合分页参数 page 和 rows 执行查询

本地过滤示例（小数据量）：

$('#cc').combogrid({
    url: 'products.json',  // 一次性加载所有数据
    mode: 'local',
    filter: function(q, row) {  // 自定义过滤函数，返回 true 表示匹配
        return row.name.toLowerCase().indexOf(q.toLowerCase()) >= 0 ||
               row.productid.toString().indexOf(q) >= 0;
    },
    columns: [[ /* 同上 */ ]]
});

3. 多列过滤扩展（本地模式）

如果需要对多列进行模糊搜索，可以自定义 filter 函数：

filter: function(q, row) {
    q = q.toLowerCase();
    return (row.name && row.name.toLowerCase().indexOf(q) >= 0) ||
           (row.productid && row.productid.toString().indexOf(q) >= 0) ||
           (row.price && row.price.toString().indexOf(q) >= 0);
}

4. 在表单中使用

<form id="ff" method="post">
    <div>
        <label>商品：</label>
        <input name="product" class="easyui-combogrid"
               data-options="url:'products.php',mode:'remote',idField:'productid',
                             textField:'name',required:true,panelWidth:500,
                             pagination:true" />
    </div>
    <div>
        <input type="submit" value="提交" />
    </div>
</form>

<script>
$('#ff').form({
    onSubmit: function() {
        return $(this).form('validate');
    }
});
</script>

获取/设置值：

var value = $('#cc').combogrid('getValue');  // 获取选中 ID
$('#cc').combogrid('setValue', '001');      // 设置值
$('#cc').combogrid('grid').datagrid('reload');  // 刷新网格数据

5. 常见属性扩展

• delay：输入防抖延迟（默认 400ms）。
• onBeforeLoad：加载前事件，可自定义参数。
• onSelect：选中行事件。
• 支持 datagrid 的所有功能：排序、冻结列、formatter 等。

参考资源

• 官方教程：https://www.jeasyui.com/tutorial/form/form5.php
• 文档：https://www.jeasyui.com/documentation/combogrid.php
• Demo 示例：https://www.jeasyui.com/demo/main/index.php?plugin=ComboGrid&view=filter
• 中文教程：https://www.runoob.com/jeasyui/jeasyui-form-form5.html

combogrid 是处理海量数据下拉选择的首选组件，尤其远程过滤 + 分页，能极大提升性能和用户体验。如果需要多选、自定义列格式或其他高级功能，可以进一步扩展。有具体场景（如服务器端代码或多列搜索）可以再问！