功能描述：拓扑图。对节点进行拖拽，序列化获取拓扑图信息，保存到本地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. 《Andrew Ng深度学习》笔记5

    深层神经网络 深层神经网络的组成如图,这里主要是深层神经网络符号的定义. 为什么要用深层神经网络,有什么好处?这里主要是分层的思想.在软件工程中,如果问题遇到困难,一般是通过“加多”一层的方法来解决, ...

  2. Qt 学习之路 2（76）：QML 和 QtQuick 2

    Home / Qt 学习之路 2 / Qt 学习之路 2(76):QML 和 QtQuick 2 Qt 学习之路 2(76):QML 和 QtQuick 2  豆子  2013年12月18日  Qt ...

  3. 01、前端需要注意哪些SEO？

    1.前端需要注意哪些SEO? 1)设置网站TDK标签的设置 2)图片img标签必须加上alt属性 3)h1~h6标签合理使用 4)a标签增加rel="nofollow" 5) 安装 ...

  4. javascrip 词法分析详解

      JavaScript的高级知识---词法分析 词法分析 词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 函数在运行的瞬 ...

  5. CSS3 选择器 修改 整数个样式

    .blogbottom ul li:nth-child(4n){margin-right:0px;} 说明:4n就是每第4个.

  6. POJ_2431 Expedition 【数据结构】

    一.题面 POJ2431 二.分析 主要说几个坑 1.给出的点需要根据下标排序. 2.根据不同的方式要把起始点或者终点加进去.我没有转换距离,而是直接从起始点到终点根据距离不断相减判断的,那么起点就是 ...

  7. 【DP】+【贪心】【前缀和】洛谷P2893 [USACO08FEB]修路Making the Grade 题解

        正常的没想到的DP和玄学贪心. 题目描述 A straight dirt road connects two fields on FJ's farm, but it changes eleva ...

  8. 51nod - 1163 巧妙的并查集 O(1)维护区间

    有N个任务,每个任务有一个最晚结束时间以及一个对应的奖励.在结束时间之前完成该任务,就可以获得对应的奖励.完成每一个任务所需的时间都是1个单位时间.有时候完成所有任务是不可能的,因为时间上可能会有冲突 ...

  9. [转] CSS 选择器参考手册

    [From] http://www.w3school.com.cn/cssref/css_selectors.asp CSS3 选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. ...

  10. cmd笔记

    批量获取一个文件夹内所有文件的文件名: dir *.png /b >list.txt tree /f >list.txt for /f "delims=" %%a in ...