功能描述：拓扑图。对节点进行拖拽，序列化获取拓扑图信息，保存到本地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. c++11中关于`std::thread`线程传参的思考

    关于std::thread线程传参的思考 最重要要记住的一点是:参数要拷贝到线程独立内存中,不管是普通类型.还是引用类型. 对于传递参数是引用类型,需要注意: 1.当指向动态变量的指针(char *) ...

  2. 关于 FPDF、HTML2PDF里的中文、日文、韩文等双字节字符换行问题

    最近使用 FPDF.HTML2PDF导出中文PDF,发现表格里的数据不会自动换行,格式乱了,看了一下手册,有个 functionCell()可以设置换行,但是设置了半天也没反应!最后搞了一个笨办法完美 ...

  3. Gson反序列化泛型实例

    1 package com.ppmoney.g2.mapper; import com.google.common.reflect.TypeToken; import com.google.gson. ...

  4. Ubuntu下的UNITY和GNOME界面

    [转自] http://www.tuicool.com/articles/nUbMVbU 从Ubuntu 11.04后,UNITY就作为默认界面来推广.如果用户需要体验GNOME 3,还需要用户自己安 ...

  5. 给json格式化的一个小工具

    var glob = require("glob") // options is optional var fs=require("fs") glob(&quo ...

  6. PIE SDK聚类

    1.算法功能简介 聚类处理时运用形态学算子将临近的类似分类区域聚类并合并. PIE SDK支持算法功能的执行,下面对聚类算法功能进行介绍. 2.算法功能实现说明 2.1. 实现步骤 第一步 算法参数设 ...

  7. nginx-图片资源代理

    location ~ .*\.(gif|jpg|jpeg|png|bmp|mp3)$ { root E:/xx/Uploads/; } 记得放在根目录下面

  8. java将list<T>导出为xls文件

    一.action层 /** * 导出list */ @SuppressWarnings("unchecked") public void exportBatch() { reque ...

  9. Go初探

      官方网站:https://golang.org/ 标准库文档:https://golang.org/pkg/ 在线编码学习:https://play.golang.org/ PS:请自行FQ 简介 ...

  10. Oracle 数据库实例和数据库

    本文参考自oracle数据库实例,数据库的理解,纯属读书笔记,用于加深记忆. 先看Tom关于这二者的解释: 1.数据库 物理操作系统文件或磁盘的集合(我觉得可以理解为数据文件等).使用Oracle 1 ...