jEasyUI 树形菜单拖放控制-CSDN博客

本文链接：https://blog.csdn.net/lsx202406/article/details/144798532

在 jEasyUI 中实现树形菜单的拖放控制是一个相对简单的过程。首先，你需要创建一个基本的树形菜单。这可以通过在 HTML 页面中定义一个空的 div 元素，并使用 jQuery 和 jEasyUI 的相关方法来初始化完成。例如：

<!DOCTYPE html>
<html>
<head>
<title>jEasyUI Tree Menu Example</title>
<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>
</head>
<body>
<div id="tree" class="easyui-tree"></div>
<script>
$('#tree').tree([
    { 
        text: 'Item1',
        children: [
            { text: 'Item1-1' },
            { text: 'Item1-2' }
        ]
    },
    {
        text: 'Item2',
        children: [
            { text: 'Item2-1' },
            { text: 'Item2-2' }
        ]
    }
]);
</script>
</body>
</html>

在这个示例中，我们创建了一个包含两个顶级节点和各自子节点的树形菜单。要启用拖放功能，你需要在初始化树形菜单时设置 dnd 属性为 true。此外，你还可以通过 onDrop 事件来处理节点拖放完成后的逻辑。例如：

$('#tree').tree({
    // 数据定义...
    dnd: true,
    onDrop: function(targetNode, source, point) {
        var targetId = $(targetNode).tree('getNode', targetNode).id;
        $.ajax({
            url: '...',
            type: 'post',
            dataType: 'json',
            {
                id: source.id,
                targetId: targetId,
                point: point
            }
        });
    }
});

在这个例子中，当节点被拖放时，onDrop 事件会被触发，你可以在这里执行更多的操作，比如将节点的状态保存到远程服务器【5†source】【7†source】【9†source】。