SSH框架网上商城项目第4战之EasyUI菜单的实现攻略

1. 前置条件

已经配置好SSH框架，并成功部署网上商城项目。
已经引入EasyUI库文件。

2. 实现步骤

2.1 HTML页面中添加菜单代码

在HTML页面的菜单区域添加以下代码：

<div id="menu" class="easyui-tree" data-options="url:'menu.json',method:'get',animate:true"></div>

其中，id属性设置为"menu"，表示菜单的容器；class属性设置为"easyui-tree"，表示这是EasyUI树形菜单；data-options指定了菜单的数据来源menu.json，并指定了请求方式method为GET。

2.2 准备菜单数据

在项目目录中新建一个名为menu.json的文件，用于存储菜单数据。示例代码如下：

[{
    "id": 1,
    "text": "商品管理",
    "iconCls": "icon-products",
    "children": [{
        "id": 11,
        "text": "添加商品",
        "attributes": {
            "url": "products_add.html"
        }
    }, {
        "id": 12,
        "text": "商品列表",
        "attributes": {
            "url": "products_list.html"
        }
    }]
}, {
    "id": 2,
    "text": "订单管理",
    "iconCls": "icon-orders",
    "children": [{
        "id": 21,
        "text": "待发货订单",
        "attributes": {
            "url": "orders_wait.html"
        }
    }, {
        "id": 22,
        "text": "已发货订单",
        "attributes": {
            "url": "orders_sent.html"
        }
    }]
}]

以上示例代码中，定义了两个主菜单，每个主菜单下分别有两个子菜单，每个子菜单都指定了相应页面的URL。

2.3 JS代码实现菜单加载

在页面中添加以下JS代码，用于实现菜单的加载和点击事件。

$(function(){
    $('#menu').tree({
        onClick: function(node){
            if (node.attributes.url){
                if ($('#tt').tabs('exists',node.text)){
                    $('#tt').tabs('select', node.text);
                } else {
                    var content = '<iframe scrolling="auto" frameborder="0" src="'+node.attributes.url+'" style="width:100%;height:100%;"></iframe>';
                    $('#tt').tabs('add',{
                        title:node.text,
                        content:content,
                        closable:true
                    });
                }
            }
        }
    });
});

以上代码中，首先使用jQuery选择器获取菜单的容器$('#menu')，然后调用EasyUI的tree()方法实例化树形菜单。onClick方法指定了菜单的单击事件。

在onClick方法中，判断当前点击的节点(node)是否有url属性，如果有，就打开以该属性指定的URL为地址的标签页，如果已经存在该标签页，则激活该标签页。

3. 示例说明

以下是两个实现树形菜单的示例：

示例1

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例1</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/themes/base/theme.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/easyui/1.9.22/themes/bootstrap/easyui.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/easyui/1.9.22/themes/icon.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/easyui/1.9.22/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="menu" class="easyui-tree" data-options="url:'menu.json',method:'get',animate:true"></div>
    <div id="tt" class="easyui-tabs" style="height:100%">
        <div title="主页" data-options="closable:false,href:'home.html'"></div>
    </div>
    <script>
        $(function(){
            $('#menu').tree({
                onClick: function(node){
                    if (node.attributes.url){
                        if ($('#tt').tabs('exists',node.text)){
                            $('#tt').tabs('select', node.text);
                        } else {
                            var content = '<iframe scrolling="auto" frameborder="0" src="'+node.attributes.url+'" style="width:100%;height:100%;"></iframe>';
                            $('#tt').tabs('add',{
                                title:node.text,
                                content:content,
                                closable:true
                            });
                        }
                    }
                }
            });
        });
    </script>
</body>
</html>

上面的示例中，引入了jQuery、jQuery UI和EasyUI库文件，并创建一个空的标签页，用于放置到后续点击菜单节点后打开的标签页中。

示例2

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例2</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/themes/base/theme.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/easyui/1.9.22/themes/bootstrap/easyui.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/easyui/1.9.22/themes/icon.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/easyui/1.9.22/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="menu" class="easyui-tree" data-options="url:'menu.json',method:'get',animate:true"></div>
    <script>
        $(function(){
            $('#menu').tree({
                onClick: function(node){
                    if (node.attributes.url){
                        location.href = node.attributes.url;
                    }
                }
            });
        });
    </script>
</body>
</html>

上面的示例中，与第一个示例类似，但这里不使用选项卡，而是直接通过location.href属性跳转到指定的页面。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：SSH框架网上商城项目第4战之EasyUI菜单的实现 - Python技术站

SSH框架网上商城项目第4战之EasyUI菜单的实现