jEasyUI 树形菜单加载父/子节点

最新推荐文章于 2025-12-07 17:05:22 发布

原创最新推荐文章于 2025-12-07 17:05:22 发布 · 564 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言

jEasyUI 树形菜单加载父/子节点

jEasyUI 是一个基于 jQuery 的用户界面插件集合，它为开发者提供了一系列常用的 UI 组件，如菜单、表格、树形结构等，以简化用户界面的开发过程。在本文中，我们将重点讨论如何使用 jEasyUI 创建一个树形菜单，并实现父/子节点的动态加载。

1. 准备工作

在开始之前，请确保您的项目中已经包含了以下资源：

jQuery 库
jEasyUI 插件库
jEasyUI 树形菜单的 CSS 文件

您可以通过以下方式在 HTML 文件中引入这些资源：

<link rel="stylesheet" type="text/css" href="jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jeasyui/themes/icon.css">
<script type="text/javascript" src="jeasyui/jquery.min.js"></script>
<script type="text/javascript" src="jeasyui/jquery.easyui.min.js"></script>

2. 创建树形菜单

首先，在 HTML 中创建一个用于展示树形菜单的容器：

<div id="tree" class="easyui-tree"></div>

然后，通过 JavaScript 初始化树形菜单：

$('#tree').tree({
    url: 'tree_data.json', // 数据源 URL
    method: 'get', // 请求方法
    animate: true, // 动画效果
    lines: true, // 显示连接线
    dnd: true, // 启用拖放
    onClick: function(node){ // 节点点击事件
        alert(node.text); // 弹出节点文本
    }
});

3. 动态加载父/子节点

在 jEasyUI 中，您可以通过两种方式动态加载父/子节点：

3.1 使用 URL

在初始化树形菜单时，您可以指定一个 URL 作为数据源。当用户展开一个节点时，树形菜单会自动向该 URL 发送请求，并加载子节点数据。

例如：

$('#tree').tree({
    url: 'get_children.php?id=<?php echo $id; ?>',
    method: 'get',
    animate: true,
    lines: true,
    dnd: true,
    onClick: function(node){
        alert(node.text);
    }
});

在上述示例中，get_children.php 是一个服务器端脚本，它接收一个名为 id 的参数，并根据该参数返回相应的子节点数据。

3.2 使用 AJAX

您还可以使用 AJAX 手动加载父/子节点。当用户展开一个节点时，您可以捕获 onExpand 事件，并通过 AJAX 请求从服务器获取数据。

例如：

$('#tree').tree({
    animate: true,
    lines: true,
    dnd: true,
    onClick: function(node){
        alert(node.text);
    },
    onExpand: function(node){
        if ($('#tree').tree('isLeaf', node.target)) {
            $('#tree').tree('options').url = 'get_children.php?id=' + node.id;
            $('#tree').tree('reload', node.target);
        }
    }
});

在上述示例中，当用户展开一个节点时，onExpand 事件会被触发。如果该节点是叶子节点，我们将更新树形菜单的 URL 并重新加载该节点的子节点。