首页
/ 正文

jQuery EasyUI 窗口 – 自定义窗口工具栏（手把手讲解）

更新时间: 2025-04-04 19:27:38

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 开发中，用户界面（UI）的交互体验是衡量应用质量的重要指标之一。jQuery EasyUI 作为一款功能强大的开源 UI 框架，凭借其丰富的组件库和简洁的 API 设计，成为许多开发者构建企业级应用的首选工具。其中，窗口（Window）组件因其灵活的弹窗交互特性，被广泛应用于表单提交、信息提示、数据编辑等场景。然而，默认的窗口工具栏功能有限，无法满足复杂业务需求。本文将深入探讨如何通过自定义窗口工具栏，为开发者提供更自由的 UI 控制能力，帮助读者掌握这一实用技能，并通过案例演示实现从基础到进阶的完整实践路径。

二、基础概念解析

2.1 窗口与工具栏的关系

在 jQuery EasyUI 中，窗口（Window）是一个可移动、可缩放的弹窗容器，而工具栏（Toolbar）则是位于窗口顶部的按钮集合区域，用于触发特定操作。默认情况下，工具栏仅包含“关闭”按钮，但通过配置 toolbar 属性，开发者可以自定义任意数量的按钮或自定义 HTML 内容，例如：

$('#myWindow').window({
    title: '用户信息',
    width: 400,
    height: 300,
    toolbar: [{
        text: '保存',
        iconCls: 'icon-save',
        handler: function() { alert('保存成功！'); }
    }, {
        text: '取消',
        iconCls: 'icon-cancel',
        handler: function() { $('#myWindow').window('close'); }
    }]
});

形象比喻：如果将窗口比作一辆汽车，工具栏就是方向盘上的功能按钮——方向盘本身是基础，但按钮可以自由增减，以满足不同驾驶场景的需求。

2.2 工具栏的两种定义方式

jQuery EasyUI 提供了两种自定义工具栏的方法：

内联配置：直接在窗口初始化时通过 toolbar 属性定义按钮数组（如上例）。
分离式定义：先声明一个 HTML 容器，再通过 toolbar 属性引用该容器的 ID。例如：

<!-- HTML 结构 -->
<div id="customToolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit">编辑</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-delete">删除</a>
</div>

$('#myWindow').window({
    toolbar: '#customToolbar'
});

关键点：分离式定义更适合复杂工具栏（如包含表单或动态内容），且便于复用代码。

三、实现步骤详解

3.1 步骤一：创建基本窗口

首先确保页面已引入 jQuery 和 jQuery EasyUI 的核心文件：

<link rel="stylesheet" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" href="easyui/themes/icon.css">
<script src="jquery.min.js"></script>
<script src="easyui/jquery.easyui.min.js"></script>

然后通过 HTML 和 JavaScript 创建一个基础窗口：

$(function() {
    $('#createWindow').click(function() {
        $('<div>').window({
            title: '自定义窗口',
            width: 500,
            height: 400
        });
    });
});

点击按钮即可弹出默认窗口，此时工具栏仅包含关闭按钮。

3.2 步骤二：添加自定义按钮

在初始化窗口时，通过 toolbar 属性添加按钮。每个按钮需定义以下属性：

text：按钮显示的文本。
iconCls（可选）：引用 EasyUI 图标类名（如 icon-search）。
handler：点击事件的回调函数。

toolbar: [{
    text: '查询',
    iconCls: 'icon-search',
    handler: function() { alert('执行查询操作'); }
}, {
    text: '重置',
    handler: function() { alert('重置表单'); }
}]

技巧：按钮顺序由数组中对象的排列决定，可通过调整顺序控制按钮的显示位置。

3.3 步骤三：动态修改工具栏

若需在窗口打开后动态增减按钮，可通过 window('refreshToolbar') 方法重新渲染工具栏：

// 假设窗口 ID 为 'myWindow'
var newButton = [{
    text: '新增功能',
    iconCls: 'icon-add',
    handler: function() { /* 处理逻辑 */ }
}];
$('#myWindow').window('refreshToolbar', newButton);

此方法适用于根据用户权限或数据状态动态调整工具栏的行为。

四、高级技巧与案例

4.1 案例：用户管理窗口

需求：实现一个用户管理窗口，包含“添加”“删除”“导出”三个按钮，并在点击时执行不同操作。

4.1.1 HTML 结构

<!-- 触发按钮 -->
<button id="openUserWindow">打开用户管理</button>

<!-- 工具栏容器 -->
<div id="userToolbar" style="display: none;">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="addUser()">添加</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="deleteUser()">删除</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-export" onclick="exportData()">导出</a>
</div>

4.1.2 JavaScript 实现

