jEasyUI 树形菜单学习笔记

简介

jEasyUI 是一款简单易用的 jQuery 插件库，其中包含了丰富的组件，如树形菜单、表格、对话框等。其中，树形菜单是其最为常用和重要的组件之一。

基本用法

使用 jEasyUI 创建一个树形菜单非常简单，只需按照以下步骤进行即可：

引入 jEasyUI 的 CSS 和 JavaScript 文件
编写 HTML 代码，在其中添加一个 div 标签，作为树形菜单容器
使用 jQuery 代码初始化树形菜单组件

具体代码如下：

htmlCopy Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jEasyUI 树形菜单学习笔记</title>

    <!-- 引入 jEasyUI 的 CSS 文件 -->
    <link rel="stylesheet" type="text/css" href="http://cdn.jeasyui.com/easyui/themes/bootstrap/easyui.css">

    <!-- 引入 jQuery 和 jEasyUI 的 JavaScript 文件 -->
    <script type="text/javascript" src="http://cdn.jeasyui.com/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <!-- 定义一个 div 标签，作为树形菜单的容器 -->
    <div id="tree"></div>

    <script type="text/javascript">
        // 使用 jQuery 代码初始化树形菜单组件
        $('#tree').tree({
            data: [{
                text: 'Node 1',
                children: [{
                    text: 'Node 1.1'
                }, {
                    text: 'Node 1.2'
                }]
            }, {
                text: 'Node 2'
            }]
        });
    </script>
</body>
</html>

以上代码会生成一个简单的树形菜单，如下图所示：

jEasyUI 树形菜单基本样式

实例

下面是一个使用 jEasyUI 树形菜单的实例，它可以通过点击节点来打开新的标签页并显示相应内容：

htmlCopy Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jEasyUI 树形菜单学习笔记</title>

    <!-- 引入 jEasyUI 的 CSS 文件 -->
    <link rel="stylesheet" type="text/css" href="http://cdn.jeasyui.com/easyui/themes/bootstrap/easyui.css">

    <!-- 引入 jQuery 和 jEasyUI 的 JavaScript 文件 -->
    <script type="text/javascript" src="http://cdn.jeasyui.com/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.jeasyui.com/easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript">
        $(function () {
            // 获取标签页的最大索引值
            var maxTabIndex = 0;

            // 定义一个函数，用于在标签页中添加一个新的页面
            function addTab(title, url) {
                // 如果当前标题的标签页已存在，则选中该标签页并返回
                if ($('#tabs').tabs('exists', title)) {
                    $('#tabs').tabs('select', title);
                    return;
                }

                // 否则，在标签页中添加一个新的页面
                $('#tabs').tabs('add', {
                    title: title,
                    content: '<iframe frameborder="0" style="width:100%;height:100%;" src="' + url + '"></iframe>',
                    closable: true
                });

                // 更新标签页最大索引值
                maxTabIndex++;

                // 重置 tab 组件的布局
                $('#tabs').tabs('resize');
            }

            // 初始化树形菜单组件
            $('#tree').tree({
                url: 'data/tree_data.json',
                onClick: function (node) {
                    // 如果节点没有子节点，则打开对应的标签页
                    if (!$(this).tree('isLeaf', node.target)) {
                        addTab(node.text, node.attributes.url);
                    }
                }
            });

            // 初始化标签页组件
            $('#tabs').tabs({
                fit: true
            });
        });
    </script>
</head>
<body>
    <!-- 定义一个 div 标签，作为树形菜单的容器 -->
    <div id="tree"></div>

    <!-- 定义一个 div 标签，作为标签页容器 -->
    <div id="tabs"></div>
</body>
</html>

以上代码会生成一个带有多个标签页的树形菜单，如下图所示：

jEasyUI 树形菜单实例

在该实例中，我们定义了一个 addTab 函数，用于向标签页中添加新的页面。当用户点击树形菜单中的某个节点时，我们会首先检查该节点是否有子节点，如果没有，则打开一个新的标签页。可以看到，这样的实现不仅简洁有效，而且极大地提高了用户的操作体验。