有时候，我们可能需要在网页上展示思维导图般的效果，比如现在有个要展示某个数据库表与其他表的关系，这些关系可能有业务依赖、键依赖、调度依赖等，怎么更直观的展示这些关系呢？思维导图是个不错的选择，效果就像一些流行的思维导图比如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', // [必选] 容器的ID
editable: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插件实现思维导图（脑图）就说道这里吧。
827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
