Обзор Droptables. Создание прайс листа в Joomla. Joomla 3 table jx
Table JX - простой способ отображения информации из ваших баз данных
Table JX является мощным инструментом для пользователей Joomla, которые хотят отразить таблицы баз данных на своих страницах. Данные компонент будет полезен в любых бизнес-решениях, которые осуществляют работу с большим количеством товаров и услуг, например 1С Ломбард. Table JX может быстро загрузить и показать данные в форме, с поддержкой функции сортировки и поиска данных непосредственно из Вашей статьи. Вы можете отображать данные от Oracle, Microsoft SQL, MySQL или MySQLi. Компонент построен таким образом что Вы можете настраивать вывод по конкретным столбцам таблицы, отображать разные данные столбцов или даже создать фильтр, чтобы показать только фильтрованные данные в окне. Организовано большое количество параметров поиска, которые, в свою очередь, могут легко настраиваться. Очень лекго Вы можете настроить вывод данных постранично, Вы можете быстро получить доступ к последней или первой странице в таблице. Сортировку данных в таблице можно осуществлять простыми щелчками мыши в заголовке столбца. Нет никаких ограничений на количество страниц в таблице. Очень легко показать сетку таблицы или саму таблицу в странице содержания. Вы просто нажимаете на кнопку редактора и выбранная Вами таблица выводится на экран. Table JX - очень полезный инструмент, если Вы хотите показать Вашим деловым партнерам в реальном времени на странице своего сайта joomla информацию из Вашей базы данных. Вы можете оградить Ваших бизнес-конкурентов от конкретной информации, при этом разрешить непосредственным бизнес-партнерам пользоваться ей.
В Table JX были приложены большие усилия, чтобы сделать его "дружественной поисковой системой". Эта функциональность позволяет, проиндексировать некоторые записи из таблицы в таких поисковых системах как Google, Yahoo, Bing, и т.д. Это может быть большой выгодой для Вашего бизнеса.
Связанное содержание позволяет Вам простым нажатием на значение в ячейке таблицы перейти по определенному адресу на статью, категорию или даже раздел товара.
Если Вы не знакомы с SQL, или у Вас просто нет времени, чтобы создать представление sql и загрузить его в Table JX, Вы можете в разделе администрирования несколькими кликами создать таблицу с данными по вашему желанию.
joomla3x.ru
Droptables - таблицы Joomla 3
Думаю, что многие владельцы сайтов сталкиваются с необходимостью представления данных на своём сайте в виде таблицы. В редакторе материалов Joomla есть различные инструменты, которые позволяют создать и оформить таблицу. Но этих средств может не хватать, если Вы хотите красиво оформить таблицу, дать возможность Вашим пользователям сортировать в ней данные по столбцам, адаптировать её под мобильные устройства, добавить график по значениям, красиво оформить прайс лист и др. Безусловно, всё это можно сделать при помощи HTML и CSS, но если Вы в достаточной мере не владеете данными языками, тогда Вам поможет Droptables.
В обзоре будет участвовать последняя на момент написания статьи (07.04.2015) русскоязычная версия Droptables 2.0.1 в Joomla 3.4.1 (редактор TinyMCE 4.1.7), шаблон сайта «Protostar».
Основные возможности
Рассмотрим основные возможности компонента таблицы Joomla.
- Создание и управление таблицами отдалённо напоминает редактор таблиц Excel.
- 6 встроенных тем оформления.
- Управление таблицами из любого редактора материалов.
- Автоматическое сохранение и отмена действий на основании AJAX.
- Возможность сортировки данных таблиц во фронтальной части сайта.
- Создание графиков на основании данных таблиц. 6 типов графиков (диаграмм) с настройками: гистограмма, круговой, кольцевой, лепестковый и так далее.
- Изменение размера столбцов и строк перетаскиванием мыши.
- Копирование ячеек при помощи перетаскивания.
- Копирование всей таблицы в одно нажатие.
- Редактор ячейки, столбца, строки (WYSIWYG) с возможностью изменения форматирования её содержимого, добавления изображений и ссылок.
- Импорт/экспорт данных Excel.
- Импорт из CSV,
- Возможность разделения таблиц на категории в Droptables для упрощения работы с ними.
- Управление таблицами Joomla 3 из административной и фронтальной части сайта.
- Возможность изменять стили границ.
- Возможность объединения, вставки\удаления строк и столбцов.
- Возможность редактирования CSS-кода оформления таблицы прямо в редакторе.
- Возможность вставки таблиц в модуль Joomla «HTML-код». Достаточно включить опцию Обрабатывать плагинами в модуле на вкладке Основные параметры.
- Тип отзывчивости, позволяющий отображать на маленьких экранах только наиболее приоритетные столбцы таблицы.
- Поддержка K2.
- Поддержка Joomlaх.
Также стоит отметить наличие документации и технической поддержки на английском языке. Сам компонент (по состоянию на 08.04.2015) доступен на русском, украинском, английском, французском, немецком и португальском языках. А также частично переведен на польский и испанский.
Красивые таблицы Joomla
Приведу примеры таблиц и графиков, которые сделаны при помощи Droptables.
DroptablesТаблицы Joomla 3Прайс лист JoomlaКрасивые таблицы JoomlaКрасивые таблицы Joomla (1)Красивые таблицы Joomla (2)«Живые» примеры данных таблиц и графиков можно посмотреть на демонстрационном сайте разработчика.
Таблицы Joomla 3
Доступ к компоненту таблиц Joomla можно получить прямо из редактора, нажав на кнопку Таблицы - Droptables (рисунок ниже).
Внутри редактора Вы видите серую область – это признак вставленной при помощи Droptables таблицы. По нажатию на кнопку Таблицы – Droptables появится редактор таблиц (рисунок ниже).
Компонент таблиц JoomlaВ его левой части расположены инструменты (рисунок ниже), которые позволяют упростить работу с таблицами, если у Вас их много. При помощи кнопки Новая категория можно создать категорию таблиц. По нажатию на Добавить новую таблицу можно будет ввести имя для новой таблицы в категории, а если подвести курсор к имени таблицы после её создания, то появятся три инструмента (слева направо):
- Удалить. Данный инструмент доступен и для категории таблиц Joomla.
- Копировать. Копирует таблицу внутри категории
- Переименовать. Данный инструмент доступен и для категории.
Средняя часть Droptables самая большая. В ней непосредственно создаётся таблица. Про графики поговорим немного ниже. Нажимая на кнопки с плюсами справа и снизу от основной области таблицы (рисунок ниже), можно добавлять столбцы и строки.
Создание таблицыПри нажатии правой кнопки мыши на ячейку появится контекстное меню (рисунок ниже).
- Insert row above. Вставить строку над выделенной ячейкой.
- Insert row below. Вставить строку под выделенной ячейкой.
- Insert column on the left. Вставить столбец слева от выделенной ячейки.
- Insert column on the right. Вставить столбец справа от выделенной ячейки.
- Remove row. Удалить строку, в которой находится выделенная ячейка.
- Remove column. Удалить столбец, в которой находится выделенная ячейка.
- Undo. Отменить предыдущее действие.
- Marge cells. Объединить выделенные ячейки (для этого необходимо выделить несколько ячеек).
Нажимая на заголовки столбцов (буквы) или на заголовки строк (цифры) можно выделить весь столбец или всю строку соответственно.
Контекстное меню ячейкиВычисления в таблицах Joomla 3 напоминают Excel. Доступны такие функции:
- SUM. Суммирует числа. Например: «=SUM(A1:A5)» (без кавычек, разделитель двоеточие) – просуммирует все числа в диапазоне от A1 до A5 выражение «=SUM(A1;A5)» (без кавычек, разделитель точка с запятой) просуммирует два числа (первое из ячейки «A1», а второе из «A5»). Разделитель «:» – указывает на диапазон от и до, а «;» на отдельные ячейки. В левой части на рисунке ниже показан пример ввода формулы, а в правой – результат расчётов.
- COUNT. Функция COUNT (счёт) подсчитывает количество ячеек, содержащих числа. Например, для вычисления количества чисел в диапазоне «A1:A20» можно ввести следующую формулу: «=COUNT(A1:A20)» (без кавычек). Если в данном примере пять ячеек из диапазона содержат числа, то результатом будет значение «5».
- CONCAT. Объединяет значения ячеек по «правилу»: слева направо, сверху вниз. Например: «=CONCAT(A1:B3)» даёт результат «82569» (рисунок ниже). Так как числа 8, 2, 5, 6, 9 стоят в указанном диапазоне и расположены слева направо, сверху вниз.
- MIN. Поиск минимального значения.
- MAX. Поиск максимального значения.
- AVG. Среднее арифметическое.
В правой части Droptables доступны такие вкладки:
- Таблица.
- Формат.
- Ещё.
Рассмотрим вкладку Таблица (рисунок ниже).
Таблица- №1 вставляет выбранную Вами таблицу из доступных стилей №2.
- №2 доступные стили таблиц. Обратите внимание, когда у Вас в области таблицы уже есть данные, применив к ним тему, они не заменятся демонстрационными, а если данных нет, то применятся демонстрационные с возможностью их редактирования.
- №3 Заливка нечётных строк. Цвет заливки нечётных строк таблицы Joomla 3 (рисунок ниже).
- №4 Заливка чётных строк. Цвет заливки чётных строк таблицы (рисунок ниже). При помощи этой опции и опции №3 можно создать «зебру». Добавляя строки и столбцы, они будут перекрашиваться в заданный Вами цвет.
- №5 Использовать таблицу с сортировкой. Если выбрать Да, пользователи во фронтальной части сайта смогут сортировать данные в таблице по столбцам.
- №6 Выравнивание. Выравнивание таблицы По центру, Слева, Справа или без выравнивания. Не путать с выравниванием содержимого ячеек таблицы
- №7 Тип отзывчивости. Если выбрано Прокрутка, будет появляться горизонтальная полоса прокрутки при нехватке ширины на странице для отображения таблицы. Это, например, весьма актуально для прайс листов в Joomla на маленьких экранах (мобильные устройства). Если выбрано Скрытие столбца, то на узких экранах будут автоматически скрыты лишние столбцы и во фронтальной части сайта появится специальный элемент управления рядом с таблицей (рисунок ниже). Нажав на этот элемент, перед пользователем появится список всех доступных столбцов. Он может сам выбрать, какие из них скрывать, а какие отображать. Также Вы сами можете указать приоритет отображения каждого столбца. Для этого служат опции Столбец и Приоритет отзывчивости на вкладке Ещё (рассмотрено ниже в данной статье).
Формат
Рассмотрим вкладку Формат (рисунок ниже). На данной вкладке компонент таблиц Joomla предоставляет ряд элементов для визуального оформления содержимого ячеек и их границ.
Формат- №1 Тип ячейки. Может быть По умолчанию – ввод значений или формул, а может быть Html. Если выбран второй вариант, при нажатии на ячейку откроется специальный редактор (рисунок ниже).
Он немного напоминает стандартный режим TinyMCE и позволяет вставить и отформатировать (задать начертание, отступы, выравнивание, стиль, гарнитуру, размер и цвет текста) внутри ячейки различное содержимое: текст, изображения, ссылки, нумерованные и маркированные списки. Также вставить фрагмент произвольного HTML кода (нажав на кнопку Source).
- №2 Цвет фона ячейки. Позволяет указать цвет заливки ячейки.
- №3 Границы. Droptables позволяет Вам указать внешний вид границы: Сплошные, Пунктирные, Штрихпунктирные, Без границы.
- №4 позволяет задать цвет границ таблицы Joomla 3.
- №5 позволяет задать толщину границ прайс листа Joomla.
- №6 - при помощи этой группы инструментов можно указать, к каким границам применять опции №3, 4 и 5. То есть, сперва Вы выделяете в таблице те ячейки, которым хотите задать границу, затем из №3 выбираете тип границы, в №4 задаёте её цвет, в №5 указываете её толщину, а потом нажимаете на один из инструментов в области №6 и применяете указанное в №3, 4 и 5 форматирование к тем «частям границы», которые отображены на инструментах №6. Например, нажав на левый верхний инструмент, Вы примените форматирование только к верхней границе ячейки.
- №7 Шрифт. Позволяет сменить гарнитуру шрифта содержимого ячеек\ячейки. Доступно девять шрифтов: Arial, Times New Roman, Verdana и др.
- №8 при помощи данного инструмента компонент таблиц Joomla позволяет Вам задать цвет текста содержимого ячейки.
- №9 размер текста (кегль).
- №10 инструменты для изменения начертания шрифта: жирный, подчёркнутый, курсив.
- №11 инструменты для изменения выравнивания содержимого ячейки по горизонтали и вертикали.
- №12 Высота строки в пикселях.
- №13 Ширина строки в пикселях.
Как видите, настроек достаточно много. Но это не все доступные в арсенале Droptables опции. Перейдём к рассмотрению вкладки Ещё.
Таблицы Excel и Joomla
Как уже упоминалось ранее, Droptables позволяет производить импорт\экспорт между Excel и Joomla 3. Для этого служат инструменты на вкладке Ещё (рисунок ниже).
Excel Joomla 3- №1 Импорт Excel. Позволяет импортировать таблицу из Excel в Joomla 3. Помимо XLS и XLSX поддерживается CSV и ODT (OpenDocument). Обратите внимание, что при импорте могут быть «искажения» (неточности). Всё зависит от сложности импортируемых данных. Также обратите внимание на то, что при импорте их Excel будут взяты данные только с первого листа файла.
- №2 Экспорт Excel. Позволяет экспортировать данные из Droptables в XLSX. Обратите внимание, что при экспорте могут быть «искажения» (неточности). Всё зависит от сложности экспортируемых данных.
- №3 Столбец. Если на вкладке Таблица для опции Тип отзывчивости выбрано Скрытие столбцы, тут можно указать, для какого столбца в таблице Вы задаёте приоритет из списка №4 Приоритет отзывчивости.
- №4 Приоритет отзывчивости. Указывает насколько важным является отображение того или иного столбца, выбранного в списке №3 Столбец. Где «0» – приоритет не задан вручную; «1» – наименее важный, «2, 3, …» – важность возрастает с увеличением порядкового номера; Persisent – необходимо обязательно показать данный столбец. Например, если у Вас есть прайс лист Joomla, где в столбце «A» – наименование товара, в «B» – артикул, в «C» – описание, в «D» – цена, и Вам нужно обязательно отобразить наименование товара и его стоимость даже на экране телефона, то для столбца «A» (наименование товара) нужно задать приоритет Persisent, для «D» (цена) – «4», для «C» (описание) – «3», а для «B» можно ничего не задавать. В таком случае, пользователь даже на очень маленьком экране увидит название и стоимость товара.Если будет место, появится и описание, а если места будет много, то увидит все столбцы.
- №5 Отступы. Droptables позволяет задать верхний, правый, нижний и левый отступы от содержимой ячейки до её границ.
- №6 Радиус скругления фона ячеек. Если Вы задавали фон ячейки, то при помощи данной группы опций Вы можете задать радиус скругления каждого из углов фона ячейки (рисунок ниже).
- №7 Настраиваемый CSS для этой таблицы. Вы можете добавить произвольный CSS-стиль к элементам таблицы.
Выяснить нужные классы стилей можно при помощи встроенных или сторонних средств для разработчиков в браузере. На рисунке ниже это Firebug 2.0.9 в Mozilla Firefox 37.0.1.
CSS-код«r» – строки, «c» – столбцы.
Графики
Вы можете дополнить свои таблицы Joomla 3 графиками (диаграммы). Для этого в левой области Droptables выберите таблицу, по которой необходимо построить график, выделите в ней диапазон ячеек, по которым необходимо строить график, и нажмите в верхней части кнопку Добавить новую таблицу. Перед Вами появится редактор графика (рисунок ниже).
ГрафикДоступны такие виды графиков (диаграмм) как (по аналогии с Excel): «С областями», «Гистограмма», «Заполненная лепестковая», «Полярные области», «Круговая», «Кольцевая» – на рисунке выше они расположены слева направо, сверху вниз.
- Переключить Строка/Столбец. При помощи данной опции компонент таблиц Joomla позволяет Вам выбрать, какие данные должны быть по оси Х, а какие по оси Y (элементы ряда и подписи оси соответственно). Доступно Строка или Столбец. В моём примере, если выбрать Строка, то по оси Х (подписи) будут месяцы, а по оси Y (сами столбцы) будут значения принятых отданных и потерянных пакетов данных. По три столбца на каждый месяц (Принято, Отдано, Потери).
- Использовать первую/первый строку/столбец в качестве заголовка. Если Вы выбрали Да, то под графиком появятся подписи из первой строки таблицы. В моём примере по оси Х (подписи) будут месяцы.
- Ширина, Высота. Ширина и высота области графика в пикселях.
- Выравнивание. Выравнивание области графика на странице (По центру, Справа, Слева, Нет).
- Набор данных. Содержит список столбцов\строк таблицы (в зависимости от параметра, выбранного для опции Переключить Строка/Столбец), по которым строится график. Выбрав один из них, можно задать ему цвет при помощи опции Цвет, расположенной ниже.
Русификатор Droptables
Скачать русификатор Droptables.
Как видите, Droptables весьма функциональный компонент таблиц Joomla 3 при помощи которого достаточно просто можно сделать функциональный и красивый прайс лист или любую другую таблицу.
Похожие материалы
Полезные ссылки:
aleksius.com
Responsive Pricing Table – функциональная таблица Joomla 3
Очень часто на сайтах, которые занимаются какими-либо услугами, можно встретить таблицы, четко разъясняющие, то конкретно предлагают на ресурсах и какую цену берут за свои услуги. Без сомнений, многим может понадобиться именно такая таблица, может даже и не одна, на собственном бизнес – проекте, но не всегда удается найти простой в управлении продукт. Но модуль Pricing Table предлагает возможность разработки прайс – таблиц и планов по предоставлению услуг, при этом являясь практически элементарным в управлении средством. Теперь каждый может сказать, что в Joomla создание таблиц организовывается куда проще, чем у всех остальных. Помимо того, что настройке поддаются поля с информацией, здесь имеется еще очень много мелких и очень даже полезных функций, и они точно смогут сделать любую таблицу заметной.
Два этапа настройки и результат
После установки нужно сразу же отправляться в менеджер модулей, где и начнется вся основная работа. Первым делом нужно будет определиться с внешним видом того, чем будет наполняться сама таблица. Изначально требует выбрать шрифт, а уже потом определяться с тем, какой будет фон у таблицы, цвет у текста в таблице, у надписей на кнопках и прочем. Как видите, подтянуть дизайн объекта можно будет в точности к вашему ресурсу. А вот второй этап уже станет более важным именно для указания самих услуг и прочей информации. Необходимо знать то, что таблица Joomla 3 может иметь несколько информационных полей. Первым делом обозначается само имя плана, о котором идет речь.
«В последующих полях вы обозначаете цену, которую желаете получить за услугу, и обязательно прописываете за какой именно период, берется плата, это можно сделать в поле «Pricing term». Не менее важно расписать особенности предоставляемых услуг, например если это хостинг, то описываем объем выделяемой памяти и прочие мелочи. А на завершающем этапе, всего-то придется подписать кнопку, переводящую клиента к оформлению заказа, после, указав в последнем поле, выводим ссылку для вышеуказанной кнопки – все».
Распространяем услуги на видных местах
Очень удобно, что этот модуль таблиц Joomla 3 дает возможность размещать таблицы в удобных для вас местах. Четкая структура и довольно неплохие настройки, дадут шанс даже неопытному пользователю быстро создать нужный блок, где все четко описано. Кстати, указание дополнительной информации о планах, лишит вас ненужной работы по разъяснению разных мелочей.
joomru.com
