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
    };
});