解析json输出思维导图

最新推荐文章于 2022-12-17 10:07:27 发布

ddym82039

最新推荐文章于 2022-12-17 10:07:27 发布

阅读量1.2k

点赞数 1

文章标签： json java python

原文链接：http://www.cnblogs.com/baliure/p/8527065.html

版权

1说明　　i、js用的是raphael（绘制图形），jquery（主要get到json）　　ii、设计初衷是做后台管理的导航地图，也基本实现这个功能　　iii、json里面主要2个key，一个是name，一个是children，如果想要额外功能，比如跳转指定网址，请加参数，并在click方法内添加2显示效果3传入json{ "name": "a"...

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

1说明

　　i、js用的是raphael（绘制图形），jquery（主要get到json）

　　ii、设计初衷是做后台管理的导航地图，也基本实现这个功能

　　iii、json里面主要2个key，一个是name，一个是children，如果想要额外功能，比如跳转指定网址，请加参数，并在click方法内添加

2显示效果

3传入json

{
    "name": "a",
    "children": [
        {
            "name": "a1",
            "children": [
                {
                    "name": "a11",
                    "children": [
                        {
                            "name": "a111"
                        }, {
                            "name": "a112"
                        }, {
                            "name": "a117",
                            "children": [
                                {
                                    "name": "a1171"
                                }, {
                                    "name": "a1172"
                                }, {
                                    "name": "a1173"
                                }
                            ]
                        }
                    ]
                }, {
                    "name": "a12"
                }
            ]
        }
        , {
            "name": "a2",
            "children": [
                {
                    "name": "a21"
                }, {
                    "name": "a22"                ,
                    "children": [
                        {
                            "name": "a221"
                        }, {
                            "name": "a222"
                        }
                    ]
                }
            ]
        }
        , {
            "name": "a3",
            "children": [
                {
                    "name": "a31"
                }
            ]
        }
        , {
            "name": "a4",
            "children": [
                {
                    "name": "a41"
                }, {
                    "name": "a42"
                }
            ]
        }
    ]
}

4下面是代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Raphael Test</title>
    </head>
    <body>
        <div id="my-canvas" style="width:140px;padding:0px;margin:0px;"></div>
        <span id="ruler" style="visibility: hidden; white-space: nowrap; font-size: 10px; "></span> 
        <!--some html doms-->
        <!--some scripts-->
        <script type="text/javascript" src="raphael.js"></script>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        
        String.prototype.visualLength = function() { 
            var ruler = $("#ruler"); 
            ruler.text(this); 
            return ruler[0].offsetWidth; 
        } ;
        
        
        
            var mindmap = function(id, width, height, data) {
                var leftY = 0;
                //左侧初始高度（系统自动计算）
                var rightY = 0;
                //右侧初始高度    （系统自动计算）
                var unitWidth = 50;
                //每个文本的宽度(手工改

最低0.47元/天解锁文章

ddym82039

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
解析json输出思维导图

1说明　　i、js用的是raphael（绘制图形），jquery（主要get到json）　　ii、设计初衷是做后台管理的导航地图，也基本实现这个功能　　iii、json里面主要2个key，一个是name，一个是children，如果想要额外功能，比如跳转指定网址，请加参数，并在click方法内添加2显示效果3传入json{ "name": "a"...
复制链接

扫一扫