Таблицы. Отображение таблиц на смартфоне
По умолчанию таблица в мобильном виде выводится в виде карточек, на которой слева показаны названия столбцов, а справа - значения колонок:
Если вы хотите убрать названия колонок и сделать так, чтобы значения показывались на всю ширину, то используем класс crd2MobCards в сниппете as-table
Пример:
<div class="as-table crd2MobCards" data-code="jb-tasks"></div>
Обновление Июнь 2024. В мобильном виде таблица может быть показана как панельки со скроллингом вправо (crd2MobCardsHorizontal).
Демостенд как это работает - https://demo.web-automation.ru/list/watch/smotr-tablicy-v-mobilnom-s-gorizontalnym-skrollingom---1150
Пример разметки:
<div class="as-table as-panel crd2MobCards crd2MobCardsHorizontal" data-slideout-ignore="1" data-code="table1"></div>
Атрибут data-slideout-ignore нужен для того, чтобы не вызывать на смартфоне вызов меню по swipe движению.
Классы crd2MobCards,crd2MobCardsHorizontal можно комбинировать.
Если в таблице есть подтаблицы, то в режиме crd2MobCardsHorizontal подтаблица будет открываться в элементе справа со своим внутренним горизонтальным скроллингом.
Примечание. Можно глобально установить такие карточки для всех таблиц. В as.systemOptions.js добавить настройку table.mobCardsHorizontal:
{
"table.mobCardsHorizontal": true
}
Google поиск по нашей документации
- Руководства
- Основа Falcon Space
- Основные компоненты
- Возможности
- Коммуникация с пользователем
- Дизайн, стилизация, юзабилити
- Лендинги
- Универсальный API
- Примеры интеграций
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты
- Продвижение, SEO
- Системные моменты
- Системное администрирование
- HOWTO
- Таблицы Таблицы. Как сделать сортировку в AS CRUD Таблицы. Как сделать Editable для галочки (Да/Нет) в AS CRUD Таблицы. Как редактировать колонку с датой Таблицы. Как связать 2 таблицы Таблицы. Как сделать таблицу в модальном окне (открывается в диалоговом окне) Таблицы. Как убрать показ количества строк результата в заголовке таблицы? Таблицы. Как связать таблицу и редактирование сущности (зависимая страница) Таблицы. Как использовать комментарии в таблицах Таблицы. Как добавить в фильтре значение Не выбрано со значением Таблицы. Как установить ширину колонки в таблице Таблицы. Как добавить диапазон даты или чисел (слайдер) в фильтр Таблицы. Как сделать операции только для некоторых строк Таблицы. Как делать различный набор столбцов одной таблицы для разных ролей Таблицы. Как реализовать подтаблицу (вложенная таблица), подформу в таблице Таблицы. Как скрыть строчные операции в таблице для определенных строк Таблицы. Как добавить коллбек после загрузки таблицы Таблицы. Отображение таблиц на смартфоне Таблицы. Как работать с галочками в таблице Таблицы. Частые ошибки при настройке таблицы (почему не работает таблица) Таблицы. Как обновить подтаблицу после выполнения некой операции Таблицы. Как обрабатывать групповые операции через модальную форму Таблицы. Как создать предустановленные фильтры для таблицы Как сделать сворачивание таблицы (collapse table) Таблицы. Загрузка таблицы по ссылке Как убрать старые dict процедуры в формах и таблицах Таблица. Как сделать фильтр с деревом галочек Таблицы. Как отключить сохранение состояния таблицы (фильтры) Таблицы. Как сделать ссылку на всю строку таблицы Таблицы. Как передать через URL значение фильтра Таблицы. Как сделать обрезание ячеек таблицы Таблица. Создание сущности с учетом значений фильтров Сортировка строк в таблице Оптимизация запроса SQL - извлечение данных для таблицы Кастомная разметка в таблице Таблицы. Как настроить дополнительные шапку и подвал у таблицы Таблица. Режим кастом вывода через JS (custom) Таблица. Как сделать зависимые фильтры в таблице Импорт данных в формате файлов txt, csv через таблицу Как гибко управлять видимостью столбцов таблицы Таблица. Как сделать раскрытие подстроки через любую ссылку Таблица. Режим быстрой фильтрации строк без обращения на сервер Выпадающая панель рядом с названием таблицы dropdownPanel Таблицы. Как убрать при загрузке установку фокуса ввода на фильтр (data-nofocus)? Как сделать аналитику по периодам (таблица с интервалами дат)
- Формы
- Загрузка файлов, картинок
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Выгода от использования Falcon Space
В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
- Шаг 1. Создать концепт проекта
- Шаг 2. Получить оценку бюджета (КП)
- Шаг 3. Заключить договор
- Шаг 4. Создать совместно техническое задание
- Шаг 5. Поэтапная реализация проекта