jEasyUI 树形菜单添加节点的实现示例

2026-03-24 21:58:04发布 3次浏览

详情描述

1. HTML 结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jEasyUI 树形菜单示例</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <div style="margin:20px 0;">
        <button onclick="addRootNode()">添加根节点</button>
        <button onclick="addChildNode()">添加子节点</button>
        <button onclick="updateNode()">修改选中节点</button>
        <button onclick="deleteNode()">删除选中节点</button>
    </div>

    <div style="margin:20px 0">
        <input id="nodeText" class="easyui-textbox" style="width:200px" 
               data-options="prompt:'输入节点文本'">
        <input id="nodeIcon" class="easyui-textbox" style="width:200px" 
               data-options="prompt:'输入图标类名(如:icon-add)'">
    </div>

    <ul id="tt" class="easyui-tree" style="width:300px;padding:10px"></ul>

    <script>
        $(function(){
            // 初始化树形菜单
            $('#tt').tree({
                data: [{
                    id: 1,
                    text: '根节点1',
                    children: [{
                        id: 11,
                        text: '子节点1'
                    },{
                        id: 12,
                        text: '子节点2',
                        children: [{
                            id: 121,
                            text: '孙子节点1'
                        }]
                    }]
                },{
                    id: 2,
                    text: '根节点2'
                }]
            });
        });
    </script>
</body>
</html>

2. 添加节点的方法

添加根节点

function addRootNode() {
    var text = $('#nodeText').textbox('getValue');
    if (!text) {
        $.messager.alert('提示', '请输入节点文本');
        return;
    }

    var icon = $('#nodeIcon').textbox('getValue') || 'icon-ok';
    var nodeId = 'node_' + new Date().getTime(); // 生成唯一ID

    $('#tt').tree('append', {
        data: [{
            id: nodeId,
            text: text,
            iconCls: icon
        }]
    });

    // 清空输入框
    $('#nodeText').textbox('clear');
}

添加子节点

function addChildNode() {
    var selectedNode = $('#tt').tree('getSelected');
    if (!selectedNode) {
        $.messager.alert('提示', '请先选择一个节点');
        return;
    }

    var text = $('#nodeText').textbox('getValue');
    if (!text) {
        $.messager.alert('提示', '请输入节点文本');
        return;
    }

    var icon = $('#nodeIcon').textbox('getValue') || 'icon-add';
    var nodeId = 'node_' + new Date().getTime();

    $('#tt').tree('append', {
        parent: selectedNode.target,
        data: [{
            id: nodeId,
            text: text,
            iconCls: icon
        }]
    });

    $('#nodeText').textbox('clear');
}

3. 其他操作

修改节点

function updateNode() {
    var selectedNode = $('#tt').tree('getSelected');
    if (!selectedNode) {
        $.messager.alert('提示', '请先选择一个节点');
        return;
    }

    var text = $('#nodeText').textbox('getValue');
    var icon = $('#nodeIcon').textbox('getValue');

    if (text) {
        $('#tt').tree('update', {
            target: selectedNode.target,
            text: text
        });
    }

    if (icon) {
        $('#tt').tree('update', {
            target: selectedNode.target,
            iconCls: icon
        });
    }

    $('#nodeText').textbox('clear');
    $('#nodeIcon').textbox('clear');
}

删除节点

function deleteNode() {
    var selectedNode = $('#tt').tree('getSelected');
    if (!selectedNode) {
        $.messager.alert('提示', '请先选择一个节点');
        return;
    }

    $.messager.confirm('确认', '确定要删除这个节点吗？', function(r){
        if (r){
            $('#tt').tree('remove', selectedNode.target);
        }
    });
}

4. 通过数据源添加节点（动态加载）

// 从服务器获取数据并添加
function addNodeFromServer() {
    // 获取选中的节点
    var selectedNode = $('#tt').tree('getSelected');

    // 向服务器请求数据
    $.ajax({
        url: 'get_nodes.php',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            if (selectedNode) {
                // 添加到选中的节点下
                $('#tt').tree('append', {
                    parent: selectedNode.target,
                    data: data
                });
            } else {
                // 添加为根节点
                $('#tt').tree('append', {
                    data: data
                });
            }
        }
    });
}

5. 完整示例 - 带右键菜单

<div id="mm" class="easyui-menu" style="width:120px;">
    <div onclick="addChild()">添加子节点</div>
    <div onclick="editNode()">编辑节点</div>
    <div onclick="removeNode()">删除节点</div>
</div>

<ul id="tree2" class="easyui-tree" style="width:300px;padding:10px"></ul>

<script>
$(function(){
    $('#tree2').tree({
        data: [...],
        onContextMenu: function(e, node){
            e.preventDefault();
            $(this).tree('select', node.target);
            $('#mm').menu('show', {
                left: e.pageX,
                top: e.pageY
            });
        }
    });
});

function addChild() {
    var node = $('#tree2').tree('getSelected');
    var text = prompt('请输入节点名称:', '新节点');
    if (text) {
        $('#tree2').tree('append', {
            parent: node.target,
            data: [{
                text: text,
                iconCls: 'icon-add'
            }]
        });
    }
}

function editNode() {
    var node = $('#tree2').tree('getSelected');
    var text = prompt('修改节点名称:', node.text);
    if (text) {
        $('#tree2').tree('update', {
            target: node.target,
            text: text
        });
    }
}

function removeNode() {
    var node = $('#tree2').tree('getSelected');
    if (confirm('确定要删除吗？')) {
        $('#tree2').tree('remove', node.target);
    }
}
</script>