Свернуть все узлы под нагрузкой для очень большой оргструктуры - PullRequest
Новая
       31

Свернуть все узлы под нагрузкой для очень большой оргструктуры

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

У меня есть оргструктура ~ 6000 человек, которую мне нужно получить для рендеринга.Как я уверен, вы можете себе представить, это слишком много, чтобы загрузить все сразу -

Мне было интересно, можно ли загрузить все узлы в свернутом виде, а затем функцию поиска развернутьдерево соответствующего узла.

Или, может быть, кто-то знает о лучшем способе загрузки огромной оргструктуры, подобной этой?

Любая помощь вообще ценится!

1 Ответ

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

OrgChart JS поддерживает отложенную загрузку, и у них есть пример с 5000 узлами, вероятно, 6000 не будет проблемой

enter image description here

Вот демоверсия: 

window.onload = function () {
    var nodes = [];
    var links = [];
    var imgIndex = 1;
    for (var i = 1; i < 4496; i++) {
        nodes.push({
            id: i, name: i, photo: "//balkangraph.com/js/img/" + imgIndex + ".jpg"
        });
        imgIndex++;
        if (imgIndex > 10) {
            imgIndex = 1;
        }
    }

    for (var i = 2; i < 500; i++) {
        links.push({ from: i, to: 1 });

        for (var j = 1; j < 4; j++) {
            links.push({ from: 3 * i + j - 2, to: i });
            for (var k = 1; k < 4; k++) {
                links.push({ from: 3 * (3 * i + j - 2) + k - 2, to: 3 * i + j - 2 });
            }
        }
    }
    var chart = new OrgChart(document.getElementById("tree"), {
        template: "ana",
        lazyLoading: true,
        showXScroll: BALKANGraph.scroll.visible,
        mouseScroolBehaviour: BALKANGraph.action.xScroll,
        layout: BALKANGraph.mixed,
        scaleInitial: BALKANGraph.match.height,
        nodeBinding: {
            field_0: "name",
            img_0: "photo"
        },
        links: links,
        nodes: nodes
    });  
};
html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Helvetica;
}

#tree {
    width: 100%;
    height: 100%;
}
<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>


<div id="tree"></div>
...