Интерактивное дерево для отображения иерархических структур

Один из режимов компонента Таблица, позволяющих сделать навигацию по большому иерархическому дереву. 

Демо-стенд компонента

Настройка Дерева

Для вывода данных необходимо следующим образом настроить таблицу. 

1. В SELECT 1 вернуть таблицу следующего вида: 

declare   @result TABLE (id int, parentID int, name nvarchar(256), data nvarchar(max))

data - дополнительные данные по объекту, передающиеся в виде JSON строки (кавычки для параметров обязательны). Если не используется - передаем пустую строку.

parentID - ссылка на родителя элемента. По этому полю строится иерархия элементов (на стороне браузера). 

2. В SELECT 3 указываем ViewMode='dynamicTree' и настройки плагина.

select 'dynamicTree' ViewType,
    	'{ "levelDistance": 100, "setCurrentAsRoot": false, "orientation": "top",
        "contHeight":"400px",
        "itemFormCode": "tst-dynTreeItem",
        "itemFormContainer": ".itemFormDetails"
        }' dynamicTreeOptions 

 в dynamicTreeOptions передаются как системные настройки плагина jit, так и дополнительные настройки: 

  • setCurrentAsRoot - если true, то при клике на элемент диаграмма будет преобразовываться (корневым элементом становится текущий выбранный). 
  • orientation - left, right, top, bottom - "куда" будет расти дерево. 
  • contHeight - можно установить высоту контейнера. По умолчанию контейнер имеет высоту 500px (при ширине 100%). 
  • itemFormCode, itemFormContaiter - если эти параметры установлены, то при клике на элемент, в контейнер с селектором itemFormContaiter будет добавляться форма с кодом itemFormCode, которой в качестве data-itemID будет передаваться id текущего элемента. 

По умолчанию системные настройки плагина (которые можно подменить на свои в dynamicTreeOptions) выглядят следующим образом: 

var defaultOptions = {
                //id of viz container element
                injectInto: contID,
                //set duration for the animation
                duration: 800,
                //SET THE TREE TO VERTICAL
                orientation: "left",
                //set animation transition type
                transition: $jit.Trans.Quart.easeInOut,
                //set distance between node and its children
                levelDistance: 50,
                //enable panning
                Navigation: {
                    enable: true,
                    panning: true
                },
                //set node and edge styles
                //set overridable=true for styling individual
                //nodes or edges
                Node: {
                    height: 25,
                    width: 60,
                    type: 'rectangle',
                    color: '#aaa',
                    overridable: true
                },

                Edge: {
                    type: 'bezier',
                    overridable: true
                },

                onBeforeCompute: function (node) {
                    as.vis.log("loading " + node.name);
                },

                onAfterCompute: function () {
                    as.vis.log("done");
                },

                //This method is called on DOM label creation.
                //Use this method to add event handlers and styles to
                //your node.
                onCreateLabel: function (label, node) {
                    label.id = node.id;
                    label.innerHTML = node.name;
                    label.onclick = function () {
                        if (options.setCurrentAsRoot) {
                            st.setRoot(node.id, 'animate');
                        } else {
                            st.onClick(node.id);
                        }
                        if (options.itemFormCode && options.itemFormContainer) {
                            var cont = $(options.itemFormContainer);
                            if (cont.length) {
                                var s = "";
                                cont.html(s);
                                as.initControls(cont);
                            }
                        }

                    };
                    //set label styles
                    var style = label.style;
                    style.width = 60 + 'px';
                    style.height = 17 + 'px';
                    style.cursor = 'pointer';
                    style.color = '#333';
                    style.fontSize = '0.8em';
                    style.textAlign = 'center';
                    style.paddingTop = '3px';
                },

                //This method is called right before plotting
                //a node. It's useful for changing an individual node
                //style properties before plotting it.
                //The data properties prefixed with a dollar
                //sign will override the global node style properties.
                onBeforePlotNode: function (node) {
                    //add some color to the nodes in the path between the
                    //root node and the selected node.
                    if (node.selected) {
                        node.data.$color = "#ff7";
                    }
                    else {
                        delete node.data.$color;
                        //if the node belongs to the last plotted level
                        if (!node.anySubnode("exist")) {
                            //count children number
                            var count = 0;
                            node.eachSubnode(function (n) { count++; });
                            //assign a node color based on
                            //how many children it has
                            node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count];
                        }
                    }
                },

                //This method is called right before plotting
                //an edge. It's useful for changing an individual edge
                //style properties before plotting it.
                //Edge data proprties prefixed with a dollar sign will
                //override the Edge global style properties.
                onBeforePlotLine: function (adj) {
                    if (adj.nodeFrom.selected && adj.nodeTo.selected) {
                        adj.data.$color = "#eed";
                        adj.data.$lineWidth = 3;
                    }
                    else {
                        delete adj.data.$color;
                        delete adj.data.$lineWidth;
                    }
                }
            };

Вопросы по Дереву

Как сделать добавление элемента?

Через отдельную форму, после которой сделать refreshContainer с нашим деревом. 

Как удалить элемент? 

Можно реализовать дополнительную кнопку в itemForm для удаления данного элемента с последующим обновлением дерева через refreshContainer.

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом

Это быстрое внесение изменений

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

адаптация под мобильные устройства. Про юзабилити платформы

Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.
Сайт использует Cookie. Правила конфиденциальности OK