GetOrgChart - рендеринг, обновление, удаление и т. Д. - PullRequest
Новая
       43

GetOrgChart - рендеринг, обновление, удаление и т. Д.

0 голосов
/ 03 октября 2018

У меня есть несколько вопросов.

1) Как обновить существующий узел с точки зрения его темы / цвета / внешнего вида?Я был бы рад обновить конфиг и после этого перерисовать всю диаграмму (но orgChart.draw (), похоже, не работает).

2) Что касается перетаскивания, когда включено перетаскивание на другой узелничего не делаетМогу ли я сделать ссылку на функцию, которая, например, «перемещает» перетаскиваемый узел на узел, на котором он был отброшен?

3) Когда функция перетаскивания включена, кнопки действий (узел редактирования,удалить узел, добавить дочерний узел) отключены.

Заранее спасибо!

1 Ответ

0 голосов
/ 29 октября 2018

Вы можете использовать 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>
...