GetOrgChart-渲染,更新,删除等

时间:2018-10-03 09:38:17

标签: orgchart getorgchart

我有几个问题。

1)如何更新现有节点的主题/颜色/外观?我很乐意更新配置,然后重新绘制整个图表(但orgChart.draw()似乎不起作用)。

2)关于拖放,启用后,在另一个节点上的拖放不会执行任何操作。我是否可以引用某个函数,例如将拖放的节点“移动”到其拖放到的节点上?

3)启用拖放功能后,将禁用操作按钮(编辑节点,删除节点,添加子节点)。

谢谢!

1 个答案:

答案 0 :(得分:0)

您可以使用BALKANGraph插入来实现所需的功能

1)参见下面的示例:

2)和3)无需任何修改即可工作

enter image description here

            var chart = new OrgChart(document.getElementById("tree"), {
                template: "ana",
                nodeBinding: {
                    field_0: "name",
                    img_0: "img"
                },
                links: [
                    { from: "2", to: "1" },
                    { from: "3", to: "1" }
                ],
                nodes: [
                    { id: "1", name: "Plamen Peshev", img: "//balkangraph.com/js/img/empty-img-blue.svg"  },
                    { id: "2", name: "Ava Field", img: "//balkangraph.com/js/img/empty-img-blue.svg"  },
                    { id: "3", name: "Rhys Harper", img: "//balkangraph.com/js/img/empty-img-blue.svg" }
                ]
            }); 

            document.getElementById("changeTemplate").addEventListener("click", function () {
                chart.config.nodes["1"].tags = ["ula-template"];
                chart.config.tags["ula-template"] = { template: "ula" };
                chart.draw(false);
            });
        html, body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-family: Helvetica;
        }

        #tree {
            width: 100%;
            height: 100%;
        }

#changeTemplate{
  font-size: 24px;
}
<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>
<button id="changeTemplate">Change the template of node 1</button>
<div id="tree"></div>