Таблица с показом деталей строк справа в форме

В этом примере показываем как сделать связку на одной странице таблицы и формы с детализацией.

Первая кнопка в строке по клику загружает форму в контейнер справа. Используется as-form-link.

Вторую кнопку в строке можно перетащить в контейнер справа и это загрузит соответствующую форму в этот контейнер. 

Документация по drag n drop - https://falcon.web-automation.ru/docs/peretaskivanie-elementov-na-stranice

Как реализован этот пример

Разметка на странице - выводим таблицу и контейнер, rlf мы будем грузить форму.

<div class="row">
  <div class="col-12 col-md-8">
    <div class="as-table" data-code="watch_linkedTable"></div>
  </div>
  <div class="col-12 col-md-4">
    <div class="linkedForm as-droppable py-5" data-code="linkedTable2" data-itemid="0" >    
      
    </div>
  </div>
</div>

Процедура таблицы: 

CREATE PROCEDURE [dbo].[crud_watch_linkedTable_getItems]
	@filters CRUDFilterParameter READONLY,  
	@sort sql_variant,
	@direction nvarchar(8),
	@page int,
	@pageSize int,
	@username nvarchar(32)
AS
BEGIN
	declare   @ids TABLE (id int)

	-- filters...
	declare @filterName nvarchar(128)
	select @filterName = Value from @filters where [Key] = 'name'
	
	insert into @ids
	select id
	from tst_customers
	where (isnull(@filterName, '')='' or name like '%'+@filterName+'%')
	
	-- SELECT 1
	select 
		isnull([id], 0) [id],
		isnull('<a href="#" class="as-form-link" data-code="watch_linkedForm" data-itemid="'+cast(id as nvarchar)+'" 
   data-target=".linkedForm" data-mode="replace" data-hideLink="0">'+name+'</a>
', '') [name],
	' <a href="#" class="btn btn-primary btn-xs as-draggable" draggable="true" title="Простое перетаскивание элемента" data-onedrop="0" data-copy="1" '+
    ' data-code="linkedTable1" data-itemid="'+cast(id as nvarchar)+'">Перемести меня</a>' desc_name

	from tst_customers 
	where id in (select id from @ids)
	order by  
		case when @sort = 'name' and @direction = 'down' then name end desc,
		case when @sort = 'name' and @direction = 'up' then name end asc
	OFFSET @PageSize * (@Page - 1) ROWS
	FETCH NEXT @PageSize ROWS ONLY;
	
	-- SELECT 2
	select count(*) from @ids	

	-- SELECT 3	
		
	-- 4 SELECT Footer data or kanban/gantt data

END

Процедура saveDrop: 

alter PROCEDURE [dbo].[falcon_dragDrop]
   @parameters ExtendedDictionaryParameter readonly,
	@username nvarchar(256)
AS
BEGIN
	declare @elementItemID int, @elementCode nvarchar(128),
           @containerItemID int, @containerCode nvarchar(128)
	select @elementItemID = try_cast(Value2 as int)
           from @parameters where lower([Key])='elementitemid'
	select @elementCode= Value2
           from @parameters where lower([Key])='elementcode'
	select @containerItemID = try_cast(Value2 as int)
           from @parameters where lower([Key])='containeritemid'
	select @containerCode = Value2
           from @parameters where lower([Key])='containercode'



  
	if(@elementCode='linkedTable1') begin 
		-- SELECT 1
		select 1 Result, '' Msg,
           '' icon, '.linkedForm' RefreshContainer, 
		   '.linkedForm' ReplaceContainer, 
		   '<div class="as-form" data-code="watch_linkedForm" data-itemID="'+cast(@elementItemID as nvarchar)+'"></div>' ReplaceContainerHtml,
           'copy' [action] -- move, back, delete, copy

		return
	end 

  declare @actionType nvarchar(128) = case
		when @elementCode= 'copyType' then 'copy'
		when @elementCode= 'moveType' then 'move'
		when @elementCode=  'deleteType' then 'delete'
		when @elementCode= 'backType' then 'back'
	end

	-- SELECT 1
    select 1 Result, '' Msg,
           'fa-cogs' icon, '' RefreshContainer, '' ReplaceContainer, '' ReplaceContainerHtml,
           isnull(@actionType, 'copy') [action] -- move, back, delete, copy

	-- SELECT 2 Outer commands

END

Другие модули

Последние обновления

Виды таблицы: Календарь

Визуализация 24.10.2021

Виды таблицы: Диаграмма Chartbar

Визуализация 24.10.2021

Виды таблицы: Карточки

Визуализация 24.10.2021

Виды таблицы: Доска Канбан

Визуализация 24.10.2021

Виды менеджера ресурсов

Визуализация 24.10.2021

SQL-инструмент для создания личных кабинетов на сайте

Суть подхода и история создания Falcon Space

Платформа Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки

Это быстрое внесение изменений

по ходу эксплуатации программы

Это современный интерфейс

полная адаптация под мобильные устройства