功能描述：拓扑图。对节点进行拖拽，序列化获取拓扑图信息，保存到本地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. 在执行 Database.SqlQuery Method (String, Object[]) 执行中出现错误

      执行类似于   var  params =  new SqlParameter[]{--};   Database.SqlQuery<Type>(sql1,params);   Dat ...

  2. day44--浮动和清浮动基本小结

    浮动和清浮动 一:浮动 浮动元素会生成一个块级框,而不论它本身是何种元素. 关于浮动的两个特点: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普 ...

  3. Android WebView的使用(用来显示网页)

    1.WebView介绍 2.URL介绍 简单说就是网址. 3.java后台代码 package com.lucky.test34webview; import android.support.v7.a ...

  4. Android 简单适配器(SimpleAdapter)

    1.介绍 2.简单适配器的实现方法 3.XML文件 (1)主页面布局 <?xml version="1.0" encoding="utf-8"?> ...

  5. php:// 访问各个输入/输出流

    相关 php.ini 配置 allow_url_fopen :on 默认开启 该选项为on便是激活了 URL 形式的 fopen 封装协议使得可以访问 URL 对象文件等. allow_url_inc ...

  6. ecshop 模板机制

    ECShop模板是基于smarty 文件名cls_template.php lib_main.php中的assign_template()会设置我们的网店的公共信息及网站设置:assign_dynam ...

  7. scrapy_redis之官网列子domz

    一.  domz.py from scrapy.linkextractors import LinkExtractor from scrapy.spiders import CrawlSpider, ...

  8. python3.6 request模块和ddt模块的安装

    1.1用cmd命令进到python的安装目录的Scripts文件夹 1.2.然后输入 pip install requests,出现以下提示,说明安装成功 2.安装ddt步骤一样,只是把pip ins ...

  9. UltraEdit 21.3 增加 mssql, json 高亮

    1.  %appdata%\IDMComp\UltraEdit 2.  将msql2k.uew,  json.uew 放到 wordfiles 目录即可 msql2k   json的uew 下载地址如 ...

  10. Sqlite CodeFirst的初级实现

    示例实体: using System; using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnn ...