JSmind在节点添加table

FakeOccupational

已于 2022-05-30 14:13:57 修改

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：服务化&架构文章标签：前端

于 2021-12-24 23:17:49 首次发布

本文链接：https://blog.youkuaiyun.com/ResumeProject/article/details/122137348

服务化&架构专栏收录该内容

134 篇文章

订阅专栏

这篇博客介绍了如何使用jsMind库来创建和操作包含HTML元素的思维导图，包括开启支持HTML选项、添加节点、调整节点位置、关闭所有节点等功能。示例代码展示了如何添加表格和表单到节点内容中，并提供了jsMind的相关配置和操作方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网

1.开启支持选项

options = {
   support_html : true,    // 是否支持节点里的HTML元素
   }

2.添加节点

{"id":"table", "parentid":"abc","topic":"<table><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr></table>", "width": "300", "height": "100"},

3.结果
在这里插入图片描述

其他：
1.jsMind通过鼠标拖拽的方式调整节点位置

2.关闭所有节点

   var jm = null;
    function load_jsmind(){
        var mind = mymind;
        var options = {
            container:'jsmind_container',// [必选] 容器的ID，或者为容器的对象
            editable:true,               // [可选] 是否启用编辑
            theme:'primary'  ,            // [可选] 主题
            support_html : true,    // 是否支持节点里的HTML元素 
                                    //含义为允许在节点的标题中使用 HTML 代码，如果你愿意，你甚至可以在节点标题里插入一个表格<table>。如果你希望标题中只有纯文本，请将该参数设为 false 
        }

        jm = jsMind.show(options,mind);
        jm.add_node("sub2","sub23", "new node", {"background-color":"red"});
        jm.set_node_color('sub21', 'green', '#ccc');
    }
然后在外新增函数
    // 节点关闭操作
      function collapse_all(){
          console.log(1111111);
        jm.collapse_all();
    }

或直接

    function load_jsmind(){
        var mind = mymind;
        var options = {
            container:'jsmind_container',// [必选] 容器的ID，或者为容器的对象
            editable:true,               // [可选] 是否启用编辑
            theme:'primary'  ,            // [可选] 主题
            support_html : true,    // 是否支持节点里的HTML元素 
                                    //含义为允许在节点的标题中使用 HTML 代码，如果你愿意，你甚至可以在节点标题里插入一个表格<table>。如果你希望标题中只有纯文本，请将该参数设为 false 
        }

       var  jm = jsMind.show(options,mind);
        jm.add_node("sub2","sub23", "new node", {"background-color":"red"});
        jm.set_node_color('sub21', 'green', '#ccc');
        jm.collapse_all();
    }

添加一个表单试试效果：

{"id":"form", "parentid":"**","topic":"<form>First name:<br><input type='text' name='firstname' value='Mickey'><br><br><input type='submit' value='Submit'></form> ","width": "300", "height": "100"},