Falcon Space. Работа с деревьями (иерархия)
Описание компонента Дерево
Компонент позволяет отобразить иерархические структуры. Есть возможность выполнять различные действия при выборе определенного элемента.
Также есть возможность добавлять элемент, удалять элемент и переименовывать элемент.
Настройка дерева
На странице используйте сниппет вида:
<div class="as-tree" data-code="catalog" data-itemid="123"></div>
Создается элемент в Компоненты / Деревья (as_trees).
- name - название
- code - код (используется в сниппете)
- roles - роли через запятую, задает доступ к элементам дерева (распространяется сразу на все операции с деревом - получить, добавить, переименовать, удалить).
Далее реализуем хранимые процедуры:
- GetItems - получить элементы
- Rename - переименовать элемент
- Delete - удалить элемент
- Create - создать элемент
Процедура GetItems
ALTER procedure [dbo].[tree_example_getItems]
@parameters DictionaryParameter READONLY,
@username nvarchar(128 )='',
@itemID nvarchar(128)=''
as
begin
-- SELECT 1
select 1 Result, '' Msg,
1 CanRename, 1 CanAdd, 1 canDelete,
'' PlusIcon, '' MinusIcon, 1 ShowIcon, 1 ShowTags,
'0' ParentIDRootValue,
'' EmptyIcon,
'' NodeIcon
-- SELECT 2
select id Id,
name title,
isnull(parentID, 0) ParentID,
ord Ord,
'' Icon, -- fa fa-cube
'form' [Type], -- // form, redirect, refreshContainer
'111 33333 ' Value,
--'refreshContainer' [Type],
--'body' Value,
iif(id=1009, 1, 0) Expanded,
iif(id=1009, 1, 0) Selected,
'fa fa-stop' selectedIcon,
'#555' color,
'#eee'backColor,
'#123' href,
1 selectable,
'1222|23' info
from as_cat_categories
end
На входе:
- @parameters - URL параметры (здесь же langID - текущий язык)
- @username - текущий пользователь
- @itemID - itemID, переданный в процедуру
На выходе:
SELECT 1: Основные настройки дерева
- Result,
- Msg,
- CanRename - если 1, то будет доступна возможность редактирования названия.
- CanAdd - если 1, то будет доступна возможность добавления.
- CanDelete - если 1, то доступна функция удаления,
- PlusIcon, MinusIcon - возможность установить кастомные иконки открытия и сворачивания элементов (Font Awesome).
- ShowIcon - если 1, то показываются иконки у элементов
- ShowTags - если 1, то будут выведены поля info в элементах в виде тегов напротив каждого элемента.
- ParentIDRootValue - задает значение, которое определяет parentID для верхнего уровня (обычно это или ‘’ или ‘0’).
- EmptyIcon - задание иконки для пустых элементов
- NodeIcon - задание одной иконки для всех элементов
SELECT 2: Данные по элементам дерева
- id - ID элемента(может быть строкой)
- title - название элемента дерева
- parentID - ссылка на родителя (может быть строкой)
- ord - порядок
- icon - иконка элемента
- type - тип действия при выборе элемента (см ниже).
- value - значение (используется при действии)
- expanded - если 1, то элемент будет раскрыт при загрузке
- selected - если 1, то элемент будет выбран при загрузке
- selectedIcon - иконка выбранного элемента.
- color - hex цвет шрифта
- backColor - hex цвет фона
- selectable - если 1, то элемент можно выбирать
- info - теги, перечисленные через знак |, например, “123|Долго”
Типы действий (колонка Type):
- form. Показывает модальную форму. В Value должна находиться верстка кнопки вызова модальной формы, например: 'Button' Value,
- redirect - редирект на другую страницу, в Value находится адрес страницы.
- refreshContainer - обновление части страницы при выборе категории. В Value находится селектор контейнера, в котором надо обновить компоненты.
Процедура Rename
create PROCEDURE [dbo].[tree_example_renameItem]
@id nvarchar(128),
@name nvarchar(128),
@username nvarchar(32)
AS
BEGIN
update as_cat_categories
set name = @name
where id = @id
-- SELECT 1
Select 1 Result, '' Msg
END
На входе:
- @id - ID элемента, для которого меняем название
- @name - новое название
- @username - текущий пользователь.
На выходе:
SELECT 1: Result, Msg
Процедура Delete
ALTER PROCEDURE [dbo].[tree_catalog_deleteItem]
@id nvarchar(128),
@username nvarchar(32)
AS
BEGIN
delete from as_cat_categories where id = @id
-- SELECT 1
Select 1 Result, '' Msg
END
На входе:
- @id - ID элемента, который будем удалять
- @username - текущий пользователь.
На выходе:
SELECT 1: Msg, Result
Процедура Create
create PROCEDURE [dbo].[tree_example_createItem]
@parameters DictionaryParameter READONLY,
@parentID nvarchar(128),
@name nvarchar(128),
@itemID nvarchar(128),
@username nvarchar(32)
AS
BEGIN
declare @catParentID int
set @catParentID = try_cast(@parentID as int)
if(@catParentID=0) set @catParentID= null
insert into as_cat_categories(name, parentID, ord, code)
values(@name,
@catParentID,
(select max(ord) + 1 from as_cat_categories),
@name
)
-- SELECT 1
Select 1 Result, '' Msg, Scope_identity() [NewID]
END
На входе:
- @parameters - URL параметры (здесь же langID - текущий язык)
- @parentID - в какой элемент надо добавить новый элемент
- @name - название нового элемента
- @itemID - itemID, который передан в сниппет дерева,
- @username - текущий пользователь.
На выходе:
SELECT 1: Msg, Result, NewID (ID созданного элемента)
HOWTO по деревьям
Как вызывать некую форму по нажатию на элемент дерева?
В элементах дерева в GetItems.SELECT 2 указать Type=”form” и в Value прописать верстку кнопки вызова модальной формы.
Как делать переход на определенный адрес при переходе на элемент дерева?
В элементах дерева в GetItems.SELECT 2 указать Type=”redirect” и в Value прописать адрес перехода.
Как вызвать JS коллбек после выбора элемента
$(function(){
as.tree.callbacks["{code}_selectNode"] =function(event, data){
// ....
as.initControls($('.cont1')); // update controls in container
};
});
Примеры работы компонентов платформы Falcon Space
Примеры удобных таблиц и форм Примеры дашборда Примеры графиков и диаграмм Пример календаря Таблица с данными по API Пример вывода карты с точками Виды полей форм Пример виджета статистики Пример дерева иерархии Пример компонента Временная линия Пример карточки товаров Пример учета загрузки ресурса Пример Канбан доски Пример мастер формы Пример выгрузки документов Excel/Word Пример заполнения данных по ИНН- Руководства
- Основа Falcon Space
- Основные компоненты Falcon Space. Работа с таблицами Falcon Space. Работа с формами Falcon Space. Работа с дашбордами Falcon Space. Работа с ресурсами Falcon Space. Работа со статусами Falcon Space. Бизнес-процессы Falcon Space. Генерация документов Docx и Xlsx Falcon Space. Работа с деревьями (иерархия) Работа с HTML блоками Внешние действия (уведомления, пуш, email, вызов API) Диаграммы и графики Интерактивное дерево Диаграмма Ганта Доска Канбан Диаграмма Chartbar Карта с маркерами Карточки Полоски прогресса Временная линия (timeline) Календарь
- Возможности Falcon Space
- Подсистемы
- Дополнительные компоненты
- Интеграции
- HOWTO
- HOWTO Таблицы
- HOWTO Формы
- HOWTO JS
- HOWTO CSS
- HOWTO Верстка
- Решение проблем
Платформа Falcon Space
Это снижение стоимости владения
за счет меньшего количества людей для поддержки
Это быстрое внесение изменений
по ходу эксплуатации программы
Это современный интерфейс
полная адаптация под мобильные устройства
Бесплатное обучение разработке на Falcon Space
