Таблица с кастом выводом через JS

Специальный режим таблицы viewType=custom. В этом случае не выводится таблица или какой-то другой компонент. Данные передаются в callback GetItems и разработчик сам определяет вывод списковых данных через JS. От компонента таблица остается только заголовок и и фильтры.  Пагинация добавляется через вызов функции as.crud2.getPagingMakeup (см. пример ниже).

Из getItems данные передаются в виде 2 коллекций - items (SELECT 1) и footerItems (SELECT 4)

Как реализовать:

1. В select 3 ставим ViewType

CREATE PROCEDURE [dbo].[crud_watch_customViewType_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_categories c
    where isnull(@filterName, '')='' or name like '%'+@filterName+'%'
	-- SELECT 1
	select id, name, (select count(*) from tst_categoryProducts where categoryID = c.id)  cnt
    from tst_categories c
    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
    Select 'h3' headerTag, 'custom' viewType
	
	-- 4 SELECT Footer data or kanban/gantt data
	select 11 x1, 12 x2
    union 
    select 21 x1, 22 x2
    
END

2. Реализуем JS коллбек GetItems: 

<script>
$(function(){
	as.crud2callbacks["watch_customViewType_getItems"] = function(options, data){
      console.log("table data", data)
      var cont = options.cont;
      var s = "";
      
      for(var i = 0; i < data.items.length; i++){
        var item = data.items[i];
       	 s+= "#"+item.id + " " + item.name + " (" + item.cnt + ")<br>";
      }
      s+="<hr>";
      if(data.footerItems){
      	s+="<h4>Footer items</h4>";
      	for(var i = 0; i < data.footerItems.length; i++){
        	var fi = data.footerItems[i];
 	        for(var key in fi) {
			    var value = fi[key];
              	s += key + "=" + value+ ", "
			}
          	s+="<br>";       	 	
      	}        
      }  
      s+=  as.crud2.getPagingMakeup(options, 'pgClass')
      cont.append(s);    
    }

});
</script>

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

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

Вывод временной линии timeline

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

Вывод диаграммы типа pie

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

Вывод диаграммы вида radar

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

Вывод графиков line

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

Вывод гистограммы bar

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

Вывод полосок прогресса

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

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

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

Платформа Falcon Space

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

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

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

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

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

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