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

jQuery EasyUI 数据网格 – 创建复杂工具栏（Toolbar）

目录

  1. 引言
  2. 工具栏概述
  1. 实现基础工具栏
  1. 高级工具栏配置
  1. 最佳实践与注意事项
  1. 结论

1. 引言

jQuery EasyUI 的数据网格（DataGrid）支持通过工具栏（Toolbar）为用户提供丰富的操作选项。复杂工具栏可以包含按钮、输入框、下拉菜单等多种控件，提升数据交互的灵活性。本教程将从基础到高级，带你掌握如何在 DataGrid 中创建复杂工具栏，并提供实用示例。

2. 工具栏概述

2.1 什么是工具栏？

  • 定义：工具栏是 DataGrid 的顶部操作区域，通过 toolbar 属性定义，支持 HTML 结构或 JavaScript 对象，用于放置操作按钮或控件。
  • 实现方式：可直接嵌入 HTML 元素，或通过数组动态生成工具栏内容。

2.2 工具栏的应用场景

  • 数据操作：如添加、删除、搜索或刷新数据。
  • 用户交互：提供筛选、导出等功能。
  • 参考：jQuery EasyUI 官方文档 DataGrid Toolbar 部分（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 创建基础工具栏

  • 方法：通过 toolbar 属性指定一个 HTML 元素 ID 或直接定义按钮数组。
  • 示例：
<div id="tb">
  <a href="#" class="easyui-linkbutton" onclick="addRow()">添加</a>
  <a href="#" class="easyui-linkbutton" onclick="deleteRow()">删除</a>
</div>
<table id="dg" class="easyui-datagrid" toolbar="#tb"></table>

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; }
  </style>
</head>
<body>
  <div class="container">
    <h2>基础工具栏</h2>
    <div id="tb">
      <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addRow()">添加</a>
      <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteRow()">删除</a>
    </div>
    <table id="dg" class="easyui-datagrid" style="width: 600px; height: 300px;" toolbar="#tb"></table>
  </div>
  <script>
    var data = [
      { id: 1, name: '项目 A', price: 100 },
      { id: 2, name: '项目 B', price: 200 }
    ];

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

    function addRow() {
      $('#dg').datagrid('appendRow', { id: data.length + 1, name: '新项目', price: 0 });
      data = $('#dg').datagrid('getData').rows;
    }

    function deleteRow() {
      var row = $('#dg').datagrid('getSelected');
      if (row) {
        var index = $('#dg').datagrid('getRowIndex', row);
        $('#dg').datagrid('deleteRow', index);
        data = $('#dg').datagrid('getData').rows;
      } else {
        $.messager.alert('提示', '请选择一行！', 'info');
      }
    }
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：
  • 工具栏显示“添加”和“删除”按钮，带图标。
  • 点击“添加”增加新行；点击“删除”移除选中行，未选中时弹出提示。

4. 高级工具栏配置

4.1 复杂工具栏布局与样式

  • 布局：添加输入框、下拉菜单或分隔符。
  • 样式：使用 CSS 调整间距或 EasyUI 组件美化。
  • 示例：
<div id="tb">
  <input class="easyui-textbox" style="width: 150px;" id="searchInput">
  <a href="#" class="easyui-linkbutton" onclick="search()">搜索</a>
  <span style="margin: 0 10px;">|</span>
  <a href="#" class="easyui-linkbutton" onclick="clearSearch()">清空</a>
</div>

4.2 动态工具栏和交互

  • 动态工具栏：通过 JavaScript 数组动态生成工具栏。
  • 交互：结合事件响应用户操作。
  • 示例：
$('#dg').datagrid({
  toolbar: [{
    text: '刷新',
    iconCls: 'icon-reload',
    handler: function() { $('#dg').datagrid('reload'); }
  }]
});

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">
      <a href="#" class="easyui-linkbutton tb-item" iconCls="icon-add" plain="true" onclick="addRow()">添加</a>
      <a href="#" class="easyui-linkbutton tb-item" iconCls="icon-remove" plain="true" onclick="deleteRow()">删除</a>
      <input class="easyui-combobox tb-item" id="categoryFilter" style="width: 150px;" data-options="
        valueField: 'value',
        textField: 'text',
        data: [
          { value: '', text: '全部' },
          { value: '电子', text: '电子' },
          { value: '服装', text: '服装' }
        ],
        onSelect: function(rec) { filterByCategory(rec.value); }
      ">
      <input class="easyui-textbox tb-item" id="searchInput" style="width: 150px;" data-options="prompt: '输入名称搜索' ">
      <a href="#" class="easyui-linkbutton tb-item" iconCls="icon-search" plain="true" onclick="search()">搜索</a>
      <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: '电子' }
    ];

    $('#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 addRow() {
      var newId = $('#dg').datagrid('getRows').length + 1;
      $('#dg').datagrid('appendRow', { id: newId, name: '新项目', price: 0, category: '' });
      $.messager.show({ title: '提示', msg: '已添加新行', timeout: 2000, showType: 'slide' });
    }

    function deleteRow() {
      var row = $('#dg').datagrid('getSelected');
      if (row) {
        var index = $('#dg').datagrid('getRowIndex', row);
        $('#dg').datagrid('deleteRow', index);
        $.messager.show({ title: '提示', msg: '已删除行', timeout: 2000, showType: 'slide' });
      } else {
        $.messager.alert('提示', '请选择一行！', 'info');
      }
    }

    function search() {
      var keyword = $('#searchInput').textbox('getValue').toLowerCase();
      var rows = originalData.filter(function(row) {
        return row.name.toLowerCase().indexOf(keyword) !== -1;
      });
      $('#dg').datagrid('loadData', rows);
    }

    function filterByCategory(category) {
      var rows = category ? originalData.filter(function(row) {
        return row.category === category;
      }) : originalData;
      $('#dg').datagrid('loadData', rows);
    }

    function reset() {
      $('#searchInput').textbox('clear');
      $('#categoryFilter').combobox('setValue', '');
      $('#dg').datagrid('loadData', originalData);
    }
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：
  • 工具栏包含“添加”、“删除”、类别下拉框、搜索输入框和“重置”按钮。
  • 点击“添加”增加新行；“删除”移除选中行并提示。
  • 通过下拉框筛选类别，输入框搜索名称，“重置”恢复初始数据。

5. 最佳实践与注意事项

5.1 设计与实现建议

  • 功能分组：使用分隔符或间距（如 <span>）区分工具栏区域。
  • 控件选择：优先使用 EasyUI 组件（如 easyui-combobox）保持一致性。
  • 响应式：确保工具栏在小屏幕上换行或隐藏次要功能。

5.2 性能优化与调试

  • 性能：避免工具栏事件触发频繁重绘，优化数据过滤逻辑。
  • 调试：检查工具栏控件事件是否正确绑定，确认数据更新后表格同步刷新。

6. 结论

jQuery EasyUI 的复杂工具栏通过 toolbar 属性为 DataGrid 提供了强大的操作扩展能力，适用于多样化的交互需求。本文通过基础和高级示例展示了其用法，帮助你快速上手。如果需要冻结列支持，可参考 jQuery EasyUI 冻结列 或访问官方文档（jeasyui.com）。

回答特点

  • 结构：包含目录、带锚点的小标题和代码示例，逻辑清晰。
  • 实用性：从基础工具栏到复杂交互，覆盖实际需求。
  • 内部链接：通过 <a href="#ID"> 跳转，如 实现基础工具栏。
  • 出站链接：嵌入正文，指向官方文档。

如何运行

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