Каталог List. Создание кастом фильтра со своей разметкой

Иногда не хватает возможностей стандартных типов фильтров каталога List. 

С Января 2024 стало возможным создавать кастом фильтры. 

Как это сделать: 

В list_search в SELECT 2 указываем настройки фильтра. Необходимо указать разметку фильтра в defValue, а текущее выбранное значение в commaSelected

TypeCode должен быть равен custom.

Пример, в котором мы используем кастом фильтр в обычным полем input[type=text]:

 select 4 id,
    	   'Some title ' title, 
		   '' tooltip, 
		   's1' Code,
		    '<input type="text" value="'+isnull((select top 1 Value from @filters where [Key] = 's1'), '')+'" />' defValue, 
		   'custom' typeCode,
		   '' as  commaValues,
		  isnull((select top 1 Value from @filters where [Key] = 's1'), '') commaSelected

Поле Code мы будем в дальнейшем использовать в JS для получения значения фильтра. 

В поле defValue может быть любая разметка + обязательно в ней необходимо надо учитывать текущее значение фильтра (из коллекции @filters). Если это какой-то JS плагин, то его можно иницализировать в globalJS в подобном стиле: 

$(function(){
    $('.cat-filter[data-code=s1] ....').somePlugin();
});

Прописываем в globalJS 2 JS коллбека:

  • getFilter - получить значение фильтра (когда жмем кнопку Искать - для фильтра типа custom будет вызываться данная JS процедура для получения его значения). 
  • resetFilter - сбросить значение фильтра (будет сбрасывать значение фильтра при нажатии на кропку Сбросить или Удалить тег). 

Как это выглядит для нашего примера с фильтром s1: 

$(function(){
  as.listcallbacks= as.listcallbacks || {};
  as.listcallbacks["s1_getFilter"] = function(filterCont){
    var res=  "";
    res = $("input", filterCont).val();  
    return res;
  }
  as.listcallbacks["s1_resetFilter"] = function(filterCont){
    $("input", filterCont).val('');      
  }
});

Примечание. Если нам необходимо выводить фильтры не в обычном порядке (через {filters} в разметке), то можем выводить их через {filter-s1}.  

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Выгода от использования Falcon Space

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Планируете делать веб-проект?
Сайт использует Cookie. Правила конфиденциальности OK