Таблицы. Стилизация фильтров таблицы

Для стилизации фильтров можно использовать параметр FilterOptions в SELECT 3. 

Он позволяет задать различные параметры у каждого фильтра отдельно (по коду поля фильтра). 

Пример настройки FilterOptions: 

SELECT '{
        "string1": {
        	"placeholder": "placeholder1",
            "maxlength": 25,
            "disabled": true,
            "title": "title1",
            "width": "500px",
            "cssClass": "d-block badge badge-info"
        },
        "radio1": {
	         "buttonSize": "xs",
                  "vertical": true
         },
        "switch1":{        	
        	"placeholder": "super long placeholder2",
            "title": "title2",
            "width": "500px", 
            "on":"Хорошо",
            "off": "Плохо",
            "onstyle":"primary",
            "offstyle":"danger",
            "switchWidth": "400px",
           "size": "mini"
        },
        "bool1":{        	
        	"hideLabel": false,
            "title": "title2"                 
        },
         "range1":{        	
        	"title": "title2",
            "source": [2,1000,10]          
        }
        
        }' FilterOptions

Каждое поле JSON - это объект с настройками поля фильтра по его коду. 

В примере заданы настройки для фильтров типа Строка, Переключатель, Галочка (наборы свойств чуть отличаются в зависимости от типа фильтра).

Основные свойства: 

  •  cssClass - CSS класс (по умолчанию для полей там стоит form-control)
  •  width - ширина поля (для switch это будет switchWidth)
  •  placeholder -  подсказка поля серым внутри поля
  •  title - подсказка при наведении 
  • source - массив для значений (например для intrange или для select).
  • для каждого типа данных могут быть свои настройки, которые описаны здесь (настройки поля формы options_xxx)

P.S. Управлять расположением фильтров можно через настройку FilterMakeup 

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

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

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

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