异常教程

jQuery EasyUI 扩展 – Portal（手把手讲解）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 扩展 – Portal 正是这样一个工具，它通过提供可拖拽、可调整、可配置的模块化布局，帮助开发者快速构建高度自定义的门户页面。无论是企业级仪表盘、多组件协作的工作台，还是个性化配置的用户中心，Portal 都能以简洁的 API 和直观的交互设计，降低复杂布局的实现难度。

本文将从零开始讲解 Portal 的核心概念、配置方法和实际应用场景，通过代码示例和循序渐进的步骤，帮助读者掌握这一工具的精髓。无论你是编程新手还是有一定经验的开发者，都能从中找到适合自己的学习路径。

核心概念与核心组件

1. Portal 的定义与功能

Portal（门户）是一种允许用户自由调整页面布局和模块位置的交互式界面。在 jQuery EasyUI 中，Portal 扩展将这一概念具象化为可拖拽的面板（Panels），每个面板可以包含独立的内容、标题和操作按钮。用户可以通过拖拽调整面板的位置、大小，甚至关闭或重新排列模块，从而实现“所见即所得”的个性化体验。

形象比喻：
想象一个由多个磁力白板组成的墙面，每个白板（即 Portal 面板）都可以自由移动、缩放，甚至被用户贴上不同的便签或图表。Portal 的作用就是让开发者像搭积木一样，快速构建这样的动态交互空间。

2. 核心组件与结构

Portal 的核心由以下部分组成：

  • Portal 容器（.easyui-portal）：定义整个布局的父容器，负责管理所有面板的排列和交互。
  • Portal 面板（.panel）：可独立拖拽的模块单元，通常包含标题栏、内容区域和操作按钮。
  • 配置选项：通过 jQuery 初始化时的参数，控制面板的可拖拽性、最小/最大尺寸、默认布局等。

结构示例：

<div class="easyui-portal" style="width:100%;height:500px;">  
    <div title="面板 1" style="width:300px;">  
        <!-- 内容区域 -->  
    </div>  
    <div title="面板 2" style="width:300px;">  
        <!-- 其他内容 -->  
    </div>  
</div>

快速入门：创建一个基础 Portal

1. 环境准备

在开始之前，需确保已引入 jQuery 和 EasyUI 的核心库：

<!-- 在 HTML 的 <head> 中添加 -->  
<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>

2. 初始化 Portal

通过以下步骤创建一个基础 Portal：

步骤 1：定义 HTML 结构

<div id="myPortal" class="easyui-portal" style="width:100%;height:500px;"></div>

步骤 2：初始化 JavaScript 配置

$(document).ready(function() {  
    $('#myPortal').portal({  
        closable: true,  // 允许关闭面板  
        droppable: true // 允许拖拽调整位置  
    });  
});

步骤 3：动态添加面板

// 添加第一个面板  
$('#myPortal').portal('add', {  
    title: '天气预报',  
    href: 'weather.html', // 从外部文件加载内容  
    style: 'width:300px;'  
});  

// 添加第二个面板  
$('#myPortal').portal('add', {  
    title: '待办事项',  
    content: '<ul><li>任务1</li><li>任务2</li></ul>',  
    style: 'width:300px;'  
});

3. 运行效果

此时，页面将显示两个可拖拽的面板，用户可以通过点击标题栏的叉号关闭面板，或通过拖拽调整面板的位置和大小。

Portal 的核心配置与进阶技巧

1. 关键配置参数详解

通过以下表格，了解 Portal 的核心配置选项及其作用：

参数名描述默认值
closable是否允许关闭面板false
collapsible是否允许折叠面板false
droppable是否允许通过拖拽调整面板位置false
fit是否自适应容器尺寸false
minWidth面板的最小宽度（像素）100
onBeforeClose面板关闭前触发的回调函数（可用于验证操作）-

示例：设置面板的最小宽度并添加关闭确认：

$('#myPortal').portal({  
    minWidth: 200,  
    onBeforeClose: function(panel) {  
        return confirm('确定要关闭此面板吗？');  
    }  
});

2. 动态管理面板

Portal 支持通过 API 动态添加、移除或更新面板：

// 移除指定面板  
$('#myPortal').portal('remove', '面板ID');  

// 更新面板内容  
$('#myPortal').portal('update', {  
    target: '面板ID',  
    content: '<div>新内容</div>'  
});

3. 与 EasyUI 组件的结合

Portal 可与其他 EasyUI 组件（如 Accordion、Tabs）嵌套使用，扩展功能。例如，在面板中嵌入一个选项卡：

<div title="数据看板" style="width:400px;">  
    <div class="easyui-tabs" style="width:100%;height:300px;">  
        <div title="图表">  
            <!-- ECharts 图表代码 -->  
        </div>  
        <div title="表格">  
            <table class="easyui-datagrid"></table>  
        </div>  
    </div>  
</div>

实战案例：企业级仪表盘

1. 需求分析

假设我们要为一家公司搭建一个实时监控仪表盘，要求：

  • 包含销售数据、工单统计、实时通知三个模块；
  • 用户可自由调整模块的排列和大小；
  • 点击“保存布局”按钮后，布局信息持久化存储。

2. 实现步骤

步骤 1：HTML 结构

<div id="dashboard" class="easyui-portal" style="width:100%;height:800px;"></div>  
<button onclick="saveLayout()">保存布局</button>

步骤 2：初始化 Portal 并加载数据

$(document).ready(function() {  
    $('#dashboard').portal({  
        droppable: true,  
        closable: false // 禁止关闭核心模块  
    });  

    // 添加三个面板  
    const panels = [  
        { title: '销售数据', href: 'sales.html', style: 'width:300px;' },  
        { title: '工单统计', href: 'tickets.html', style: 'width:300px;' },  
        { title: '实时通知', content: '<div id="notification"></div>', style: 'width:600px;' }  
    ];  

    panels.forEach(panel => {  
        $('#dashboard').portal('add', panel);  
    });  
});

步骤 3：持久化布局信息

通过 serialize 方法获取当前布局的 JSON 数据，并通过 AJAX 提交到服务器：

function saveLayout() {  
    const layoutData = $('#dashboard').portal('serialize');  
    console.log('当前布局:', layoutData);  
    // 发送至服务器的逻辑...  
}

常见问题与解决方案

1. 问题：面板无法拖拽

原因：可能未设置 droppable: true 或容器未指定高度。
解决：

$('#myPortal').portal({  
    droppable: true, // 必须开启拖拽功能  
    style: 'height: 500px;' // 确保容器有固定尺寸  
});

2. 问题：布局保存后无法还原

原因：serialize 返回的数据格式未被正确解析。
解决：

// 保存布局时  
const layoutData = $('#dashboard').portal('serialize');  

// 还原布局时  
$('#dashboard').portal('load', layoutData);

结论

通过本文的讲解，我们看到了 jQuery EasyUI 扩展 – Portal 在构建动态、可定制化界面中的强大能力。无论是基础的拖拽功能，还是与高级组件的结合，Portal 都能以最小的代码量实现复杂的交互逻辑。

对于开发者而言，掌握 Portal 的核心配置和 API 是关键。建议从简单的示例入手，逐步尝试嵌套其他组件或实现持久化功能。随着实践的深入，Portal 将成为你构建现代化 Web 应用的重要工具之一。

如需进一步探索，可参考官方文档或尝试将 Portal 与用户权限系统结合，实现基于角色的个性化布局。祝你在开发中享受乐趣，高效实现需求！

最新发布

查看更多文章