异常教程

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 开发中，对话框（Dialog）是一个常见的交互组件，它能够帮助开发者以直观的方式呈现信息、收集用户输入或执行特定操作。而 jQuery EasyUI 窗口 – 自定义带有工具条和按钮的对话框，正是通过灵活的配置和丰富的功能，为开发者提供了一种高效且直观的解决方案。本文将从基础概念到实战案例，逐步讲解如何利用 jQuery EasyUI 实现一个功能强大的自定义对话框，并深入探讨工具条、按钮的定制技巧，以及如何通过代码示例提升开发效率。

2. 初识 jQuery EasyUI 窗口组件

2.1 核心概念与作用

jQuery EasyUI 是一个基于 jQuery 的轻量级 UI 框架，其核心目标是通过简单的配置实现复杂的 Web 界面。其中，窗口（Window）组件是框架中用于弹出对话框的核心模块，它支持自定义标题栏、内容区域、按钮和工具条，能够满足大多数对话框场景的需求。

例如，当用户需要在页面上弹出一个“用户信息编辑”窗口时，可以通过 EasyUI 窗口组件快速构建一个带有表单、提交按钮和工具栏的对话框，而无需从零开始编写复杂的 CSS 和 JavaScript 代码。

2.2 安装与配置

要使用 jQuery EasyUI，首先需要引入其核心文件。可以通过 CDN 或本地文件的方式引入：

<!-- 通过 CDN 引入 -->
<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">
<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>

配置完成后，即可通过 HTML 和 JavaScript 代码创建基础窗口。

3. 基础对话框的创建

3.1 最简示例

以下是一个最简单的对话框示例，通过 HTML 的 div 标签和 EasyUI 的 window 方法实现：

<div id="basicDialog" class="easyui-window" title="基础对话框"  
     style="width:400px;height:200px;padding:10px"  
     data-options="collapsible:false, minimizable:false">  
  这是一个最基本的对话框内容区域。  
</div>  

<script>  
$(document).ready(function() {  
  $("#basicDialog").window("open");  
});  
</script>

3.2 关键配置项说明

在上述代码中，data-options 属性用于设置窗口的可折叠、最小化等行为。以下是一些常用配置项：
| 配置项 | 说明 |
|----------------------|------------------------------|
| collapsible | 是否允许折叠（默认为 true） |
| minimizable | 是否允许最小化（默认为 true）|
| closable | 是否显示关闭按钮（默认为 true）|
| modal | 是否为模态窗口（默认为 false）|

4. 自定义工具条（Toolbar）

4.1 工具条的作用与实现

工具条（Toolbar）是对话框顶部或底部的一组按钮或链接，用于快速执行特定操作。例如，在编辑对话框中，工具条可以包含“保存”“重置”等按钮。

通过 EasyUI 的 toolbar 配置项，可以轻松定义工具条的 HTML 结构：

<div id="dialogWithToolbar" class="easyui-window" title="带工具条的对话框"  
     style="width:600px;height:400px"  
     data-options="  
       toolbar: [  
         {  
           text: '保存',  
           iconCls: 'icon-save',  
           handler: function() { alert('保存成功！'); }  
         },  
         {  
           text: '重置',  
           iconCls: 'icon-reload',  
           handler: function() { alert('已重置！'); }  
         }  
       ]  
     ">  
  这是对话框内容区域。  
</div>

4.2 工具条的高级用法

4.2.1 内联 HTML 结构

除了使用 JSON 格式的配置项，还可以直接将 HTML 代码嵌入到工具条中：

<div id="dialogWithHtmlToolbar" class="easyui-window" title="自定义 HTML 工具条"  
     style="width:600px;height:400px"  
     data-options="  
       toolbar: '#customToolbar'  
     ">  
  <!-- 对话框内容 -->  
</div>  

<!-- 工具条 HTML 结构 -->  
<div id="customToolbar">  
  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="saveData()">保存</a>  
  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="resetForm()">重置</a>  
</div>

4.2.2 图标与样式的配合

EasyUI 提供了丰富的图标类（如 icon-save、icon-edit），可以通过 iconCls 属性为按钮添加图标，提升界面美观性。例如：

