功能描述：拓扑图。对节点进行拖拽，序列化获取拓扑图信息，保存到本地localStorage，刷新页面，执行反序列化，从本地获取之前保存的数据，展现之前拖拽后的拓扑
拓展：此处存储用的是web本地存储localStorage;后续嵌入项目时，需存入数据库，通过ajax方式存取

不废话，上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>序列化反序列化</title>
    <script type="text/javascript" src="./jquery-1.3.2.js"></script>
    <script src="twaver.js"></script>

<script type="text/javascript">

        var box = new twaver.ElementBox();
        var network = new twaver.network.Network(box);
        var datas = null;
        function init() {
            var networkDom = network.getView();
            document.getElementById("main").appendChild(networkDom);
            network.adjustBounds({x: 0, y: 30, width:1000,height:600});

            var node1 = new twaver.Node({ name: 'from', name2: 'from2', location: { x: 200, y: 200 } });
            box.add(node1);
            var node2 = new twaver.Node({ name: 'to', name2: 'to2', location: { x: 200, y: 400 } });
            box.add(node2);
            var node3 = new twaver.Node({ name: 'from', name2: 'from2', location: { x: 400, y: 200 } });
            box.add(node3);
            var node4 = new twaver.Node({ name: 'to', name2: 'to2', location: { x: 400, y: 400 } });
            box.add(node4);
            var link1 = new twaver.Link(node1, node2);
            var link2 = new twaver.Link(node2, node3);
            var link3 = new twaver.Link(node1, node3);
            var link4 = new twaver.Link(node1, node4);
            box.add(link1);
            box.add(link2);
            box.add(link3);
            box.add(link4);
            //此处调用反序列化，渲染上一次拖拽保存的
            deserialize();
        }

        function serialize() {
            //将DataBox序列化成Json数据
            datas = new twaver.JsonSerializer(box).serialize();
            window.alert("box serialize ok!");
            console.log(datas);
            localStorage.setItem('key', JSON.stringify(datas));
        }

        function deserialize(){
            var data = JSON.parse(localStorage.getItem('key'));
            console.log(data);
            if (data) {
                box.clear();
                //反序列化，并将数据与DataBox建立关系
                new twaver.JsonSerializer(box).deserialize(data);
                window.alert("box deserialize ok!");
            }
            // $.ajax({
            //  type:"GET",
            //  url:"data.json",
            //  datatype:"json",
            //  async:true,
            //  success:function(data){
               //      console.log(data);
            //      if (data) {
                  //       box.clear();
                  //       new twaver.JsonSerializer(box).deserialize(data);
                  //       window.alert("box deserialize ok!");
                  //   }
            //  }
            // });
        }
    </script>
</head>
<body onload="init();">
    <div>
        <input type="button" onclick="serialize()" value="保存"/>
        <span>功能介绍：1、拓扑图节点拖拽；2、点击保存，当前拓扑图存储到本地；3.刷新页面显示上次拖拽保存的拓扑图</span>
    </div>
    <div id="main" style="top: 30px;"></div>
</body>

</html>

效果如图

搞定，收工！

