程序员经验分享-hwhale

我们可以将 JsPlumb 流程图导出为 JSON 或 XML 吗？

2023-11-26

我创建了一个 JSPlumb 流程图。现在，我想将此流程图导出到其相应的 JSON 或 XML 脚本中以保存并执行各种操作。什么更兼容？他们中的任何一个都很好。请赐教我这一点。我开发的 JsPlumb 代码（在各个网站的帮助下）如下所示。

<html>
<head>
    <title>Example</title>
            <script type="text/javascript" src="Jquery\jq.js"></script>
                <script type="text/javascript" src="Jquery\jq-ui.min.js"></script>  
    <script type="text/javascript" src="jsPlumb-master\build\demo\js\jquery.jsPlumb-1.4.1-all-min.js"></script>
</head>
<body>

<div  id="main">
    <div id="block1" class="node">node 0</div>
    <div id="block2" class="node">node 1</div>
    <div id="block3" class="node">node 2</div>
    <div id="block4" class="node">node 3</div>  
</div>

    <script type="text/javascript">

                var targetOption = {anchor:"TopCenter",
                                                    maxConnections:-1,
                                                    isSource:false,
                                                    isTarget:true,
                                                    endpoint:["Dot", {radius:8}],
                                                    paintStyle:{fillStyle:"#66FF00"},
                                                        setDragAllowedWhenFull:true}

                var sourceOption = {anchor:"BottomCenter",
                                                        maxConnections:-1,
                                                    isSource:true,
                                                    isTarget:false,
                                                    endpoint:["Dot", {radius:8}],
                                                    paintStyle:{fillStyle:"#FFEF00"},
                                                        setDragAllowedWhenFull:true}


                       jsPlumb.bind("ready", function() {

                        jsPlumb.addEndpoint('block1', targetOption);
                        jsPlumb.addEndpoint('block1', sourceOption);

                        jsPlumb.addEndpoint('block2', targetOption);
                        jsPlumb.addEndpoint('block2', sourceOption);

                        jsPlumb.addEndpoint('block3', targetOption);
                        jsPlumb.addEndpoint('block3', sourceOption);

                        jsPlumb.addEndpoint('block4', targetOption);
                        jsPlumb.addEndpoint('block4', sourceOption);

                        jsPlumb.draggable('block1');
                        jsPlumb.draggable('block2');
                        jsPlumb.draggable('block3');
                        jsPlumb.draggable('block4');                        
                });

     </script>

    <style type="text/css">
        .node {
    border:1px solid black;
    position:absolute;
    width:5em;
    height:5em;
    padding: 0.5em;
    z-index:1;
    border-radius:0.5em;
    box-shadow: 2px 2px 19px #aaa;
    background: white;
    }

    #node0 { top:10em; left:22em;}
    #node1 { top:15em; left:32em;}

    </style>



</body>
</html>

预先非常感谢。


要将 jsPlumb 流程图导出为 JSON / XML，首先您需要收集有关流程图元素的信息，然后将其序列化。

枚举块

要获取有关块的信息，您可以使用纯 jQuery：

var blocks = []
$("#main .node").each(function (idx, elem) {
    var $elem = $(elem);
    blocks.push({
        blockId: $elem.attr('id'),
        positionX: parseInt($elem.css("left"), 10),
        positionY: parseInt($elem.css("top"), 10)
    });
});

枚举连接

要获取有关元素之间连接的信息，您可以使用jsPlumb API，特别是“jsPlumb.getConnections()”方法：

var connections = [];
$.each(jsPlumb.getConnections(), function (idx, connection) {
    connections.push({
        connectionId: connection.id,
        pageSourceId: connection.sourceId,
        pageTargetId: connection.targetId
    });
});

序列化为 JSON

收集所有流程图数据后，您可以将其序列化为 JSON：

var serializedData = JSON.stringify(blocks);
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

xml

json

jsplumb

我们可以将 JsPlumb 流程图导出为 JSON 或 XML 吗？ 的相关文章