$(function() {
    $('#openUserWindow').click(function() {
        $('<div>').window({
            title: '用户管理',
            width: 800,
            height: 600,
            toolbar: '#userToolbar',
            content: '<p>用户数据表格或其他内容</p>'
        });
    });
});

function addUser() {
    alert('触发添加用户逻辑');
}

function deleteUser() {
    if (confirm('确定删除选中用户？')) {
        alert('执行删除操作');
    }
}

function exportData() {
    alert('导出数据到 Excel');
}

4.1.3 关键点说明

工具栏容器隐藏：通过 style="display: none;" 避免未弹窗时工具栏显示在页面上。
事件分离：将按钮事件绑定到独立函数（如 addUser()），便于代码复用和维护。

4.2 权限控制与条件渲染

在实际项目中，不同角色的用户可能拥有不同的操作权限。可通过判断用户角色动态生成工具栏内容：

function generateToolbar() {
    let toolbarItems = [];
    if (userRole === 'admin') {
        toolbarItems.push({
            text: '管理权限',
            iconCls: 'icon-lock',
            handler: function() { /* 管理权限逻辑 */ }
        });
    }
    toolbarItems.push({ text: '通用功能', handler: function() {} }); // 所有用户可见
    return toolbarItems;
}

$('#myWindow').window({
    toolbar: generateToolbar()
});

4.3 工具栏样式定制

通过覆盖 EasyUI 的默认样式，可实现更个性化的视觉效果：

/* 修改按钮背景色 */
.easyui-window .panel-toolbar a {
    background-color: #4CAF50;
    color: white;
}

/* 设置按钮间距 */
.easyui-window .panel-toolbar a + a {
    margin-left: 10px;
}

五、常见问题与解决方案

5.1 问题：按钮点击事件不触发

原因：未正确绑定事件或 handler 函数语法错误。
解决方案：

检查按钮配置是否缺少 handler 属性。
确保回调函数无语法错误，或尝试在控制台打印日志验证执行路径。

5.2 问题：动态添加的按钮无法显示

原因：未调用 refreshToolbar 方法重新渲染。
解决方案：

// 示例：在窗口打开后添加新按钮
var newBtn = { text: '新功能', handler: function() {} };
$('#myWindow').window('refreshToolbar', 
    $('#myWindow').window('options').toolbar.concat(newBtn)
);

六、总结与扩展

通过本文的讲解，读者已掌握如何利用 jQuery EasyUI 窗口 – 自定义窗口工具栏 功能，实现从基础配置到动态权限控制的完整流程。关键步骤包括：

理解窗口与工具栏的关联及配置方式。
掌握静态与动态定义工具栏的实现方法。
结合实际案例，学习如何将业务逻辑与 UI 控件无缝衔接。

对于希望进一步提升技能的开发者，建议深入探索以下方向：

组件联动：将工具栏按钮与窗口内的表单、数据表格等组件联动，构建复杂交互。
响应式设计：通过 CSS 媒体查询适配不同屏幕尺寸的工具栏布局。
第三方图标集成：使用 Font Awesome 或自定义 SVG 图标替代默认图标。

最后提醒：实践是掌握技术的最佳途径。建议读者根据本文示例搭建本地开发环境，逐步调试代码并尝试扩展功能。遇到问题时，可查阅官方文档或在社区（如 Stack Overflow）搜索关键词“jQuery EasyUI window toolbar”，获取更多解决方案。

通过灵活运用自定义工具栏技术，开发者不仅能提升界面的交互友好度，还能显著增强应用的可维护性和扩展性，为用户提供更优质的使用体验。

jQuery EasyUI 窗口 – 自定义窗口工具栏（手把手讲解）

二、基础概念解析

2.1 窗口与工具栏的关系

2.2 工具栏的两种定义方式

三、实现步骤详解

3.1 步骤一：创建基本窗口

3.2 步骤二：添加自定义按钮

3.3 步骤三：动态修改工具栏

四、高级技巧与案例

4.1 案例：用户管理窗口

4.1.1 HTML 结构

4.1.2 JavaScript 实现

4.1.3 关键点说明

4.2 权限控制与条件渲染

4.3 工具栏样式定制

五、常见问题与解决方案

5.1 问题：按钮点击事件不触发

5.2 问题：动态添加的按钮无法显示

六、总结与扩展

最新发布

CSS3 背景（千字长文）

CSS3 文本效果（超详细）

CSS3 字体（保姆级教程）

CSS3 2D 转换（长文讲解）

CSS3 3D 转换（长文讲解）

CSS3 过渡（长文解析）

CSS3 动画（长文讲解）

CSS3 多列（超详细）

CSS3 用户界面（长文解析）

JavaScript 简介（超详细）