ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

开发智联笔记项目时所遇问题(3)

2026/8/12 20:14:19 拓冰建站 浏览量
开发智联笔记项目时所遇问题(3)

问题:设置节点不自由
在脑图中显示 [object Object] 是因为节点数据结构不正确。jsMind 期望的节点数据结构与当前的数据格式不匹配。

解决方案

1. 修改创建脑图时的数据结构

index.html 中,修改 createMap() 函数:

async function createMap() {const name = document.getElementById('mName').value.trim();const topic = document.getElementById('mTopic').value.trim();if (!name || !topic) return alert('请填写完整');// 修正数据结构 - 使用 jsmind 期望的格式const data = {meta: {name: name,author: document.getElementById('user').textContent,version: '1.0'},format: 'node_tree',data: {id: 'root',topic: topic,children: []  // 初始为空数组,而不是对象}};const res = await fetch('/api/mindmaps', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({name, data}),credentials: 'include'});if (!res.ok) return alert('创建失败');const m = await res.json();mapList.push(m);renderList();closeModal();openMap(m.id);
}

2. 设置节点不自由(固定布局)

修改 initMind() 函数,添加布局约束:

/* 初始化脑图 */
function initMind(data) {jm = new jsMind({container: 'jsmind_container',theme: 'primary',editable: true,// 设置布局约束,使节点不自由view: { hmargin: 100, vmargin: 50, line_width: 2, line_color: '#409eff',draggable: false  // 禁用自由拖拽},layout: { hspace: 80, vspace: 20, pspace: 13,mode: 'static'  // 使用静态布局模式},shortcut: {enable: true,handles: { save: () => saveMap() },mapping: { save: 83 }},plugin: {undo: { max_stack_size: 100 }}});// 启用插件jm.enable_plugin('undo');jm.show(data);// 进一步限制节点行为jm.disable_edit();  // 禁用编辑(如果需要编辑可以去掉这行)
}

使用方案1和方案2的组合,这样可以保持编辑功能但限制节点的自由移动。