jsmind-网页版的由js实现的思维导图

有时候，我们可能需要在网页上展示思维导图般的效果，比如现在有个要展示某个数据库表与其他表的关系，这些关系可能有业务依赖、键依赖、调度依赖等，怎么更直观的展示这些关系呢？思维导图是个不错的选择，效果就像一些流行的思维导图比如xmind等软件一样，但是我们这些做javaEE开发的是和浏览器打交道的，有在浏览器上画思维导图的js或者jquery插件吗?经过在网上一番搜寻之后，还真是功夫不负有心人，发现了一款名叫jsmind的插件可以实现这样的功能，最后它也出色的胜任了当时的开发任务，让我不至于饿。基于这个插件资料比较零碎，我呢，就总结了一下，希望能帮助到各位有需要的朋友。

下来看一下几张效果图吧：

还可以给上面的节点加上各种事件：

好了，知道了是什么样子，我们来看下代码是怎么实现的。

html：

<%@ page language="java" contentType="text/html; charset=utf-8"  pageEncoding="utf-8"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8"><link href="<%=request.getContextPath()%>/rs/jsmind/jsmind/style/jsmind.css" rel="stylesheet"><script type="text/javascript" src="<%=request.getContextPath()%>/rs/js/jquery-1.12.4.min.js"></script><script src="<%=request.getContextPath()%>/rs/jsmind/jsmind/js/jsmind.js"></script><script src="<%=request.getContextPath()%>/rs/jsmind/jsmind/js/jsmind.draggable.js"></script>
<title>jsmind</title>
<style type="text/css">#jsmind1_container,#jsmind2_container{width:1000px;height:500px;}
</style>
</head>
<body><div id="jsmind1_container"></div><div id="jsmind2_container"></div>
</body>
</html>

JavaScript：

