vue+jsmind实现思维导图加入按钮

最新推荐文章于 2024-09-23 15:06:15 发布

fc&&fl

最新推荐文章于 2024-09-23 15:06:15 发布

阅读量2.8k

点赞数 2

分类专栏： vue 前端面试复习文章标签： js vue xmind

本文链接：https://blog.csdn.net/m0_57057282/article/details/131574767

版权

前端面试复习同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

本文介绍了jsMind官网关于如何在思维导图中设置子节点位置（mode=full，direction=left或right），以及数据格式（node_arrayvsnode_tree）的注意事项。还提及了文件输入、options属性和方法使用，以及如何在代码中添加自定义按钮。

摘要由CSDN通过智能技术生成

一.jsmind官网：http://hizzgdev.github.io/jsmind/docs/zh/1.usage.html

官网解释的很详细，注意的就是，想让子节点在根节点的左右时，需要将mode设置为full，然后在数据中设置direction为left或right

mode: 'full', // 显示模式

{"id":"easy", "parentid":"root", "topic":"2", "direction":"left"},

话少说，上图

其中需要注意的是什么呢，一点是mind中data的数据格式，尤其是json文档转思维导图的同学，真的是让人肝肠寸断，一定要确定好data的格式，比如说，我是说比如： "format":"node_array",时，data后是【， "format":"node_tree",时，data后是{

/* 数据格式声明 */
"format":"node_array",
/* 数据内容 */
"data":[
  {"id":"root", "isroot":true, "topic":"111","data": {
      selected: false, // 选中状态

    }},

"format": "node_tree",
/* 数据内容 */
"data": {
  "id": 12,
  "topic": "jsMind",
  "children": [
    {
      "id": 11,
      "topic": "Easy777777777",
      // "direction": "left",
还有的就是children不可与parentid同时在一个节点中，不然你就会收获

can not open this file as mindmap!!!!!!!!!!!!

还有什么需要展开说说呢，那就options的属性及对应的值，

，还有jsmind中自带的方法，3.operation | zh | docs | jsMind

然后就是方法了，读取文档创建思维导图的方法！（！！！！！！！！一定要注意格式，不然会痛苦死）

//从文件输入框file_input获取选中的文件
    function open_nodearray(){
        var file_input = document.getElementById('file_input_nodearray');
        var files = file_input.files;
        if(files.length > 0){
            var file_data = files[0];
            jsMind.util.file.read(file_data,function(jsmind_data, jsmind_name){
                var mind = jsMind.util.json.string2json(jsmind_data);
                if(!!mind){
                    _jm.show(mind);
                    reBuild()
                }else{
                    // console.error('Failed to parse jsmind_data:', jsmind_data);

                    alert('can not open this file as mindmap');
                }
            });
        }else{
            alert('please choose a file first')
        }
    }

还有什么可以说的呢？
那当然就是在思维导图中增加按钮啊！
具体怎么做呢，需要修改一下jsmind.js的源码
打开node—modules