Работа с деревьями (иерархия). Вывод древовидных структур на сайте

Описание компонента Дерево

Пример компонента Дерево

Компонент позволяет отобразить иерархические структуры. Есть возможность выполнять различные действия при выборе определенного элемента. Также есть возможность добавлять элемент, удалять элемент и переименовывать элемент. 

Пример отображения на странице:

ВАЖНО. Дерево не рекомендуется использовать с большим количеством элементов (более 300), т.к. в компоненте нет пагинации.

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

На странице используйте сниппет вида: 

<div class="as-tree" data-code="catalog" data-itemid="123"></div>

Создается элемент в Компоненты / Деревья (as_trees). 

• name - название 
• code - код (используется в сниппете)
• roles - роли через запятую (пример: admin,sitemanager,editor), задает доступ к элементам дерева (распространяется сразу на все операции с деревом - получить, добавить, переименовать, удалить). 

Далее реализуем хранимые процедуры: 

• GetItems - получить элементы
• RenameItem - переименовать элемент
• DeleteItem - удалить элемент
• CreateItem - создать элемент

Процедура 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 находится селектор контейнера, в котором надо обновить компоненты. 

Процедура RenameItem 

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

Процедура DeleteItem

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

Процедура CreateItem

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.treecallbacks["{code}_selectNode"] =function(event, data){
       // ....
       as.initControls($('.cont1'));  // update controls in container
    };
});

Как вызвать JS коллбек после загрузки данных по дереву

$(function(){
    as.treecallbacks["{code}_getItems"] =function(data, cont){
       // ....
       console.log("xxx");
       as.initControls($('.cont1'));  // update controls in container
    };
});

Обновление апрель 2021. Вместо объекта  as.tree.callbacks теперь используется as.treecallbacks

Важно!!! Некоторые настройки ячеек и строк не будут работать при использовании rowMakeup (например, операции, раскрашивание строк в цвета, увеличение ячейки при наведении). 

Дополнительные материалы

1. Интерактивное дерево
2. Глобальные коллбеки JS
3. Как вывести дерево с выбором галочек на форме
4. Как сделать фильтр с деревом галочек
5. Управление иерархией дерева через drag&drop
6. Как сделать сортировку дерева с drag&drop
7. Динамическое интерактивное дерево на сайте