<a href="#" class="easyui-linkbutton" iconCls="icon-print">打印</a>

5. 按钮的动态绑定与事件处理

5.1 按钮的事件绑定

在工具条中定义的按钮可以通过 handler 属性直接绑定点击事件，但更灵活的方式是通过 JavaScript 动态绑定：

$("#dialogWithToolbar").window({  
  onOpen: function() {  
    // 窗口打开时触发  
    $("#saveButton").on("click", function() {  
      // 执行保存逻辑  
    });  
  }  
});

5.2 常用事件与生命周期方法

EasyUI 窗口提供了多个事件钩子，用于在特定时刻执行代码：
| 事件名称 | 触发时机 |
|----------------|------------------------------|
| onOpen | 窗口打开时 |
| onBeforeClose| 关闭前触发（可取消关闭操作） |
| onClose | 窗口关闭后 |

6. 高级定制：样式与布局优化

6.1 自定义样式

通过 CSS 可以覆盖 EasyUI 的默认样式，例如修改工具条背景色：

.easyui-window .panel-tool {  
  background-color: #f0f0f0;  
}

6.2 响应式布局

为确保对话框在不同设备上显示正常，可以结合媒体查询调整尺寸：

@media (max-width: 768px) {  
  .easyui-window {  
    width: 90% !important;  
    height: auto !important;  
  }  
}

7. 完整案例：一个可编辑的用户信息对话框

7.1 案例需求

假设我们需要一个包含以下功能的对话框：

  • 标题栏显示“编辑用户信息”
  • 工具条包含“保存”“取消”按钮
  • 内容区域包含表单字段（姓名、邮箱、电话）
  • 点击“保存”时提交表单数据

7.2 HTML 与 JavaScript 实现

<!-- 对话框 HTML -->  
<div id="userInfoDialog" class="easyui-window" title="编辑用户信息"  
     style="width:600px;height:400px"  
     data-options="  
       modal: true,  
       closed: true,  
       toolbar: '#userToolbar'  
     ">  
  <form id="userForm">  
    <div style="padding: 20px;">  
      <label>姓名：</label>  
      <input class="easyui-textbox" name="name" required>  
      <br><br>  
      <label>邮箱：</label>  
      <input class="easyui-validatebox" name="email" validType="email">  
      <br><br>  
      <label>电话：</label>  
      <input class="easyui-numberbox" name="phone" data-options="min:0, max:9999999999">  
    </div>  
  </form>  
</div>  

<!-- 工具条 HTML -->  
<div id="userToolbar">  
  <a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="saveUser()">保存</a>  
  <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="closeDialog()">取消</a>  
</div>  

<!-- JavaScript 逻辑 -->  
<script>  
function openDialog() {  
  $("#userInfoDialog").window("open");  
}  

function saveUser() {  
  if ($("#userForm").form("validate")) {  
    // 提交表单逻辑（例如：$.post(...)）  
    alert("保存成功！");  
    closeDialog();  
  }  
}  

function closeDialog() {  
  $("#userInfoDialog").window("close");  
}  
</script>

8. 常见问题与解决方案

8.1 对话框无法关闭

原因：可能未正确绑定关闭事件或按钮配置错误。
解决方案：检查 closable 属性是否设为 true，或直接调用 $("#dialog").window("close")。

8.2 工具条按钮不显示

原因：工具条 HTML 结构未正确绑定到窗口。
解决方案：确保 toolbar 配置项指向正确的 HTML 元素 ID，例如 toolbar: '#userToolbar'。

结论

通过本文的讲解，读者可以掌握如何使用 jQuery EasyUI 窗口 – 自定义带有工具条和按钮的对话框，并灵活应用在实际项目中。从基础配置到高级样式调整，再到完整的表单交互案例，我们逐步展示了如何通过 EasyUI 的强大功能简化开发流程。

无论是需要快速搭建一个简单的信息提示框，还是希望实现复杂的表单编辑对话框，jQuery EasyUI 的窗口组件都能提供高效且可定制的解决方案。建议开发者在实践中多尝试不同配置组合，并结合官方文档（EasyUI 官网 ）深入探索更多功能，以进一步提升开发效率和用户体验。

最新发布

查看更多文章