Jquery easyui 实现动态树

JQuery EasyUI 是一个基于jQuery的UI组件库，提供了常见的UI组件如表格、表单、下拉框、树等等。它简化了前端页面开发的流程，使得开发人员能够更加便捷地构建富客户端应用程序。本篇文章将详细讲解如何使用 JQuery EasyUI 实现一个动态树，并提供两个示例。

一、准备工作

在开始实现动态树之前，我们需要准备以下工作：

1.安装JQuery EasyUI: 我们可以从官网下载最新的CSS和JavaScript文件，并引入到我们的HTML文件中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态树示例</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.7/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.7/themes/icon.css">
    <script type="text/javascript" src="jquery-easyui-1.9.7/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.9.7/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="tree"></div>
</body>
</html>

2.创建一棵静态树：我们可以利用 JQuery EasyUI 中提供的 tree 组件，创建一棵简单的静态树。在HTML文件中添加以下代码：

<ul id="treeData">
    <li>根节点
        <ul>
            <li>节点1</li>
            <li>节点2</li>
        </ul>
    </li>
</ul>

3.使用 JavaScript 代码初始化树形菜单：

$(function () {
    $('#tree').tree({
        data: $('#treeData').html()
    });
});

这样我们就可以在页面上看到一棵简单的树形菜单了。

二、实现动态树形菜单

有时候我们需要在树形菜单中增加、删除、修改节点，或者根据用户的操作动态更新树形菜单。这时候就需要实现动态树形菜单。在 JQuery EasyUI 中，我们可以使用 tree 组件的相关方法来实现。

1. 增加节点

我们可以使用 tree 的 append 方法向树形菜单中增加节点。例如，我们可以在根节点下增加一个名为“节点3”的节点，代码如下：

$('#tree').tree('append', {
    parent: $('#tree').tree('getRoot'),
    data: [{
        id: 'node3',
        text: '节点3'
    }]
});

2. 删除节点

我们可以使用 tree 的 remove 方法删除树形菜单中的节点。例如，我们可以删除名为“节点3”的节点，代码如下：

var node = $('#tree').tree('find', 'node3');
$('#tree').tree('remove', node.target);

3. 修改节点

我们可以使用 tree 的 update 方法修改树形菜单中的节点。例如，我们可以将名为“节点2”的节点修改为“节点2（更新）”，代码如下：

var node = $('#tree').tree('find', 'node2');
node.text = '节点2（更新）';
$('#tree').tree('update', node);

4. 加载远程数据

我们可以使用 tree 的 load 方法加载远程数据。例如，我们可以从服务器端获取节点数据，并将其添加到根节点下，代码如下：

$('#tree').tree({
    url: 'getTreeData.php'
});

在这个例子中，我们需要编写一个名为“getTreeData.php”的服务端脚本来获取节点数据。例如，我们可以返回以下JSON格式的数据：

[{
    id: 'node4',
    text: '节点4',
    children: []
}, {
    id: 'node5',
    text: '节点5',
    children: []
}]

根据上述数据，我们可以使用以下代码向根节点下添加节点：

$('#tree').tree('append', {
    parent: $('#tree').tree('getRoot'),
    data: [{
        id: 'node4',
        text: '节点4',
        children: []
    }, {
        id: 'node5',
        text: '节点5',
        children: []
    }]
});

三、示例

下面提供两个关于动态树的示例。

1. 基于 easyui 实现动态树

HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态树示例</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.7/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.9.7/themes/icon.css">
    <script type="text/javascript" src="jquery-easyui-1.9.7/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.9.7/jquery.easyui.min.js"></script>
</head>
<body>
    <div style="margin:20px;">
        <a href="#" onclick="addNode()">增加节点</a>
        <a href="#" onclick="removeNode()">删除节点</a>
        <a href="#" onclick="updateNode()">修改节点</a>
        <ul id="treeData">
            <li>根节点
                <ul>
                    <li>节点1</li>
                    <li>节点2</li>
                </ul>
            </li>
        </ul>
        <div id="tree"></div>
    </div>
    <script type="text/javascript">
        function addNode() {
            // 增加节点
            $('#tree').tree('append', {
                parent: $('#tree').tree('getRoot'),
                data: [{
                    id: 'node3',
                    text: '节点3'
                }]
            });
        }

        function removeNode() {
            // 删除节点
            var node = $('#tree').tree('find', 'node3');
            $('#tree').tree('remove', node.target);
        }

        function updateNode() {
            // 修改节点
            var node = $('#tree').tree('find', 'node2');
            node.text = '节点2（更新）';
            $('#tree').tree('update', node);
        }

        $(function () {
            $('#tree').tree({
                data: $('#treeData').html()
            });
        });
    </script>
</body>
</html>

2.基于 easyui 实现远程加载动态树