Falcon Space. Working with trees (hierarchy)
Description of the Tree component
The component allows you to display hierarchical structures. There is a possibility to perform various actions when you select a specific item.
You can also add an element, delete an element, and rename an element.
Tree setting
Use a snippet on the page:
<div class="as-tree" data-code="catalog" data-itemid="123"></div>
An element is created in Components/Trees (as_trees).
- name-name
- code-code (used in the snippet)
- roles-comma-separated roles set access to tree elements (applies to all operations with the tree at once-get, add, rename, delete).
Next, implement stored procedures:
- GetItems-get elements
- Rename-rename the element
- Delete-delete element
- Create-create element
GetItems procedure
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
At the entrance:
- @parameters - URL parameters (here langID is the current language)
- @username - current user
- @itemID - itemID, passed to the procedure
At the exit:
SELECT 1: The basic configuration of the tree
- Result,
- Msg,
- CanRename - if 1, then you will be able to edit the name.
- CanAdd - if 1, then you will be able to add it.
- CanDelete - if 1, then the delete function is available,
- PlusIcon, MinusIcon-ability to set custom icons for opening and collapsing elements (Font Awesome).
- ShowIcon - if 1, icons are displayed for elements
- ShowTags - if 1, the info fields in the elements will be displayed as tags opposite each element.
- ParentIDRootValue-sets the value that defines the parentID for the top level (usually it is either‘ or ‘ 0’).& nbsp;
- EmptyIcon-setting icons for empty elements
- NodeIcon-setting a single icon for all elements
SELECT 2: data for tree elements
- ID-element ID(can be a string)
- title - name of the tree element
- parentID-reference to the parent (can be a string)
- ord-order
- icon-element icon
- type - type of action when selecting an element (see below).& nbsp;
- value-value (used for the action)
- expanded - if 1, the element will be revealed at boot
- selected - if 1, the element will be chosen at boot
- selectedIcon - icon of the selected element.
- color - hex color of the font
- backColor - hex background color
- a selectable - if 1, the element can be selected
- info - tags listed in the sign |, e.g., "123|Long"
Action types (type column):
- form. Shows the modal form. The Value must contain the layout of the modal form call button, for example: 'Button' Value,
- redirect - redirect to another page with the page address in Value.
- refreshContainer - updates part of the page when selecting a category. In Value, there is a container selector where you need to update components.
Rename procedure
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
At the enter:
- @id - ID of the element, for which we change name
- @name - new name
- @username - current user.
At the exit:
SELECT 1: Result, Msg
Procedure 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
At the enter:
- @id - ID of the element, which we'll delete
- @username - current user.
At the exit:
SELECT 1: Msg, Result
Procedure 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
At the enter:
- @parameters - URL parameters (here langID - current language)
- @parentID - which element should I add a new element to
- @name - the name of new element
- @itemID - itemID, which is passed to the tree snippet
- @username - current user
At the exit:
SELECT 1: Msg, Result, NewID (ID of the element, which was created)
HOWTO by tree
How do I call a certain form by clicking on a tree element?
In the tree elements in GetItems.SELECT 2 specify Type=”form” and write the layout of the modal form call button in Value.
How do I go to a specific address when I go to a tree element?
In the tree elements in GetItems.SELECT 2 specify Type=”redirect” and enter the transition address in Value.
- Management
- Falcon Space Foundation
- Basic components
- Falcon Space Features
- Коммуникация с пользователем
- Дизайн, стилизация
- Integrations
- Каталоги
- Навигация
- Документы
- Additional component Falcon Space. Working with indicators Falcon Space. Panel-hints Falcon Space. The counters component Falcon Space. Business processes Falcon Space. Working with the catalog, shopping cart, and orders Working with HTML blocks Falcon Space. Working with trees (hierarchy) Universal likes, dislikes, ratings, voting for products Interactive tree Gantt Chart The Kanban Board Chartbar diagram Map with markers Cards Progress line Timeline Uploaded files Data output in the form of a graph on the site Output of the request movement by statusbar statuses
- Продвижение, SEO
- Системные моменты
- HOWTO
- HOWTO Tables
- HOWTO Forms
- Working with SQL
- HOWTO JS
- HOWTO Layout
- Solve problems
Falcon Space Platform
This is a reduction in the cost of ownership
at the expense of fewer people to support
This is a quick change
while using the program
This is a modern interface
full adaptation for mobile devices
- Falcon Space Video
- Platform features demo will allow you to understand how this or that component looks and works
- Have a question? Write to the chat at the bottom right