随机推荐

  • 使用 PHP 将简单的 Excel 数据导出到 MySQL

    我的客户得到了一个具有以下结构的 Excel 文件 name email Name email here Name email here Name email here Name email here Name email here Nam

  • 如何将 ggplot 标题与窗口而不是绘图网格对齐？

    In ggplot2版本 0 9 更改了绘图标题的对齐方式 在 v0 8 9 中 对齐是相对于绘图窗口的 而在 v0 9 中 对齐是相对于绘图网格的 现在 虽然我基本上同意这是理想的行为 但我经常有很长的情节标题 问题 有没有办法将绘图标题

  • 如何以编程方式将表滚动到特定的 tr

    我想使用 Javascript 或 jquery 将 html 表滚动到特定的 tr 目前我可以获得所选 tr 的偏移量 并且我正在使用 scrollTop 方法 我已经尝试了以下方法 但它对我不起作用 var table document

  • MongoParseError：不支持选项 useCreateIndex、useFindAndModify

    我尝试运行它 它说像标题一样的错误 和 这是我的代码 const URI process env MONGODB URL mongoose connect URI useCreateIndex true useFindAndModify f

  • innodb 隔离级别和锁定

    我正在阅读一本关于 innodb 事务的手册 但仍然有很多不清楚的东西 例如 我不太理解以下行为 client 1 client 2 mysql gt create table simple col int engine innodb my

  • 如何推送到远程当前的 git 分支，并立即反映更改？

    我有 2 台网络服务器 一台正在测试 一台正在运行 两者的代码库都使用 git 进行管理 我在测试服务器上进行开发 然后将更改从测试服务器上的主分支推送到实时服务器git push 但是 目前我必须登录到实时服务器并运行git reset

  • 可与 Angular.js 一起使用

    我正在尝试使用 footable http themergency com footable demo responsive container htm 以及 angular js 随着窗口大小的减小 仅当单击加号时才会显示第 3 4 5

  • Nginx 从不同的服务器提供 php 文件

    我正在尝试配置 nginx 以从另一台服务器提供 PHP 服务 这些文件可以位于其他服务器上 sample 下的目录中 Fast CGI 正在另一台服务器的端口 9000 上运行 这是我尝试过的 目前不起作用 location php pr

  • Delphi应用程序在调试时出现“无调试信息”

    我们构建了一个使用包和组件的应用程序 当我们调试应用程序时 IDE 中的 事件日志 通常会显示我们的 BPL 正在加载 但没有调试信息 无调试信息 这是没有意义的 因为我们所有的包和 EXE 都是通过调试构建的 each project O

  • WPF 本身支持读取/写入 WMF/EMF 文件吗？

    Windows Presentation Foundation 可以在不使用 WinForms Interop 或 Win32 的情况下读取 写入 WMF EMF 文件吗 如果没有 原因是什么 在 MSDN 上快速搜索发现a thread包

  • 停用 Jetty 的默认 404 错误处理程序

    我想在 Spring 3 1 Web 应用程序中提供自定义 404 错误页面 但我无法停用 Jetty 8 的默认 404 错误页面 Jetty 8 开箱即用 提供默认的 404 错误页面 当访问 Jetty 托管的网站并提供不由任何 se

  • MVC 与 n 层架构

    我想知道 MVC 一种架构模式 和应用程序的 n 层架构之间到底有什么区别 我搜索过但找不到简单的解释 可能我对 MVC 概念有点天真 所以如果有人能解释其中的区别那就太好了 N 层架构通常由网络分隔各层 IE 表示层位于某些 Web 服务

  • 在 Python 中设置配置文件的最佳方法是什么

    我意识到这个问题之前被问过 在 Python 中使用设置文件的最佳实践是什么 但鉴于这是 7 年前提出的问题 我认为随着技术的发展 再次讨论是有效的 我有一个 python 项目 需要根据环境变量的值使用不同的配置 由于使用环境变量来选择配

  • 折叠字符串中的空格

    我有一个看起来像这样的字符串 stuff more stuff stuff gt DD 我想去掉所有标点符号 将所有内容设为大写并折叠所有空格 使其看起来像这样 STUFF MORE STUFF STUFF DD 这可以通过一个正则表达式实

  • 使用支持库 v7:21 和 Android 开发人员工具中的工具栏为现有项目添加滑动选项卡

    我已经阅读了此链接中的信息 将 Tab 与新工具栏结合使用 AppCompat v7 21 并对此进行了大量研究 但问题是 SlidingTabLayout 项目正在使用 Gradle 构建文件和结构 我想使用 eclipse 添加选项卡布

  • 如何在JPQL连接中有多个条件

    我想使用连接两个表JPQL SELECT FROM A LEFT JOIN B ON A ID B A ID AND B lng en 重要的部分是AND B lng en 这可能在JPQL JPA 2 0 不支持 ON 子句 但 JPA

  • 不同父母的 Z 指数

    我在 z 索引方面遇到了一些麻烦 这是我的简化布局 div div div div div div div div I need overlapper出现在面前child1但后面child2 我尝试摆弄 z 索引 但它不起作用 我想是因为堆

  • 不同的 DCOM / COM 安全设置意味着什么？

    我们的应用程序广泛使用 COM 和 DCOM 因此我们需要确保正确设置 COM 安全权限 我知道我可以在组件服务 MMC 管理单元下访问这些权限 并且可以在计算机的属性页下设置默认值 限制 在 DCOM Config 节点下 我可以深入了解

  • 如何重用计算列避免重复sql语句

    我有很多计算列 它们不断重复自己 一个在其他列里面 包括嵌套的 case 语句 我一直在寻找一种方法来做某事 有一个非常简化的版本 SELECT 1 2 AS A A 3 AS B B 7 AS C FROM MYTABLE 你可以尝试这样

  • 我们可以将 JsPlumb 流程图导出为 JSON 或 XML 吗？

    我创建了一个 JSPlumb 流程图 现在 我想将此流程图导出到其相应的 JSON 或 XML 脚本中以保存并执行各种操作 什么更兼容 他们中的任何一个都很好 请赐教我这一点 我开发的 JsPlumb 代码 在各个网站的帮助下 如下所示

热门标签