Интерактивное дерево для отображения иерархических структур
Один из режимов компонента Таблица, позволяющих сделать навигацию по большому иерархическому дереву.
Настройка Дерева
Для вывода данных необходимо следующим образом настроить таблицу.
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.
Google поиск по нашей документации
- Руководства
- Основа Falcon Space
- Основные компоненты
- Возможности
- Коммуникация с пользователем
- Дизайн, стилизация
- Лендинги
- Универсальный API
- Примеры интеграций
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты Бизнес-процессы. Создание бизнес-процесса в личном кабинете Работа с показателями. Управление метриками на сайте Создание панелей-подсказок для пользователей в личном кабинете Отображение счетчиков в личном кабинете на сайте Работа с HTML блоками. Создание модулей верстки Работа с деревьями (иерархия). Вывод древовидных структур на сайте Добавление лайков, дизлайков, рейтингов, голосования за товары в личном кабинете Интерактивное дерево для отображения иерархических структур Диаграмма Ганта на сайте Доска Канбан Диаграмма Chartbar Карта с маркерами. Вывод точек на Google Maps Карточки Полоски прогресса Временная линия (timeline) для вывода событий на странице Вывод данных в виде графа на сайте Вывод движения заявки по статусам statusbar Интерактивные диаграммы, графики
- Продвижение, SEO
- Системные моменты
- Системное администрирование
- HOWTO
- Таблицы
- Формы
- Загрузка файлов, картинок
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Falcon Space
Это снижение стоимости владения
за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом
Это быстрое внесение изменений
по ходу эксплуатации программы. Как создается функционал на платформе
Это простой удобный интерфейс
адаптация под мобильные устройства. Про юзабилити платформы