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 ...
随机推荐
- SQl 根据某列去重 partition by
主键为ID select * from [infotops] where Id in (select max(id) from [infotops] group by InfoId) -------- ...
- java 实现word 转 pdf
java 实现word 转 pdf 不知道网上为啥道友们写的这么复杂 ,自己看到过一篇还不错的 , 自己动手改了改 ,测试一下可以用 , 希望大家可以参考一下 , 对大家有帮助 1.引入jar ...
- php 对象的自定义遍历
php对象的自定义遍历 对手册中的案例进行分析 更好的理解foreach() 的遍历步骤 class myIterator implements Iterator { private $positio ...
- WordPress 有关Https的设置
开头卖萌求点击 https://www.yinghualuowu.com/ Http和Https的区别 就是多了s的区别(不是),简单点就是比http更安全了.23333.这里不打算说的太详细,知道前 ...
- nginx(一)- 初识
前言 这里呢,开始我的nginx学习记录.关于nginx是什么?为什么?有什么好处?我就不说了,说的肯定没有网上其他人说的那么细.我在这里就记录我自己学习nginx的过程.只说怎么做,让我们快速用起来 ...
- 在Eclipse中调试web项目
由于现在的公司用的是Eclipse开发web项目而且不安装MyEclipse插件,没有myclipse插件就不能在Eclipse中配置web服务器,所以也就不好对web项目进行调试.下面的方法就可以让 ...
- mutillidae2.6.48部署到phpstudy
废话不多说,先上链接 mutillidae2.6.48链接: https://pan.baidu.com/s/1hssyiVy 密码: pw67 phpstudy2016.exe链接: https:/ ...
- 论文阅读 | STDN: Scale-Transferrable Object Detection
论文地址:http://openaccess.thecvf.com/content_cvpr_2018/papers/Zhou_Scale-Transferrable_Object_Detection ...
- WPF 使用第三方ttf字体
1.将字体文件直接添加到项目中,注意:将文件的“属性”--“生成操作”设置为“Resource” 2.在Xaml中使用,text可以使用文字或直接使用unicode编码,XAML中使用Unicode编 ...
- ffmpeg+cuda+opencv
为了让ffmpeg使用gpu进行解码,可以按以下步骤: 1 下载nvidia官网提供的ffmpeg,编译安装 https://developer.nvidia.com/ffmpeg 注意原来的选项上还 ...