Демо

Детали строки таблицы в отдельной форме

Name: Детали строки таблицы в отдельной форме
Availability: InStock
Author: Falcon Space

Описание, как реализовать

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

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

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

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

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

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

<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" style="position:fixed; min-width: 300px;">    

    </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(''+name+'
', '') [name],
	' Перемести меня' 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: https://pastebin.com/te7nfwp3

Другие демостенды

— Как создать вложенные таблицы на сайте
— Полный и компактный вид таблицы на сайте в личном кабинете
— Как изменить верхнюю панель сайта
— Cообщения от сервера клиенту в браузер по инициативе с сервера
— Таблицы в виде карточек

Что есть в базе знаний по этой теме

— Работа со страницами
— Как связать таблицу и редактирование сущности (зависимая страница). Master-slave
— Как реализовать подтаблицу (вложенная таблица), подформу в таблице
— Галочки с множественным выбором, checkboxes
— Как сделать сворачивание таблицы (collapse table)
— Как сделать раскрытие подстроки в таблице через любую ссылку

В чем выгода для бизнеса?

Возможность просмотреть детали строки таблицы в отдельной форме рядом. Удобно для быстрого доступа к дополнительной информации без перехода на другую страницу. Поддерживает drag-and-drop.