Bootstrap 集成 jsMind 思维导图

最新推荐文章于 2024-10-04 06:11:34 发布

pursue.dreams

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量113

点赞数 2

文章标签： html jsmind

本文链接：https://blog.csdn.net/qq_41687670/article/details/140654369

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 集成 jsMind 思维导图</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入jsMind CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsmind/style/jsmind.css"> 
    <style>
        #jsmind_container {
            width: 100%;
            height: 500px;
            border: solid 1px #ccc;
        }
        .context-menu {
            display: none;
            position: absolute;
            z-index: 1000;
            background: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
        .context-menu-item {
            padding: 8px 12px;
            cursor: pointer;
        }
        .context-menu-item:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="mt-5">思维导图编辑器</h1>
        <div id="jsmind_container" class="mt-3"></div>
        <div id="contextMenu" class="context-menu">
            <div class="context-menu-item" id="addChildNode">添加子节点</div>
            <div class="context-menu-item" id="deleteNode">删除节点</div>
        </div>
    </div>

    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 
    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.min.js"></script> 
    <!-- 引入jsMind JS -->
    <script src="https://cdn.jsdelivr.net/npm/jsmind/js/jsmind.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/jsmind/js/jsmind.draggable.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/jsmind/js/jsmind.screenshot.js"></script> 
    <script>
        $(document).ready(function() {
            var mind = {
                "meta": {
                    "name": "example",
                    "author": "hizzgdev@163.com",
                    "version": "0.2"
                },
                "format": "node_array",
                "data": [
                    {"id": "root", "isroot": true, "topic": "中心主题"},
                    {"id": "sub1", "parentid": "root", "topic": "分支主题1"},
                    {"id": "sub2", "parentid": "root", "topic": "分支主题2"},
                    {"id": "sub3", "parentid": "root", "topic": "分支主题3"}
                ]
            };
            var options = {
                container: 'jsmind_container',
                editable: true,
                theme: 'primary'
            };
            var jm = new jsMind(options);
            jm.show(mind);

            var selectedNode = null;

            // 监听右键点击事件
            $('#jsmind_container').on('contextmenu', function(e) {
                e.preventDefault();
                var nodeId = jm.view.get_binded_nodeid(e.target);
                if (nodeId) {
                    selectedNode = jm.get_node(nodeId);
                    $('#contextMenu').css({
                        top: e.pageY + 'px',
                        left: e.pageX + 'px'
                    }).show();
                }
            });

            // 隐藏上下文菜单
            $(document).on('click', function() {
                $('#contextMenu').hide();
            });

            // 添加子节点
            $('#addChildNode').on('click', function() {
                if (selectedNode) {
                    var newNodeId = jsMind.util.uuid.newid();
                    var newNodeTopic = '新子节点';
                    jm.add_node(selectedNode, newNodeId, newNodeTopic);
                }
                $('#contextMenu').hide();
            });

            // 删除节点
            $('#deleteNode').on('click', function() {
                if (selectedNode && !selectedNode.isroot) {
                    jm.remove_node(selectedNode);
                } else {
                    alert("不能删除根节点！");
                }
                $('#contextMenu').hide();
            });
        });
    </script>
</body>
</html>