twaver拓扑图拖拽后保存json数据

最新推荐文章于 2022-12-22 10:56:01 发布

辛苦的码农20200609

最新推荐文章于 2022-12-22 10:56:01 发布

阅读量972

点赞数 1

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hj100j12hb1j.html

版权

前端专栏收录该内容

785 篇文章 4 订阅

订阅专栏

功能描述：拓扑图。对节点进行拖拽，序列化获取拓扑图信息，保存到本地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>