twaver拓扑图拖拽后保存json数据
功能描述:拓扑图。对节点进行拖拽,序列化获取拓扑图信息,保存到本地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数据的更多相关文章
- jqueryui sortable拖拽后保存位置
jqueryUI sortable 可以用来进行页面拖拽布局,然而有一个小问题就是拖拽后如何保存状态. 工作中遇到了这个情况,遍把这个问题记了下来,具体思路是: 利用拖拽stop后利用 var a ...
- C# 图片缩放,拖拽后保存成图片的功能
窗体界面部分如下: 鼠标的缩放功能需要手动在 OpertaionImg.Designer.cs 文件里面添加一句代码,具体代码如下: //picturePhoto显示图片的控件 this.pictur ...
- Bootstrap 可视化布局--拖拽后弹窗进行编辑
Bootstrap 可视化布局--拖拽后弹窗进行编辑 最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquer ...
- KnockoutJS 3.X API 第七章 其他技术(1) 加载和保存JSON数据
Knockout允许您实现复杂的客户端交互性,但几乎所有Web应用程序还需要与服务器交换数据,或至少将本地存储的数据序列化. 最方便的交换或存储数据的方式是JSON格式 - 大多数Ajax应用程序今天 ...
- 6.Knockout.Js(加载或保存JSON数据)
前言 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程 ...
- Knockout应用开发指南 第六章:加载或保存JSON数据
原文:Knockout应用开发指南 第六章:加载或保存JSON数据 加载或保存JSON数据 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地 ...
- OpenLayer3调用天地图,拖拽后,地图消失的问题[已解决]
拖拽后,地图直接消失了,而且右上角的坐标变成了NaN,NaN 后来经过测试发现,原来是自己封装有问题,坐标点一定要用parseFloat()转换下,但不清楚为什么页面刚开始加载的时候没有问题,总之能解 ...
- Knockout.Js官网学习(加载或保存JSON数据)
前言 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程 ...
- jquery Nestable 获取改变排序后的json数据 拖动排序
<script type="text/javascript"> jQuery(function($){ $('.dd').nestable(); $('.dd-hand ...
随机推荐
- 静态库(.a)与动态库(.so)的简明介绍
静态库(.a)与动态库(.so)的简明介绍 gcc有很多关于静态库,动态库的选项如-l,-L,-fPIC,-shared -Wl,-soname,看着很复杂容易混淆,其实静态库和动态库都是应需而生,只 ...
- 航天独角兽Spacex
2018年2月7日下午3时45分,猎鹰重型火箭在位于卡纳维拉尔角的肯尼迪航天中心LC-39A平台顺利升空.火箭直升云霄,按照既定轨道持续升空,位于美国弗罗里达州卡纳维拉尔角的航天发射中心硝烟四起,非常 ...
- 3、pandas
原文出处: pandas.pydata.org 译文出处:石卓林 这是关于pandas的简短介绍,主要面向新用户.可以参阅Cookbook了解更复杂的使用方法. 链接:http://python. ...
- mysql的主从与读写分离
首先我们搭建两个MySQL服务器,这一步地球人都知道. 搭建好后,把两个数据库的数据同步.这一步就要用到我们前面说的备份和还原了.注意:我们只要同步MySQL以外的数据,MySQL库中的帐号密码肯定不 ...
- Loj 6433. 「PKUSC2018」最大前缀和 (状压dp)
题面 Loj 题解 感觉挺难的啊- 状压\(dp\) 首先,有一个性质 对于一个序列的最大前缀和\(\sum_{i=1}^{p} A[i]\) 显然对于每个\(\sum_{i=p+1}^{x}A[i] ...
- (找到最大的整数k使得n! % s^k ==0) (求n!在b进制下末尾0的个数) (区间满足个数)
题目:https://codeforces.com/contest/1114/problem/C 将b分解为若干素数乘积,记录每个素数含多少次方 b = p1^y1·p2^y2·...·pm^ym. ...
- BZOJ - 3757 树上莫队解决离线路径问题 & 学习心得
题意:给你一棵树,求u,v最短路径的XXX(本题是统计权值种类) 今天课上摸鱼学了一种有意思的处理路径方式(其实是链式块状树翻车了看别的),据说实际运行跑的比XX记者还快 大概就是像序列莫队那样 首先 ...
- linux命令eval的用法
[转自]http://blog.chinaunix.net/uid-21411227-id-1826706.html 1. eval command-line 其中command-line是在终端上键 ...
- webgoat环境搭建
链接: https://pan.baidu.com/s/1gfEKIyB 密码: 5zdq 1:配置Java环境变量,过程请找度娘 2:解压下载好的tomcat 3:将webgoat-containe ...
- linux 第八章 高级键盘
1.clear:清屏 2.history:显示历史命令列表 3.Ctrl+A:移动光标到行首 4.Ctrl+E:移动光标到行尾 5.Ctrl+F:光标向前移动一个字符 6.Ctrl+B:光标向h后移动 ...