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

jQuery EasyUI 数据网格 – 添加查询功能

目录

  1. 引言
  2. 查询功能概述
  1. 实现基础查询功能
  1. 高级查询功能配置
  1. 最佳实践与注意事项
  1. 结论

1. 引言

jQuery EasyUI 的数据网格（DataGrid）通过添加查询功能，可以帮助用户快速过滤和查找数据，提升数据管理的效率。本教程将从基础到高级，带你掌握如何在 DataGrid 中实现查询功能，并提供实用示例。

2. 查询功能概述

2.1 什么是查询功能？

  • 定义：查询功能是指通过用户输入的关键字或条件，从 DataGrid 中筛选出符合条件的数据，支持客户端过滤或服务器端查询。
  • 实现方式：通常结合工具栏（Toolbar）或独立表单，使用 JavaScript 逻辑或后端接口实现数据过滤。

2.2 查询功能的应用场景

  • 数据筛选：按名称、ID 或其他字段查找记录。
  • 动态交互：实时更新表格内容以响应用户输入。
  • 参考：jQuery EasyUI 官方文档 DataGrid 部分（jeasyui.com）。

3. 实现基础查询功能

3.1 准备工作

  • 引入依赖：需要 jQuery、EasyUI 的核心文件和主题文件。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">

3.2 添加基础查询功能

  • 方法：在工具栏中添加输入框，通过 JavaScript 过滤数据并更新 DataGrid。
  • 示例：
<div id="tb">
  <input id="searchInput" class="easyui-textbox" style="width: 150px;">
  <a href="#" class="easyui-linkbutton" onclick="doSearch()">查询</a>
</div>
<script>
function doSearch() {
  var value = $('#searchInput').textbox('getValue');
  $('#dg').datagrid('loadData', data.filter(row => row.name.includes(value)));
}
</script>

3.3 实例：基础查询功能

以下是一个基础查询功能的完整示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery EasyUI 基础查询功能</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <style>
    body { padding: 20px; }
    #tb { padding: 5px; }
  </style>
</head>
<body>
  <div class="container">
    <h2>基础查询功能</h2>
    <div id="tb">
      <input id="searchInput" class="easyui-textbox" style="width: 150px;" data-options="prompt: '输入名称查询'">
      <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="doSearch()">查询</a>
      <a href="#" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="reset()">重置</a>
    </div>
    <table id="dg" class="easyui-datagrid" style="width: 600px; height: 300px;" toolbar="#tb"></table>
  </div>
  <script>
    var originalData = [
      { id: 1, name: '手机', price: 1000 },
      { id: 2, name: '笔记本', price: 2000 },
      { id: 3, name: '平板', price: 800 }
    ];

    $('#dg').datagrid({
      data: originalData,
      columns: [[
        { field: 'id', title: 'ID', width: 100 },
        { field: 'name', title: '名称', width: 200 },
        { field: 'price', title: '价格', width: 150, formatter: function(value) { return '¥' + value; } }
      ]]
    });

    function doSearch() {
      var value = $('#searchInput').textbox('getValue').toLowerCase();
      var filteredData = originalData.filter(function(row) {
        return row.name.toLowerCase().includes(value);
      });
      $('#dg').datagrid('loadData', filteredData);
    }

    function reset() {
      $('#searchInput').textbox('clear');
      $('#dg').datagrid('loadData', originalData);
    }
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：
  • 工具栏包含搜索输入框、“查询”和“重置”按钮。
  • 输入名称并点击“查询”过滤表格数据；点击“重置”恢复完整数据。

4. 高级查询功能配置

4.1 多条件查询和复杂表单

  • 多条件查询：结合多个输入控件进行筛选。
  • 复杂表单：使用 EasyUI 组件（如 combobox）增强查询体验。
  • 示例：
<div id="tb">
  <input id="nameInput" class="easyui-textbox" style="width: 150px;" data-options="prompt: '名称'">
  <input id="priceInput" class="easyui-numberbox" style="width: 150px;" data-options="prompt: '最低价格'">
  <a href="#" class="easyui-linkbutton" onclick="doAdvancedSearch()">查询</a>
</div>

4.2 动态查询和服务器端支持

  • 动态查询：实时响应用户输入（如 onChange）。
  • 服务器端支持：通过 url 和 queryParams 发送查询参数到后端。
  • 示例：