twaver拓扑图拖拽后保存json数据的更多相关文章

  1. jqueryui sortable拖拽后保存位置

    jqueryUI sortable 可以用来进行页面拖拽布局,然而有一个小问题就是拖拽后如何保存状态. 工作中遇到了这个情况,遍把这个问题记了下来,具体思路是: 利用拖拽stop后利用   var a ...

  2. C# 图片缩放，拖拽后保存成图片的功能

    窗体界面部分如下: 鼠标的缩放功能需要手动在 OpertaionImg.Designer.cs 文件里面添加一句代码,具体代码如下: //picturePhoto显示图片的控件 this.pictur ...

  3. Bootstrap 可视化布局--拖拽后弹窗进行编辑

    Bootstrap 可视化布局--拖拽后弹窗进行编辑 最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquer ...

  4. KnockoutJS 3.X API 第七章 其他技术(1) 加载和保存JSON数据

    Knockout允许您实现复杂的客户端交互性,但几乎所有Web应用程序还需要与服务器交换数据,或至少将本地存储的数据序列化. 最方便的交换或存储数据的方式是JSON格式 - 大多数Ajax应用程序今天 ...

  5. 6.Knockout.Js（加载或保存JSON数据）

    前言 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程 ...

  6. Knockout应用开发指南 第六章：加载或保存JSON数据

    原文:Knockout应用开发指南 第六章:加载或保存JSON数据 加载或保存JSON数据 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地 ...

  7. OpenLayer3调用天地图，拖拽后，地图消失的问题[已解决]

    拖拽后,地图直接消失了,而且右上角的坐标变成了NaN,NaN 后来经过测试发现,原来是自己封装有问题,坐标点一定要用parseFloat()转换下,但不清楚为什么页面刚开始加载的时候没有问题,总之能解 ...

  8. Knockout.Js官网学习（加载或保存JSON数据）

    前言 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程 ...

  9. jquery Nestable 获取改变排序后的json数据 拖动排序

    <script type="text/javascript"> jQuery(function($){ $('.dd').nestable(); $('.dd-hand ...

随机推荐

  1. 微信支付的SDK曝出重大漏洞（XXE漏洞）

    一.背景 昨天(2018-07-04)微信支付的SDK曝出重大漏洞(XXE漏洞),通过该漏洞,攻击者可以获取服务器中目录结构.文件内容,如代码.各种私钥等.获取这些信息以后,攻击者便可以为所欲为,其中 ...

  2. Docker 安装Hadoop集群

    资源准备:jdk1.8及hadoop2.7.3 链接:https://pan.baidu.com/s/1x8t1t2iY46jKkvNUBHZlGQ 提取码:g1gm 复制这段内容后打开百度网盘手机A ...

  3. 5、Numpy处理数据

    转载自:http://old.sebug.net/paper/books/scipydoc/numpy_intro.html#id9 2 NumPy-快速处理数据 标准安装的Python中用列表(li ...

  4. DP设状态 : 状压与线

    [NOIP2017]宝藏(状压) [AHOI2009]中国象棋(状压) [BZOJ1814] URAL1519 Formula 1(插头\(DP\)模板) 新链接 : Luogu5056 , dark ...

  5. LeetCode8. 字符串转整数 (atoi)

    8. 字符串转整数 (atoi) 描述 实现 atoi,将字符串转为整数. 在找到第一个非空字符之前,需要移除掉字符串中的空格字符.如果第一个非空字符是正号或负号,选取该符号,并将其与后面尽可能多的连 ...

  6. 洛谷 P3275 [SCOI2011]糖果

    题目链接 题解 差分约束 学过的应该都会做 不会的自行百度,这里不多讲 opt=1 连一条长度为0的双向边 opt=2 (u->v) \(len=-1\) opt=3 (v->u) \(l ...

  7. Avito Cool Challenge 2018：D. Maximum Distance （最小生成树）

    题目链接 题意 : 给出一个联通图和一些特殊的点,现在定义cost(u,v)为一条从u到v的路径上面边权的最大值 , 定义dis(u,v) 为从u到v 路径上面cost 的最小值 然后求所有特殊点到其 ...

  8. springboot(四)-项目部署

    Springboot和我们之前学习的web应用程序不一样,其本质上是一个java应用程序.部署的方式有两种:打成jar包,或者打成war包. 打成jar包 切换到项目文件中 然后mvn install ...

  9. [转] Spring Integration 系统集成

    [From] http://blog.csdn.net/w_x_z_/article/details/53316618 pring Ingegration 提供了基于Spring的EIP(Enterp ...

  10. VUE 入门教程

    http://www.runoob.com/w3cnote/vue-js-quickstart.html VUE安装教程 https://segmentfault.com/a/119000001218 ...