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 прописать адрес перехода.

Примечание