$('#dg').datagrid({
  url: 'data.json',
  queryParams: {
    name: $('#nameInput').val(),
    price: $('#priceInput').val()
  }
});

4.3 实例：带交互的动态查询功能

以下是一个带交互的动态查询功能的示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery EasyUI 带交互的动态查询功能</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <style>
    body { padding: 20px; }
    #tb { padding: 5px; }
    .tb-item { margin-right: 10px; }
  </style>
</head>
<body>
  <div class="container">
    <h2>带交互的动态查询功能</h2>
    <div id="tb">
      <input id="nameInput" class="easyui-textbox tb-item" style="width: 150px;" data-options="prompt: '输入名称', onChange: doDynamicSearch">
      <input id="priceInput" class="easyui-numberbox tb-item" style="width: 150px;" data-options="prompt: '最低价格', onChange: doDynamicSearch">
      <input id="categoryInput" class="easyui-combobox tb-item" style="width: 150px;" data-options="
        valueField: 'value',
        textField: 'text',
        data: [
          { value: '', text: '全部' },
          { value: '电子', text: '电子' },
          { value: '服装', text: '服装' }
        ],
        onSelect: function(rec) { doDynamicSearch(); }
      ">
      <a href="#" class="easyui-linkbutton tb-item" iconCls="icon-reload" plain="true" onclick="reset()">重置</a>
    </div>
    <table id="dg" class="easyui-datagrid" style="width: 600px; height: 300px;" toolbar="#tb"></table>
  </div>
  <script>
    var originalData = [
      { id: 1, name: '手机', price: 1000, category: '电子' },
      { id: 2, name: 'T恤', price: 50, category: '服装' },
      { id: 3, name: '平板', price: 800, category: '电子' },
      { id: 4, name: '牛仔裤', price: 120, category: '服装' }
    ];

    $('#dg').datagrid({
      data: originalData,
      columns: [[
        { field: 'id', title: 'ID', width: 100 },
        { field: 'name', title: '名称', width: 200 },
        { field: 'price', title: '价格', width: 150, formatter: function(value) { return '¥' + value; } },
        { field: 'category', title: '类别', width: 150 }
      ]]
    });

    function doDynamicSearch() {
      var name = $('#nameInput').textbox('getValue').toLowerCase();
      var price = $('#priceInput').numberbox('getValue') || 0;
      var category = $('#categoryInput').combobox('getValue');

      var filteredData = originalData.filter(function(row) {
        return (!name || row.name.toLowerCase().includes(name)) &&
               (row.price >= price) &&
               (!category || row.category === category);
      });

      $('#dg').datagrid('loadData', filteredData);
    }

    function reset() {
      $('#nameInput').textbox('clear');
      $('#priceInput').numberbox('clear');
      $('#categoryInput').combobox('setValue', '');
      $('#dg').datagrid('loadData', originalData);
    }
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：
  • 工具栏包含名称输入框、最低价格输入框、类别下拉框和“重置”按钮。
  • 输入名称、最低价格或选择类别时，表格实时更新筛选结果。
  • 点击“重置”清空条件并恢复完整数据。

5. 最佳实践与注意事项

5.1 设计与实现建议

  • 实时反馈：使用 onChange 或 onSelect 实现动态查询，提升用户体验。
  • 条件组合：支持多条件查询时，保持逻辑清晰，避免冲突。
  • 默认值：为输入控件设置提示文本（如 prompt），引导用户操作。

5.2 性能优化与调试

  • 性能：客户端查询时，优化过滤逻辑；大数据量时考虑服务器端查询。
  • 调试：检查查询条件是否正确应用，确认表格数据更新无误。

6. 结论

jQuery EasyUI 的查询功能通过工具栏和 JavaScript 逻辑，为 DataGrid 提供了灵活的数据筛选能力，适用于多种交互场景。本文通过基础和高级示例展示了其用法，帮助你快速上手。如果需要复杂工具栏支持，可参考 jQuery EasyUI 复杂工具栏 或访问官方文档（jeasyui.com）。

回答特点

  • 结构：包含目录、带锚点的小标题和代码示例，逻辑清晰。
  • 实用性：从基础查询到动态多条件筛选，覆盖实际需求。
  • 内部链接：通过 <a href="#ID"> 跳转，如 实现基础查询功能。
  • 出站链接：嵌入正文，指向官方文档。

如何运行

  • 直接保存为 HTML 文件，在浏览器中打开即可（需联网加载 CDN 资源）。