jtopo createStageFromJson 与 toJson的使用（导出json数据并下载为txt文件）

最新推荐文章于 2024-05-15 09:55:43 发布
最新推荐文章于 2024-05-15 09:55:43 发布
阅读量2.6k 收藏 2
点赞数
分类专栏： jtopo 文章标签： 数据 jtopo json下载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39759115/article/details/78900723
版权 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>
    <title>jTopo JSON导出为txt文件，并下载</title>


    <script src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jtopo-min.js"></script>
    <script type="text/javascript" src="js/toolbar.js"></script>

    <script id='code'>
        var node;
        var mydata,jsonStr;
        $(document).ready(function(){
            var canvas = document.getElementById('canvas'); 

            var json = '{' +
                    '"version":"0.4.1","frames":24,"wheelZoom":null,"childs":[' +
                        '{"elementType":"scene","background":"./bg.jpg","backgroundColor":"255,255,255","mode":"normal","paintAll":false,"areaSelect":true,"translate":true,"translateX":24,"translateY":75,"lastTranslatedX":undefined,"lastTranslatedY":undefined,"alpha":0,"visible":true,"scaleX":1,"scaleY":1,"childs":[' +
                            '{"elementType":"node","x":120,"y":50,"width":40,"height":40,"visible":true,"alpha":1,"rotate":0,"scaleX":1,"scaleY":1,"strokeColor":"22,124,255","fillColor":"0, 0, 255","shadow":true,"shadowColor":"rgba(0,0,0,0.5)","shadowOffsetX":3,"shadowOffsetY":6,"transformAble":true,"zIndex":3,"dragable":true,"selected":false,"showSelected":true,"isMouseOver":false,"text":"Top_Left","font":"12px Consolas","fontColor":"255,255,255","textPosition":"Top_Left","textOffsetX":0,"textOffsetY":0},' +
                            '{"elementType":"node","x":260,"y":50,"width":40,"height":40,"visible":true,"alpha":1,"rotate":0,"scaleX":1,"scaleY":1,"strokeColor":"22,124,255","fillColor":"0, 0, 255","shadow":true,"shadowColor":"rgba(0,0,0,0.5)","shadowOffsetX":3,"shadowOffsetY":6,"transformAble":true,"zIndex":3,"dragable":true,"selected":false,"showSelected":true,"isMouseOver":false,"text":"Top_Center","font":"12px Consolas","fontColor":"255,255,255","textPosition":"Top_Center","textOffsetX":0,"textOffsetY":0},' +
                            '{"elementType":"node","x":400,"y":50,"width":40,"height":40,"visible":true,"alpha":1,"rotate":0,"scaleX":1,"scaleY":1,"strokeColor":"22,124,255","fillColor":"0, 0, 255","shadow":true,"shadowColor":"rgba(0,0,0,0.5)","shadowOffsetX":3,"shadowOffsetY":6,"transformAble":true,"zIndex":3,"dragable":true,"selected":false,"showSelected":true,"isMouseOver":false,"text":"Top_Right","font":"12px Consolas","fontColor":"255,255,255","textPosition":"Top_Right","textOffsetX":0,"textOffsetY":0},' +
                            '{"elementType":"node","x":120,"y":190,"width":40,"height":40,"visible":true,"alpha":1,"rotate":0,"scaleX":1,"scaleY":1,"strokeColor":"22,124,255","fillColor":"0, 0, 255","shadow":true,"shadowColor":"rgba(0,0,0,0.5)","shadowOffsetX":3,"shadowOffsetY":6,"transformAble":true,"zIndex":3,"dragable":true,"selected":false,"showSelected":true,"isMouseOver":false,"text":"Middle_Left","font":"12px Consolas","fontColor":"255,255,255","textPosition":"Middle_Left","textOffsetX":0,"textOffsetY":0},' +
                            '{"elementType":"node","x":260,"y":190,"width":40,"height":40,"visible":true,"alpha":1,"rotate":0,"scaleX":1,"scaleY":1,"strokeColor":"22,124,255","fillColor":"0, 0, 255","shadow":true,"shadowColor":"rgba(0,0,0,0.5)","shadowOffsetX":3,"shadowOffsetY":6,"transformAble":true,"zIndex":3,"dragable":true,"selected":false,"showSelected":true,"isMouseOver":false,"text":"Middle_Center","font":"12px Consolas","fontColor":"255,255,255","textPosition":"Middle_Center","textOffsetX":0,"textOffsetY":0},' +
                            '{"elementType":"node","x":400,"y":190,"width":40,"height":40,"visible":true,"alpha":1,"rotate":0,"scaleX":1,"scaleY":1,"strokeColor":"22,124,255","fillColor":"0, 0, 255","shadow":true,"shadowColor":"rgba(0,0,0,0.5)","shadowOffsetX":3,"shadowOffsetY":6,"transformAble":true,"zIndex":3,"dragable":true,"selected":false,"showSelected":true,"isMouseOver":false,"text":"Middle_Right","font":"12px Consolas","fontColor":"255,255,255","textPosition":"Middle_Right","textOffsetX":0,"textOffsetY":0},' +
                            '{"elementType":"node","x":120,"y":330,"width":40,"height":40,"visible":true,"alpha":1,"rotate":0,"scaleX":1,"scaleY":1,"strokeColor":"22,124,255","fillColor":"0, 0, 255","shadow":true,"shadowColor":"rgba(0,0,0,0.5)","shadowOffsetX":3,"shadowOffsetY":6,"transformAble":true,"zIndex":3,"dragable":true,"selected":false,"showSelected":true,"isMouseOver":false,"text":"Bottom_Left","font":"12px Consolas","fontColor":"255,255,255","textPosition":"Bottom_Left","textOffsetX":0,"textOffsetY":0},' +
                            '{"elementType":"node","x":260,"y":330,"width":40,"height":40,"visible":true,"alpha":1,"rotate":0,"scaleX":1,"scaleY":1,"strokeColor":"22,124,255","fillColor":"0, 0, 255","shadow":true,"shadowColor":"rgba(0,0,0,0.5)","shadowOffsetX":3,"shadowOffsetY":6,"transformAble":true,"zIndex":3,"dragable":true,"selected":false,"showSelected":true,"isMouseOver":false,"text":"Bottom_Center","font":"12px Consolas","fontColor":"255,255,255","textPosition":"Bottom_Center","textOffsetX":0,"textOffsetY":0},' +
                            '{"elementType":"node","x":400,"y":330,"width":40,"height":40,"visible":true,"alpha":1,"rotate":0,"scaleX":1,"scaleY":1,"strokeColor":"22,124,255","fillColor":"0, 0, 255","shadow":true,"shadowColor":"rgba(0,0,0,0.5)","shadowOffsetX":3,"shadowOffsetY":6,"transformAble":true,"zIndex":3,"dragable":true,"selected":false,"showSelected":true,"isMouseOver":false,"text":"Bottom_Right","font":"12px Consolas","fontColor":"255,255,255","textPosition":"Bottom_Right","textOffsetX":0,"textOffsetY":0},' +
                            '{"elementType":"CircleNode","x":650,"y":200,"width":32,"height":32,"visible":true,"alpha":1,"rotate":0,"scaleX":1,"scaleY":1,"strokeColor":"22,124,255","fillColor":"0, 0, 0","shadow":true,"shadowColor":"rgba(0,0,0,0.5)","shadowOffsetX":3,"shadowOffsetY":6,"transformAble":true,"zIndex":3,"dragable":true,"selected":false,"showSelected":true,"isMouseOver":false,"text":"左下偏移","font":"12px Consolas","fontColor":"255,255,255","textPosition":"Middle_Center","textOffsetX":-30,"textOffsetY":30}' +
                        ']}' +
                    ']}';
            var stage = JTopo.createStageFromJson(json, canvas);
            //显示工具栏
            showJTopoToobar(stage);
            jsonStr = stage.toJson();

            eval("var jsonObj2 = " + jsonStr);// 把字符串转成对象
            saveText(jsonStr,"哈哈的问价.txt");
        });
        function Base64() {

            // private property
            _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

            // public method for encoding
            this.encode = function (input) {
                var output = "";
                var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
                var i = 0;
                input = _utf8_encode(input);
                while (i < input.length) {
                    chr1 = input.charCodeAt(i++);
                    chr2 = input.charCodeAt(i++);
                    chr3 = input.charCodeAt(i++);
                    enc1 = chr1 >> 2;
                    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                    enc4 = chr3 & 63;
                    if (isNaN(chr2)) {
                        enc3 = enc4 = 64;
                    } else if (isNaN(chr3)) {
                        enc4 = 64;
                    }
                    output = output +
                            _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
                            _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
                }
                return output;
            }

            // public method for decoding
            this.decode = function (input) {
                var output = "";
                var chr1, chr2, chr3;
                var enc1, enc2, enc3, enc4;
                var i = 0;
                input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
                while (i < input.length) {
                    enc1 = _keyStr.indexOf(input.charAt(i++));
                    enc2 = _keyStr.indexOf(input.charAt(i++));
                    enc3 = _keyStr.indexOf(input.charAt(i++));
                    enc4 = _keyStr.indexOf(input.charAt(i++));
                    chr1 = (enc1 << 2) | (enc2 >> 4);
                    chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
                    chr3 = ((enc3 & 3) << 6) | enc4;
                    output = output + String.fromCharCode(chr1);
                    if (enc3 != 64) {
                        output = output + String.fromCharCode(chr2);
                    }
                    if (enc4 != 64) {
                        output = output + String.fromCharCode(chr3);
                    }
                }
                output = _utf8_decode(output);
                return output;
            }

            // private method for UTF-8 encoding
            _utf8_encode = function (string) {
                string = string.replace(/\r\n/g,"\n");
                var utftext = "";
                for (var n = 0; n < string.length; n++) {
                    var c = string.charCodeAt(n);
                    if (c < 128) {
                        utftext += String.fromCharCode(c);
                    } else if((c > 127) && (c < 2048)) {
                        utftext += String.fromCharCode((c >> 6) | 192);
                        utftext += String.fromCharCode((c & 63) | 128);
                    } else {
                        utftext += String.fromCharCode((c >> 12) | 224);
                        utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                        utftext += String.fromCharCode((c & 63) | 128);
                    }

                }
                return utftext;
            }

            // private method for UTF-8 decoding
            _utf8_decode = function (utftext) {
                var string = "";
                var i = 0;
                var c = c1 = c2 = 0;
                while ( i < utftext.length ) {
                    c = utftext.charCodeAt(i);
                    if (c < 128) {
                        string += String.fromCharCode(c);
                        i++;
                    } else if((c > 191) && (c < 224)) {
                        c2 = utftext.charCodeAt(i+1);
                        string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                        i += 2;
                    } else {
                        c2 = utftext.charCodeAt(i+1);
                        c3 = utftext.charCodeAt(i+2);
                        string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                        i += 3;
                    }
                }
                return string;
            }
        }

        function saveText(t,filename){
            var mime='text/plain',b = new Base64();
            saveAs(('data:'+mime+';charset=utf-8;base64,' + b.encode(t)),filename)
        }
        function saveAs(Url,filename){
            var blob=dataURLtoBlob(Url);
            if (window.navigator.msSaveOrOpenBlob) {   // if browser is IE
                navigator.msSaveBlob(blob, filename);//filename文件名包括扩展名，下载路径为浏览器默认路径
            } else {
                var link = document.createElement("a");
                link.setAttribute("href", window.URL.createObjectURL(blob));
                link.setAttribute("download", filename);
                document.body.appendChild(link);
                link.click();
            }
        }

        function dataURLtoBlob(dataurl) {
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: 'application/octet-stream' });
        }
    </script>
  </head>

  <body>


    <div class="wrap_div">

        <div class="head_nav_second">
            <ul class="menu" id="nav_menu">

            </ul>
        </div>
        <div class="content">
          <div class="left">
            <ul id="menu">

            </ul>
          </div>
          <div class="right">
                <div id="content">
                    <canvas width="850" height="550" id="canvas"></canvas>

                </div>
          </div>
          <div class="clear"></div>
        </div>
    </div>


