SSH 电商项目实战（四）：EasyUI 手风琴菜单与动态 Tab 页实现

从静态菜单到动态工作区

上篇搭建了 EasyUI Layout 框架，本篇实现左侧手风琴菜单点击 → 右侧动态打开/切换 Tab 页 → iframe 加载业务页面的完整交互闭环。

菜单结构定义 (aindex.jsp 片段)

<div data-options="region:'west', title:'系统操作', split:true" style="width:200px">
    <div id="menu" class="easyui-accordion" data-options="fit:true">
        <div title="基础操作" data-options="iconCls:'icon-save'">
            <ul>
                <li><a href="#" data-url="send_category_query.action">分类管理</a></li>
                <li><a href="#" data-url="send_product_query.action">商品管理</a></li>
            </ul>
        </div>
        <div title="其他操作" data-options="iconCls:'icon-reload'">
            <ul>
                <li><a href="#" data-url="send_order_query.action">订单管理</a></li>
            </ul>
        </div>
    </div>
</div>

<div data-options="region:'center', title:'后台操作页面'">
    <div id="tabs" class="easyui-tabs" data-options="fit:true">
        <div title="系统首页" data-options="closable:false">
            欢迎使用易购商城后台管理系统
        </div>
    </div>
</div>

关键设计：data-url 存储目标 Action 地址，不使用 href 避免页面跳转，实现单页应用体验。

核心交互 JavaScript

<script>
$(function() {
    // 事件委托：菜单区域所有带 data-url 的链接
    $('#menu a[data-url]').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        var title = $this.text().trim();
        var url = $this.data('url');
        
        openTab(title, url);
    });

    function openTab(title, url) {
        var $tabs = $('#tabs');
        
        // 1. 已存在 → 直接选中
        if ($tabs.tabs('exists', title)) {
            $tabs.tabs('select', title);
            return;
        }
        
        // 2. 不存在 → 新建 Tab，iframe 加载
        $tabs.tabs('add', {
            title: title,
            closable: true,           // 显示关闭按钮
            iconCls: 'icon-standard', // 默认图标
            content: createIframe(url) // iframe 字符串
        });
    }

    function createIframe(url) {
        return '<iframe src="' + url + '" frameborder="0" ' +
               'style="width:100%;height:100%;border:none;"></iframe>';
    }
});
</script>

CSS 美化菜单样式

<style>
#menu ul { list-style: none; padding: 0; margin: 0; }
#menu ul li { border-bottom: 1px solid #fff; }
#menu ul li a {
    display: block;
    padding: 8px 12px;
    background: #00a6ac;
    color: #fff;
    text-decoration: none;
    transition: background 0.2s;
}
#menu ul li a:hover { background: #008792; }
#menu ul li a:active { background: #007078; }
</style>

通用页面分发 Action (回顾)

// SendAction.java
@Action(value = "send_*_*", results = {
    @Result(name = "send", location = "/WEB-INF/{1}/{2}.jsp")
})
public class SendAction extends ActionSupport {
    public String execute() { return "send"; }
}

配合 data-url="send_category_query.action" 自动映射 /WEB-INF/category/query.jsp，新增页面只需在对应目录建 JSP，零配置。

业务页面开发规范 (query.jsp 示例)

<%@ include file="/public/head.jspf" %>
<body>
    <div id="toolbar" style="padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="add()">新增</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" onclick="edit()">编辑</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" onclick="remove()">删除</a>
    </div>

    <table id="dg" class="easyui-datagrid" 
           data-options="
               url:'category_queryJoinAccount.action',
               toolbar:'#toolbar',
               pagination:true,
               fitColumns:true,
               singleSelect:true
           ">
        <thead>
            <tr>
                <th data-options="field:'ck',checkbox:true"></th>
                <th data-options="field:'id',width:80">编号</th>
                <th data-options="field:'type',width:150">分类名称</th>
                <th data-options="field:'hot',width:80,formatter:hotFmt">热销</th>
                <th data-options="field:'account.login',width:150">管理员</th>
            </tr>
        </thead>
    </table>

    <script>
    function hotFmt(val) {
        return val ? '<input type="checkbox" checked disabled>' : '<input type="checkbox" disabled>';
    }
    function add() { /* 打开编辑对话框 */ }
    function edit() { /* 获取选中行打开编辑 */ }
    function remove() { /* 批量删除确认 */ }
    </script>
</body>

iframe 模式 vs href 模式对比

常见问题解决

1. Tab 标题过长截断：CSS .tabs-title { max-width: 120px; text-overflow: ellipsis; }
2. iframe 高度自适应：EasyUI fit:true 自动撑满父容器，无需手动计算
3. 菜单图标不显示：确保 icon.css 引入，类名格式 icon-xxx
4. 重复打开同一 Tab：tabs('exists') 判断已完美解决
5. 关闭 Tab 释放内存：EasyUI onClose 回调中可手动 iframe.src = 'about:blank'

总结

EasyUI 菜单 + Tab 核心模式：Accordion 手风琴收纳菜单 → data-url 存储路由 → 点击触发 openTab → iframe 隔离业务页面。配合 Struts2 通用分发 Action，实现「菜单即路由、页面即组件」的低代码后台开发模式。下一步将接入 DataGrid 完成数据展示与增删改查。

1. 上一篇文章： Java Web 验证码实现全攻略：Servlet 绘图、Session 校验、前端交互
2. 下一篇文章： Java Socket 實現 SMTP 協議發送郵件完整教學

Java 相關知識

Java 7 SDP：突破極限的高性能網絡協議

SDP 核心價值 Java 7 引入的 Sockets Di

EMF 介紹系列（七）：.Edit 元件初探與 ItemProvider 核心功能

.Edit 元件概覽 EMF 不僅生成核心模型（介面與實作類

Eclipse 開發 J2ME 完整指南（二）：EclipseMe 外掛安裝與配置

承接上篇環境建置，本文詳細記錄 EclipseMe 0.5.

藍牙開發實戰（三）：基於藍牙通信的雙人五子棋完整實現

專案概覽 基於 J2ME + JSR-82 實現的 C/S