Question

我可以使用我的目录中的JSON文件来初始化我的图表。但是，我很难尝试实现系统，因此我的index.html（包含图表）所做的所有更改都将被保存并保持不变。即使index.html被刷新，最终目标是存储相同的数据+节点。

在这方面，我能够听取update，create，remove和delete事件，但我不知道该怎么做一旦这些事件被触发。我应该能够使用从这些事件接收的参数直接编辑我的本地JSON文件。到目前为止，我可以得到论点，但我不知道如何使用这些新参数更新我的JSON文件。任何有关这方面的想法都将受到高度赞赏。

这是我的代码看起来很远的地方。它做了我想要的一切，除了使节点+数据持久化。

＆＃13;

getOrgChart.themes.myCustomTheme = {
  size: [270, 400],
  toolbarHeight: 46,
  textPoints: [{
      x: 130,
      y: 50,
      width: 250
    },
    {
      x: 130,
      y: 90,
      width: 250
    }
  ],
  textPointsNoImage: [{
      x: 130,
      y: 50,
      width: 250
    },
    {
      x: 130,
      y: 90,
      width: 250
    }
  ],
  expandCollapseBtnRadius: 20,
  defs: '<filter id="f1" x="0" y="0" width="200%" height="200%"><feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" /><feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" /><feBlend in="SourceGraphic" in2="blurOut" mode="normal" /></filter>',
  box: '<rect x="0" y="0" height="400" width="270" rx="10" ry="10" class="myCustomTheme-box" filter="url(#f1)"  />',
  text: '<text text-anchor="middle" width="[width]" class="get-text get-text-[index]" x="[x]" y="[y]">[text]</text>',
  image: '<clipPath id="getMonicaClip"><circle cx="135" cy="255" r="85" /></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#getMonicaClip)" xlink:href="[href]" x="50" y="150" height="190" width="170"/>',
  reporters: '<circle cx="80" cy="190" r="20" class="reporters"></circle><text class="reporters-text" text-anchor="middle" width="100" x="80" y="195">[reporters]</text>'

  //ddddd: '<text x="0" y="0">1</text>'
};

$.getJSON("http://localhost:8000/data.json", function(source) {
  var peopleElement = document.getElementById("people");
  var orgChart = new getOrgChart(peopleElement, {
    photoFields: ["Image"],
    linkType: "M",
    enableEdit: true,
    enableDetailsView: false,
    theme: "myCustomTheme",
    enableGridView: true,
    primaryFields: ["Name", "Title", "Phone", "Address"],
    enablePrint: true,
    updateNodeEvent: wo,
    renderNodeEvent: renderNodHandler,
    dataSource: source
  });
});






function wo(sender, args) {
  n = args.node.data.Name
  alert(n)
}


function renderNodHandler(sender, args) {
  for (var i = 0; i < args.content.length; i++) {
    if (args.content[i].indexOf("[reporters]") != -1) {
      args.content[i] = args.content[i].replace("[reporters]", args.node.children.length);
    }
  }
}

＆＃13;

html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#people {
  width: 100%;
  height: 100%;
}

.get-text {
  fill: #686868 !important;
}

.myCustomTheme-box {
  fill: #FFFFFF;
  stroke: #DDDAB9;
}

.reporters {
  fill: #0072C6;
}

.reporters-text {
  fill: #ffffff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="opendb.js"></script>
<script src="getorgchart.js"></script>
<div id="content">
  <div id="people"></div>
</div>

＆＃13;

Answer 1

好的，所以似乎没有人回答这个问题。我将自己回答这个问题以供将来参考。

好吧，所以我不得不创建后端来处理问题。具体来说，我安装了nodejs。我使用express.js和ajax从客户端和服务器发送/接收数据。使用getorgcharts文档中提供的事件，insertNodeEvent，updateNodeEvent等，我实现了CURD。在这方面，npm图书馆diskdb是一个救生员！通过根据客户端执行的CURD操作更改json文件，可以实现持久化。然后，服务器端代码将相应地添加/更新/编辑/删除json文件中的记录。

如何使用本地JSON文件保存图表的状态？

1 个答案: