以下是以资深软件开发工程师的视角，对“jQuery EasyUI 表单 – 过滤下拉数据网格”的专业回答。我将详细讲解如何在 jQuery EasyUI 中创建一个下拉数据网格（ComboGrid）并实现数据过滤功能，包括配置、动态过滤和实例应用，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 15 日的最新信息，使用 jQuery EasyUI 1.10.x（最新稳定版）和 jQuery 3.7.1 为参考。

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

1. 引言

jQuery EasyUI 的下拉数据网格（ComboGrid）结合了下拉框和数据网格的特性，支持展示表格数据并允许用户选择。添加过滤功能后，用户可以通过输入快速筛选数据，大幅提升交互效率。本教程将通过实例讲解如何创建并过滤 ComboGrid，帮助你在表单中实现这一实用功能。

2. 下拉数据网格过滤概述

2.1 什么是 ComboGrid？

定义：ComboGrid 是 EasyUI 的一个组件，继承自 combo 和 datagrid，在下拉面板中显示数据网格，用户可选择行。
用途：适用于需要展示多列数据并支持选择的场景，如产品选择、用户列表等。

2.2 过滤功能的优势

高效性：快速定位目标数据，减少滚动操作。
灵活性：支持客户端和服务器端过滤。
用户友好：实时响应输入，提供即时反馈。

3. 实现过滤下拉数据网格

3.1 引入与基础配置

通过 CDN 引入：

<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

基本 ComboGrid：

<input id="product" class="easyui-combogrid" style="width:300px">
<script>
  $("#product").combogrid({
    data: [
      { id: 1, name: "手机", price: 1000 },
      { id: 2, name: "电脑", price: 2000 }
    ],
    idField: "id",
    textField: "name",
    columns: [[
      { field: "name", title: "名称", width: 150 },
      { field: "price", title: "价格", width: 100 }
    ]]
  });
</script>

3.2 添加过滤功能

客户端过滤：使用 filter 属性：

$("#product").combogrid({
  data: [
    { id: 1, name: "手机", price: 1000 },
    { id: 2, name: "电脑", price: 2000 }
  ],
  idField: "id",
  textField: "name",
  columns: [[
    { field: "name", title: "名称", width: 150 },
    { field: "price", title: "价格", width: 100 }
  ]],
  filter: function(q, row) {
    return row.name.toLowerCase().indexOf(q.toLowerCase()) >= 0;
  }
});

3.3 实例：产品选择器

以下是一个带过滤功能的 ComboGrid 示例，集成到表单中：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>过滤下拉数据网格 - 产品选择</title>
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <style>
    .form-row { margin: 10px 0; }
  </style>
</head>
<body>
  <h1>订单信息</h1>
  <div style="padding:20px">
    <form id="orderForm" method="post">
      <div class="form-row">
        <input class="easyui-textbox" name="orderNo" style="width:200px" 
               data-options="label:'订单号:',required:true">
      </div>
      <div class="form-row">
        <input id="product" class="easyui-combogrid" name="productId" style="width:300px" 
               data-options="label:'产品:',required:true">
      </div>
      <div class="form-row">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#orderForm').form('clear')">重置</a>
      </div>
    </form>
  </div>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#product").combogrid({
        url: "get_products.php",
        idField: "id",
        textField: "name",
        columns: [[
          { field: "name", title: "产品名称", width: 150 },
          { field: "price", title: "价格", width: 100, align: "right" }
        ]],
        filter: function(q, row) {
          return row.name.toLowerCase().indexOf(q.toLowerCase()) >= 0 ||
                 row.price.toString().indexOf(q) >= 0;
        },
        onLoadSuccess: function() {
          console.log("产品数据加载完成");
        }
      });
    });

    function submitForm() {
      if ($("#orderForm").form("validate")) {
        $("#orderForm").form("submit", {
          url: "submit.php",
          success: function(data) {
            var response = JSON.parse(data);
            $.messager.alert(response.success ? "成功" : "错误", response.message);
            if (response.success) $("#orderForm").form("clear");
          }
        });
      } else {
        $.messager.alert("提示", "请填写完整信息");
      }
    }
  </script>
