异常教程

jQuery EasyUI 数据网格 – 添加工具栏（长文讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 Web 前端开发中，数据展示与交互是核心需求之一。jQuery EasyUI 数据网格（DataGrid）作为一款功能强大的开源插件，凭借其直观的界面设计和灵活的配置选项，成为开发者构建复杂表格的首选工具。然而，许多初学者在使用数据网格时，往往忽略了工具栏这一关键组件的重要性。工具栏不仅能够提升用户操作效率，还能通过自定义按钮实现业务逻辑的快速集成。本文将从基础概念到实战案例，系统性地讲解如何为 EasyUI 数据网格添加工具栏，并提供可直接复用的代码示例，帮助开发者高效完成开发任务。

一、理解数据网格与工具栏的关系

1.1 数据网格的核心作用

数据网格（DataGrid）类似于 Excel 表格，它能够以可视化方式展示结构化数据，并支持分页、排序、过滤等基础功能。但单纯的数据展示并不足以满足实际需求，例如用户可能需要一键导出数据、批量删除记录或快速筛选特定条目。这些功能的实现，就需要借助工具栏（Toolbar）。

1.2 工具栏的比喻与作用

可以将工具栏想象成 Excel 的菜单栏或 Word 的功能区。它位于数据网格的顶部，提供一系列按钮或下拉菜单，直接关联到用户的高频操作。例如：

  • 新增按钮：触发添加新记录的弹窗
  • 搜索框：实时过滤表格内容
  • 导出按钮：将当前页数据保存为 Excel 文件

通过工具栏，开发者可以将复杂的业务逻辑封装成直观的按钮操作，显著提升用户体验。

二、添加工具栏的步骤解析

2.1 初始化数据网格的基本配置

在添加工具栏之前，需先创建一个基础的数据网格。以下是一个最简配置示例：

<table id="dg"></table>
<script>
$(function() {
    $('#dg').datagrid({
        url: '/api/data', // 数据接口地址
        columns: [[
            {field:'id', title:'ID', width:100},
            {field:'name', title:'姓名', width:150}
        ]]
    });
});
</script>

注：上述代码通过 url 参数从服务器加载数据，columns 定义了表格的列结构。

2.2 工具栏的配置方式

2.2.1 基础语法

EasyUI 允许通过 toolbar 属性直接定义工具栏的 HTML 内容。其配置方式如下：

$('#dg').datagrid({  
    toolbar: [{
        text: '新增记录',
        iconCls: 'icon-add',
        handler: function() {
            alert('点击了新增按钮');
        }
    }, '-', {  // '-' 表示分隔符
        text: '删除选中',
        iconCls: 'icon-remove',
        handler: function() {
            // 实现删除逻辑
        }
    }]
});

关键点说明：

  • text：按钮显示的文本
  • iconCls：通过图标类名添加图标（需配合图标库使用）
  • handler：点击按钮时触发的回调函数

2.2.2 混合 HTML 与 JavaScript 定义

除了纯 JSON 配置，也可以直接写入 HTML 代码：

toolbar: [
    '<div class="datagrid-toolbar">',
    '<button class="easyui-linkbutton" onclick="addRecord()">添加</button>',
    '<button class="easyui-linkbutton" onclick="deleteSelected()">删除</button>',
    '</div>'
].join('')

此方法适合需要复杂布局或自定义样式的场景。

2.3 动态添加工具栏（进阶技巧）

如果需要在初始化后动态修改工具栏，可通过以下方式实现：

// 获取当前工具栏容器
var toolbar = $('#dg').datagrid('getPanel').find('div.datagrid-toolbar');
// 追加新按钮
toolbar.append('<button class="easyui-linkbutton" onclick="refreshData()">刷新</button>');

三、完整案例：实现带搜索的工具栏

3.1 需求分析

假设需要实现以下功能：

  1. 工具栏包含“新增”按钮和搜索框
  2. 搜索框支持输入关键词后回车触发筛选
  3. 按钮点击后弹出提示

3.2 HTML 结构

<div class="easyui-layout" style="width:100%;height:500px;">
    <div data-options="region:'center'">
        <table id="dg"></table>
    </div>
</div>

3.3 JavaScript 实现

$(function() {
    $('#dg').datagrid({  
        url: '/api/data',
        columns: [[
            {field:'id', title:'ID', width:100},
            {field:'name', title:'姓名', width:150},
            {field:'age', title:'年龄', width:100}
        ]],
        toolbar: [{
            text: '新增记录',
            iconCls: 'icon-add',
            handler: addRecord
        }, '-', 
        {
            text: '搜索',
            handler: function() {
                var keyword = $('#searchInput').val();
                $('#dg').datagrid('load', { keyword: keyword });
            }
        }, 
        '<input id="searchInput" class="easyui-textbox" style="width:150px" placeholder="请输入关键词">'
    ]
    });
});

// 新增记录函数
function addRecord() {
    $.messager.alert('提示', '您点击了新增按钮');
}

// 自定义搜索框的快捷键触发
$('#searchInput').keyup(function(e) {
    if (e.keyCode === 13) { // 回车键
        $('#dg').datagrid('load', { keyword: $(this).val() });
    }
});

注：

  1. iconCls 需要依赖 EasyUI 的图标库，如未引入可移除
  2. 搜索功能通过 load 方法传递参数到服务器端

四、工具栏的高级定制

4.1 图标与样式的优化

通过 CSS 可进一步美化工具栏：

/* 自定义按钮样式 */
.datagrid-toolbar .icon-add {
    background-image: url('your-icon.png') !important;
}

/* 搜索框边框颜色 */
#searchInput {
    border-color: #1890ff;
}

4.2 与后端的交互逻辑

假设后端需要接收搜索关键词，接口设计如下：

// 在 dataGrid 配置中添加参数
queryParams: function() {
    return {
        keyword: $('#searchInput').val(),
        pageSize: 10
    };
}

此时，每次加载或刷新表格时，会自动携带 keyword 参数到服务器。

五、常见问题与解决方案

5.1 工具栏按钮不显示

可能原因：未正确引入 EasyUI 的图标样式文件。
解决方法：在 HTML 头部添加以下代码：

<link rel="stylesheet" href="themes/icon.css">

5.2 动态添加的按钮无法触发事件

可能原因：DOM 元素未被 EasyUI 正确初始化。
解决方法：使用 linkbutton 方法重新初始化：

$('.easyui-linkbutton').linkbutton();

六、总结与展望

通过本文的讲解，开发者应能掌握以下核心能力：

  1. 工具栏的配置语法：静态定义与动态添加
  2. 基础交互实现：按钮点击、搜索功能
  3. 样式与扩展：图标美化、后端对接

未来，随着项目复杂度的提升，可以进一步探索以下功能：

  • 工具栏与表单的联动（如批量操作）
  • 多语言支持（国际化工具栏文本）
  • 响应式布局适配移动端

jQuery EasyUI 数据网格 – 添加工具栏 是构建现代化数据管理界面的关键步骤。通过合理设计工具栏，不仅能够提升用户操作效率，还能为后续的复杂业务逻辑打下坚实基础。希望本文的示例与技巧，能帮助开发者快速上手并优化自己的项目。

提示：本文代码可在 EasyUI 官网 的示例环境中直接运行测试。

最新发布

查看更多文章