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

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

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

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

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

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

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

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

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

 

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

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

Процедура 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

На входе: 

На выходе: 

SELECT 1: Основные настройки дерева

SELECT 2: Данные по элементам дерева 

Типы действий (колонка Type):

Процедура 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

На входе: 

На выходе: 

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

На входе: 


На выходе: 

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

На входе: 

На выходе: 

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. Динамическое интерактивное дерево на сайте

 

 

Страница-источник на сайте falconspace.ru