</body>
</html>

后端（get_products.php）：

<?php
header("Content-Type: application/json");
echo json_encode([
  ["id" => 1, "name" => "手机", "price" => 1000],
  ["id" => 2, "name" => "电脑", "price" => 2000],
  ["id" => 3, "name" => "耳机", "price" => 150]
]);
?>

后端（submit.php）：

<?php
header("Content-Type: application/json");
$data = $_POST;
if (empty($data["orderNo"]) || empty($data["productId"])) {
  echo json_encode(["success" => false, "message" => "所有字段必填"]);
} else {
  echo json_encode(["success" => true, "message" => "订单提交成功"]);
}
?>

运行方法：

配置本地服务器（如 XAMPP），将 index.html、get_products.php 和 submit.php 放入同一目录。
访问 http://localhost/index.html，输入关键字过滤产品并提交表单。
效果：输入“手”筛选出“手机”，选择后提交表单，验证并异步处理。

4. 高级过滤技术

4.1 动态服务器端过滤

配置：

$("#product").combogrid({
  url: "get_products.php",
  idField: "id",
  textField: "name",
  columns: [[
    { field: "name", title: "名称", width: 150 },
    { field: "price", title: "价格", width: 100 }
  ]],
  delay: 500, // 输入延迟 500ms
  mode: "remote", // 服务器端过滤
  onBeforeLoad: function(param) {
    param.q = $("#product").combogrid("getText"); // 传递查询参数
  }
});

后端（get_products.php）：

<?php
header("Content-Type: application/json");
$q = isset($_GET["q"]) ? strtolower($_GET["q"]) : "";
$data = [
  ["id" => 1, "name" => "手机", "price" => 1000],
  ["id" => 2, "name" => "电脑", "price" => 2000],
  ["id" => 3, "name" => "耳机", "price" => 150]
];
$filtered = array_filter($data, function($row) use ($q) {
  return !$q || strpos(strtolower($row["name"]), $q) !== false;
});
echo json_encode(array_values($filtered));
?>

4.2 自定义过滤与事件

多字段过滤：

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

选择事件：

onSelect: function(row) {
  console.log("选择了:", row.name, row.price);
}

5. 最佳实践与注意事项

5.1 设计与用户体验

过滤提示：添加 prompt: "输入筛选..." 引导用户。
默认值：设置初始选择：

$("#product").combogrid("setValue", 1);

5.2 调试与性能

调试：检查 filter 函数逻辑和 onLoadSuccess 数据。
性能：大数据时优先使用服务器端过滤，减少客户端负担。

6. 结论

jQuery EasyUI 的 ComboGrid 通过过滤功能，显著提升了数据选择效率，特别适合复杂表单场景。本文通过产品选择器实例详解了其实现过程，帮助你掌握过滤下拉数据网格的配置和应用。如果想深入学习，可参考实例：产品选择器或访问 jQuery EasyUI 文档。

回答特点

结构：遵循示例格式，包含目录、带锚点的小标题和代码示例。
实用性：聚焦过滤功能，适合中高级开发者。
内部链接：通过 <a href="#ID"> 跳转，如实现过滤下拉数据网格。
出站链接：嵌入正文，如 jQuery EasyUI 文档。

如何运行

配置本地服务器，放入 index.html、get_products.php 和 submit.php。
访问页面，测试过滤功能。

请确认此回答是否符合你的期望，或者提出下一个问题，我将继续按此格式回答！

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

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

目录

1. 引言

2. 下拉数据网格过滤概述

2.1 什么是 ComboGrid？

2.2 过滤功能的优势

3. 实现过滤下拉数据网格

3.1 引入与基础配置

3.2 添加过滤功能

3.3 实例：产品选择器

4. 高级过滤技术

4.1 动态服务器端过滤

4.2 自定义过滤与事件

5. 最佳实践与注意事项

5.1 设计与用户体验

5.2 调试与性能

6. 结论

回答特点

如何运行

lichongyang

发表回复取消回复

近期文章

近期评论

归档

分类

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

目录

回答特点

如何运行

lichongyang

发表回复 取消回复

近期文章

近期评论

归档

分类

发表回复取消回复