[JSMind]使用JSMind操作生成的思维导图
柴星津
使用JSMind创建思维导图的JS代码，但是浏览器执行起来可能较慢，所以后面此代码还是改到后端了，但毕竟是一部分时间的努力成果，留个纪念
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.countday {
border: 1px solid yellow;
color: yellow
}
.span-black {
color: black
}
.span-green {
color: green
}
.span-red {
color: red
}
.root{
padding: 9px 12px;
}
</style>
</head>
<body>
<div id="jsmind_container" style="width: 1100px; height: 800px"></div>
</body>
<script>
$(document).ready(function(){
$("#inputtext").hide();
var mind = {
"meta": {
"name": "龙虎榜",
"author": "liurui",
"version": "1"
},
"format": "node_tree",
"data": {
"id": "root",
"expanded": true
/* "topic": "<span class='span-root'>龙虎榜</sapn>",
"font-size": 26,
"background-color": "rgb(16,1,1)" */
}
}
var options = {
container:'jsmind_container',//容器的ID
editable:true, // 是否启用编辑
theme:'primary' , //主题
view:{
engine: 'canvas', // 思维导图各节点之间线条的绘制引擎
hmargin:100, // 思维导图距容器外框的最小水平距离
vmargin:50, // 思维导图距容器外框的最小垂直距离
line_width:1, // 思维导图线条的粗细
line_color:'#555' // 思维导图线条的颜色
},
layout:{
hspace:30, // 节点之间的水平间距
vspace:8, // 节点之间的垂直间距
pspace:13 // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
},
shortcut:{
enable:false // 是否启用快捷键
}
}
var jm = new jsMind(options);
jm.show(mind);
jm.set_node_background_image("root","images/img/lhb.png",78,29);
$(".root").css("background-size","100%");
// if(jm.get_root().children.length==0){
// var html = "<table class='table_list' border='0' cellspacing='1' cellpadding='0'><tr><td>";
// html += "<div style='clear: both; min-height: 100px;' id='main'><div style='height: 10px;'></div><div class='nullcontent_div'>没有查询到相关信息！</div>";
// html += "</tr></td></table>";
// $("#jsmind_container").html(html);
// }
var data = eval('${data}');
$.each(data,function(i, list) {
var ls = eval(list);
var nodeid = jsMind.util.uuid.newid();
var topic = ls[0].yzname;
var parent_node = jm.get_root();
var node = jm.add_node(parent_node, nodeid, topic);
jm.set_node_color(nodeid,'#0872c6',null);
jm.set_node_font_style(nodeid, 11);
jm.get_node(nodeid).direction = ls[0].fx;
$.each(ls,function(j, obj) {
var ls2 = eval(obj);
var nodeid2 = jsMind.util.uuid.newid();
ls2.sbuy = ls2.sbuy + "";
if(ls2.sbuy<0){
if(ls2.sbuy.substring(0,ls2.sbuy.indexOf('.')).length>5){
ls2.sbuy = (parseInt(ls2.sbuy.substring(0,ls2.sbuy.indexOf('.')))/10000).toString().substring(0,(parseInt(ls2.sbuy.substring(0,ls2.sbuy.indexOf('.')))/10000).toString().indexOf('.')+3);
if(ls2.a=='3'){
var topic2 = "<span class='countday'><strong>3日</strong></span> "+ls2.secuabbr+ls2.sbuy+"亿";
}else{
var topic2 = ls2.secuabbr+ls2.sbuy+"亿";
}
}else{
if(ls2.a=='3'){
var topic2 = "<span class='countday'><strong>3日</strong></span> "+ls2.secuabbr+ls2.sbuy+"万";
}else{
var topic2 = ls2.secuabbr+ls2.sbuy+"万";
}
}
}else{
if(ls2.sbuy.substring(0,ls2.sbuy.indexOf('.')).length>4){
ls2.sbuy = (parseInt(ls2.sbuy.substring(0,ls2.sbuy.indexOf('.')))/10000).toString().substring(0,(parseInt(ls2.sbuy.substring(0,ls2.sbuy.indexOf('.')))/10000).toString().indexOf('.')+3);
if(ls2.a=='3'){
var topic2 = "<span class='countday'><strong>3日</strong></span> "+ls2.secuabbr+ls2.sbuy+"亿";
}else{
var topic2 = ls2.secuabbr+ls2.sbuy+"亿";
}
}else{
if(ls2.a=='3'){
var topic2 = "<span class='countday'><strong>3日</strong></span> "+ls2.secuabbr+ls2.sbuy+"万";
}else{
var topic2 = ls2.secuabbr+"+"+ls2.sbuy+"万";
}
}
}
var node2 = jm.add_node(node, nodeid2, topic2);
if(ls2.sbuy<0){
jm.set_node_color(nodeid2,'#2fb33b',null);
}else{
//jm.set_node_color(nodeid2,'#a82829',null);
jm.set_node_color(nodeid2,'red',null);
}
jm.set_node_font_style(nodeid2, 11);
var nodeid3 = jsMind.util.uuid.newid();
ls2.dbuy = ls2.dbuy + "";
if(ls2.dbuy<0){
if(ls2.dbuy.substring(0,ls2.dbuy.indexOf('.')).length>5){
ls2.dbuy = (parseInt(ls2.dbuy.substring(0,ls2.dbuy.indexOf('.')))/10000).toString().substring(0,(parseInt(ls2.dbuy.substring(0,ls2.dbuy.indexOf('.')))/10000).toString().indexOf('.')+3);
var topic3 = "<span class='span-black'>"+ls2.deptname+" <span class='span-green'>"+ls2.dbuy+"亿</span>"+"<span>";
}else{
var topic3 = "<span class='span-black'>"+ls2.deptname+" <span class='span-green'>"+ls2.dbuy+"万</span>"+"<span>";
}
}else{
if(ls2.dbuy.substring(0,ls2.dbuy.indexOf('.')).length>4){
ls2.dbuy = (parseInt(ls2.dbuy.substring(0,ls2.dbuy.indexOf('.')))/10000).toString().substring(0,(parseInt(ls2.dbuy.substring(0,ls2.dbuy.indexOf('.')))/10000).toString().indexOf('.')+3);
var topic3 = "<span class='span-black'>"+ls2.deptname+" +<span class='span-red'>"+ls2.dbuy+"亿</span>"+"<span>";
}else{
var topic3 = "<span class='span-black'>"+ls2.deptname+" +<span class='span-red'>"+ls2.dbuy+"万</span>"+"<span>";
}
}
var node3 = jm.add_node(node2, nodeid3, topic3);
jm.set_node_font_style(nodeid3, 10);
jm.set_node_color(nodeid3,'#f0f5f9',null);
});
});
jm.disable_edit(); //禁止编辑
});
</script>
</html>
类似资料：