<script type="text/javascript">/* 例子一：以node_tree格式定义 */var mind_data_1 = {"meta":{"name":"js课程","author":"乐之者管理员","version":"0.2"},"format":"node_tree",  /* 数据格式声明 */"data":{"id":"js","topic":"javascript","children":[{"id":"easy","topic":"第一天","direction":"left","expanded":false,"children":[{"id":"var","topic":"变量"},{"id":"exp","topic":"表达式"},{"id":"easy3","topic":"语句"}]},{"id":"open","topic":"第二天","direction":"right","expanded":true,"children":[{"id":"open1","topic":"函数"},{"id":"open2","topic":"内置对象"}]},{"id":"powerful","topic":"第三天","direction":"right","children":[{"id":"powerful1","topic":"正则"},{"id":"powerful2","topic":"自定义对象"}]},{"id":"other","topic":"第四天", "background-color":"#0000ff","direction":"left","children":[{"id":"other1","topic":"浏览器对象模型","foreground-color":"#ff0000"},{"id":"other2","topic":"DOM", "background-color":"#0000ff"}]}]}};var options1 = {container:'jsmind1_container', editable:true,               theme:'orange'                };var jm1 = new jsMind(options1);jm1.show(mind_data_1);/* 例子二：以node_array格式定义 */var mind_data_2 = {"meta":{ /* 元数据，定义思维导图的名称、作者、版本等信息 */"name":"jquery课程","author":"乐之者管理员","version":"0.1"},"format":"node_array", /* 数据格式声明 *//* 数据内容 */"data":[{"id":"root", "isroot":true, "topic":"jquery"},{"id":"choose_fun", "parentid":"root", "topic":"选择器", "direction":"left"},{"id":"easy1", "parentid":"choose_fun", "topic":"基本选择器"},{"id":"easy2", "parentid":"choose_fun", "topic":"过滤选择器"},{"id":"easy3", "parentid":"choose_fun", "topic":"表单选择器"},{"id":"easy4", "parentid":"choose_fun", "topic":"内容选择器"},{"id":"often_use", "parentid":"root", "topic":"常用函数", "expanded":false, "direction":"right"},{"id":"open1", "parentid":"often_use", "topic":"尺寸"},{"id":"open2", "parentid":"often_use", "topic":"循环"},{"id":"plugins", "parentid":"root", "topic":"插件", "direction":"right"},{"id":"powerful1", "parentid":"plugins", "topic":"全局插件"},{"id":"powerful2", "parentid":"plugins", "topic":"局部插件"}]};var options2 = {container:'jsmind2_container', // [必选] 容器的IDeditable:true,                // [可选] 是否启用编辑theme:'primary'                // [可选] 主题};var jm2 = new jsMind(options2);jm2.show(mind_data_2);    // 让 jm 显示这个 mind 即可//加上点击事件$("#jsmind1_container").on("click",'jmnode',function(){alert($(this).text());});
</script>

注意：

1.jsmind的数据格式有两种常用的，分别是node_tree与node_array，通过format属性指定jsmind使用的数据格式，使用的数据格式不同，后边的data属性的格式也不同，他们的格式分别可以参见例子一和例子二。

2.我这里尽可能多的使用了jsmind里面的属性，但是也没有完全列出来，如果你需要更深入一层的研究，可以参考插件里面的文档。

3.我对里面应该注意的地方以及难于理解的属性都做了注释，大家可以看下代码里面的注释

4.jsmind里面的theme是预定义好的，除了上边使用的“primary”、“orange”之外还有其他一些可取值，可以参见下载的插件里面的文档。

好，jsmind这个JavaScript插件实现思维导图（脑图）就说道这里吧。

jsmind-网页版的由js实现的思维导图相关推荐

js Arry对象思维导图
js Arry对象思维导图
类似echarts图的思维导图效果,用js实现xmind思维导图的效果===使用jsMind来实现
首先:我先先来看看实现的效果: 然后我再说说具体实现的步骤吧:(别急文件后面我会把百度网盘链接发出来的,除了小案例外还有jsMind的文件,案例,目前的说明文档) 第一:引入jsMind的css.js ...
PMBOK第六版10大知识领域ITTO思维导图-干货！
PMBOK学习过程中,ITTO(输入.工具.技术.输出)是每年必考的内容,掌握ITTO的脉络,对学习和梳理PMP非常有帮助.知道这个过程要做什么,为什么做,做完有什么成果.也是项目经理必备的技能之一. ...
pmbook 知识领域第六版_PMBOK第六版10大知识领域ITTO思维导图-干货
PMBOK学习过程中,ITTO(输入.工具.技术.输出)是每年必考的内容,掌握ITTO的脉络,对学习和梳理PMP非常有帮助.知道这个过程要做什么,为什么做,做完有什么成果.也是项目经理必备的技能之一. ...
pmbook 知识领域第六版_PMBOK第六版10大知识领域ITTO思维导图-干货！
PMBOK学习过程中,ITTO(输入.工具.技术.输出)是每年必考的内容,掌握ITTO的脉络,对学习和梳理PMP非常有帮助.知道这个过程要做什么,为什么做,做完有什么成果.也是项目经理必备的技能之一. ...
js快速学习思维导图
Js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习Js的途径.在这里给大家总结一些学习Js的经验,希望能给后来的学习者探索出一条"轻松学习Js之路&qu ...
JS知识总结思维导图，js学习路线思维导图（全）精！！
1.js学习大纲 2.js基本语句 3.js字符串基本使用及常用方法 4.js操作符 5.js数组基本使用及常用方法 6.js变量 7.js基本dom操作 8.字符串函数 9.流程语句 10.运算符 ...
html思维导图word版,(完整word版)非谓语动词练习及思维导图
非谓语动词 1.____little Red Hat, the wolf went to bed and slept. (swallow ) 大灰狼一口吞下了小红帽,然后上床觉觉了. 2.Singin ...
《计算机操作系统》（第四版）汤子瀛等编著——思维导图详细版本
以下是本人考研复习时自己整理的思维导图,用幕布(微信小程序和APP版本都可以)作图,希望对你有帮助. 第一章操作系统引论第二章进程与线程第三章死锁第四章调度第五章存储管理第六章文 ...
项目管理9大知识思维导图-精减版+教你如何绘制专属思维导图
项目管理是指在项目活动中运用专门的知识,技能,工具和方法是项目能够在有限资源限定的时间内,实现或超过设定的需求和期望的过程.项目管理可以使用思维导图进行总结,让整个过程更加清晰明了. 展示部分, 群内 ...

jsmind-网页版的由js实现的思维导图

jsmind-网页版的由js实现的思维导图相关推荐

最新文章

热门文章