</body>

</html>

jtopo导出自定义属性


           node.ariId = id;
            node.ariSn = ariSn;
            node.hostMac = hostMac;
            node.myType = "device";
            node.hostStatus = hostStatus;
            node.serializedProperties.push("ariId");
            node.serializedProperties.push("ariSn");
            node.serializedProperties.push("hostMac");
            node.serializedProperties.push("myType");
            node.serializedProperties.push("hostStatus");

表格导出（转自http://blog.csdn.net/yuemingfuyueming/article/details/76609115）：

function radarDLBut(filename) {
    //tdstr用于装载处理后的数据，不同的数据源处理方式可能不同；","用于列的分割，"\n"用于跳转到下一行
    var table = document.all.Data;//Data即<table>的ID
    var hang = table.rows.length;//取数据源行数
    var lie = table.rows[0].cells.length;//取数据源列数
    var tdstr = "";
for (i = 0; i < hang; ++i) {
    for (j = 0; j < lie; ++j) {
        tdstr += table.rows[i].cells[j].innerText + ",";
    }
    tdstr = tdstr.substring(0, tdstr.length - 1) + "\n";
    }

    var csvContent = "data:text/csv;charset=utf-8,\ufeff";//\ufeff去除中文数据乱码
    if (window.navigator.msSaveOrOpenBlob) {
        csvContent = "\ufeff";
    }
    csvContent += tdstr;
    if (window.navigator.msSaveOrOpenBlob) {
        // if browser is IE
        var blob = new Blob([decodeURIComponent(encodeURI(csvContent))], {
            type: "text/csv;charset=utf-8;"
        });
        navigator.msSaveBlob(blob, filename);//filename文件名包括扩展名，下载路径为浏览器默认路径
    } else {
        var encodedUri = encodeURI(csvContent);//encodeURI识别转义符
        var link = document.createElement("a");
        link.setAttribute("href", encodedUri);
        link.setAttribute("download", filename);

        document.body.appendChild(link);
        link.click();
    }
};
_let
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Jtopo读取Json生成树状拓扑图
03-05
Jtopo读取Json生成树状拓扑图,Json结构如下，可添加业务需要字段 // id 节点唯一标识 // name 节点名字 // type 节点类型 // pid 父节点标识 // error “0”无异常 “1”有异常 // errorMessage 异常内容
toJSON
weixin_34216107的博客
02-15 99
View Code public static string ToJSON(IEnumerable array, params string[] propertyNames) { Guard<ArgumentNullException>(array == null || propertyNames == null); ...
纯前端导入导出json文件
最新发布
hongkid的专栏
05-15 155
【代码】导入导出json文件。
JS获取json文件内容并处理参考
09-14
利用jquery的post功能获取json的内容并作后续处理， 本例子需要在web环境下跑 本例子需要在web环境下跑 本例子需要在web环境下跑
opengl两个图形光照_OpenGL至商业引擎-SRP-经典的光照模型
weixin_39607935的博客
12-22 100
全球图形学领域教育的领先者、自研引擎的倡导者、底层技术研究领域的技术公开者，东汉书院在致力于使得更多人群具备内核级竞争力的道路上，将带给小伙伴们更多的公开技术教学和视频，感谢一路以来有你的支持。我们正在用实际行动来帮助小伙伴们构建一套成体系的图形学知识架构，你在我们这里获得的不止于那些毫无意义的代码，我们这里更多的是代码背后的故事，以及精准、透彻的理解。我们不会扔给人们一本书或者给个思路让人们去自...
jtopo的项目实战（二）
andsll的专栏
03-01 1174
话接上回，继续实现jtopo本身不具有的一些功能，有讲的不对的地方，欢迎大家留言提出，我们一起进步，奥利给，还有，码子不易，如果觉得博主写的不错的欢迎打赏哈！ 2.美化节点之间连线的文字标识 jtopo自带的连线只允许添加一个文字标识，如果想要在一根连线上添加多个描述，要怎么实现呢？首先，需要修改连线（link）的构造函数，增加想要的文字字段属性，方便文字的设置和读取。因为我们项目中需要显示三段文字，所以我新增了两个文字属性，分别是textA和textZ： 这样就可以在...
json文件是什么+为什么使用json文件+如何使用json文件
04-25
为什么使用 JSON 文件？如何使用 JSON 文件？ JSON 文件是什么？ JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，于 21 世纪初由 Douglas Crockford 提出。该格式旨在解决数据交换问题，提供了一...
java导出json格式文件的示例代码
10-19
在Java编程中，导出数据到JSON格式的文件是一种常见的需求，这可以帮助我们方便地存储和传输数据。本文将详细讲解如何使用Java实现这个功能，包括一个完整的示例代码。 首先，我们需要理解JSON（JavaScript Object ...
SQL Server中将数据导出为XML和Json方法分享
09-10
一旦存储过程创建完毕，我们就可以通过BCP命令来调用它并导出数据到JSON文件。具体的BCP命令和执行结果因存储过程的具体实现而异，通常会涉及动态SQL和OPENROWSET函数来生成JSON字符串，然后写入文件。 总的来说，...
python 将json数据提取转化为txt的方法
09-20
首先，要将JSON数据转化为TXT，我们需要读取JSON文件并解析其中的数据。在示例代码中，`json`模块被导入，这正是Python用来处理JSON数据的内置库。通过`open()`函数打开JSON文件，并使用`for`循环逐行读取内容。这是...
在SQL Server中将数据导出为XML和Json的方法
09-10
在SQL Server中，数据导出是一项常见的任务，尤其当需要与外部系统交换数据或者进行数据分析时。本文主要探讨如何在SQL Server中将数据导出为XML和JSON这两种常见的数据交换格式。 首先，我们来看如何将数据导出为...
zJTopo:开源拓扑图工具类jTopo的扩展,jtopo是一个不错的拓扑图,基于html5 canvas,功能强大
05-15
zJTopo 开源拓扑图工具类jTopo的扩展 说明 该项目依赖于开源拓扑图工具类jTopo,详情: 联系本人: ###扩展api简介 ///获取该场景下所有元素 JTopo.Scene.prototype.zGetAllEle() ///将该场景转换为json形式 JTopo.Scene.prototype.zToJson() ///将json数据解析到该场景中,加载ems里面的对象以及偏移量(translateX,translateY) JTopo.Scene.prototype.zLoadJson(json) ///通过params的idA与idZ来连线,或通过nodeA与nodeZ来连线(优先) JTopo.Scene.prototype.zAddLink ///通过params来创建Node节点 JTopo.Scene.prototype.zAddNode ///设置开始节点,会
拓扑图，使用jtopo功能完善，灰常实用
04-17
这是一个画拓扑图dom,代码易于修改功能完善,有连线，分组，删除等功能，有需要的可以下载看看
jTopo 功能完善
xzhx607的专栏
11-26 2759
jTopo 功能完善，修改了stage.toJson() ，JTopo.createStageFromJson()这个两个API存在缺陷，
jtopo用法总结，点击展开子节点、导出png图片、实现查询功能、拖拽和点击事件区分、点击添加连线后在添加连线、改变文本位置、添加自定义属性
笑到世界都狼狈的博客
01-11 2586
最近在写拓扑图，有百度到一位大佬的CSDN上有好多关于jtopo的东西，虽然已经默默关注了，但还是记一下笔记。 1.拓扑图点击展开子节点，具体参照：https://blog.csdn.net/qq_39759115/article/details/89156175（这个我在下面第四条，鼠标拖拽的时候做了一些优化） 2.原demo导出PNG图片是点击之后跳转新页面，右键才能保存，修改成点击按钮直...
jtopo的项目实战（四）
andsll的专栏
03-01 673
话接上回，继续实现jtopo本身不具有的一些功能，有讲的不对的地方，欢迎大家留言提出，我们一起进步，奥利给，还有，码字不易，如果觉得博主写的不错的欢迎打赏哈！ 4.实现拓扑图所有的元素拖动后自动保存 这里说的自动保存是将json数据保存到web后端服务器，当然，如果需要也可以保存到本地的。 （如果觉得简单，或者会的童鞋可以跳过了哈）jtopo自带的小例子中，界面有保存按钮，也调用了保存的方法，但是并没有保存，这是因为例子本身的传参是错的，而且，保存函数中也注掉了相应的保存逻辑，当然细心的同学很快.
JTopo绘制网络拓扑图
zxgmlcj的博客
08-16 6934
JTopo绘制网络拓扑图1.因为公司项目的需要，研究下JTopo开源框架。如果对JTopo不了解的话，建议搜索下， 篇幅有限，此处不描述了。 2.为了各位不走弯路，这里描述下目前JTopo的缺点。目前Jtopo具有保存json格式的功能，但是保存有缺陷，不能保存自定义的图标和连线信息；而且导入json文件没有提供支持。对于导出、导入json格式的文件的功能没有要求的，可以使用JTopo；而对于有这
jTopo学习记录
qq_29432935的博客
04-28 457
jTopo（Javascript Topology library)是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。 一、完全基于HTML5 Canvas开发，始终站在开发者的角度设计，API平易近人、几乎简单到了极致。 二、不依赖任何其他库、执行仅需一个Canvas，不污染你的页面、Dom结构和代码命名空间。 三、功能异常强大、灵活，可扩展性极强（为扩展而生），包装一下，...
JTopo 框架教程之一：初始JTopo 框架
热门推荐
zhouzhiwengang的专栏
06-04 1万+
JTopo 是什么？
python生成json数据，键值为布尔，并导出文件
06-08
好的，可以使用Python中的json模块来生成和导出json数据。以下是一个示例代码： ```python import json # 创建一个字典，包含布尔类型的键值对 data = { "key1": True, "key2": False } # 将字典转换为json格式...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值