Elettracompany.com

Компьютерный справочник
20 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Таблица в javascript

Tabulator.js — строим интерактивную html-таблицу за 10 минут

Однажды на работе коллега-бекендщик подошел с вопросом. Есть get-запрос, который отдает json с массивом данных. Нужно по ним построить таблицу в браузере. Проект личный, таблица для внутреннего использования, красоты особой не нужно. Главное сделать минимальными усилиями.

Как бы поступил я, обычный jquery-программист? Получил бы данные через $.get, распарсил, прогнал массив через шаблонизатор, добавил стили. Работы на пару часов. Если нужна еще сортировка, пагинация и фильтрация, то больше.

Коллега поступил гораздо мудрее и загуглил готовые решения. ЗАГУГЛИЛ. Да, так можно было. И показал результат.

Отрисована симпатичная таблица с данными, с сортировкой и фильтрацией. В 20 строк кода. Всю эту красоту делает библиотека tabulator.js. Я был впечатлен. Сам виджеты опросов и рейтингов делаю, а тут такая вещь очевидная. Не приходило в голову, что для построения таблиц наверняка есть готовые решения. Но это урок на будущее, а пока я об этом узнал и расскажу подробнее вам.

Итак, библиотека tabulator. Вот сайт — tabulator.info. Сайт по не-русски, но мышайтишники, разберемся. А если вам разбираться лениво, да и букв там много, то покажу на примере и картинках, как библиотека работает. Пойдем по тому же пути, что проделал коллега.

Есть у меня одна апишечка. Отдает json с массивом популярных статей в блоге. Хочу этот список показать. Для начала вот сама апишечка — https://cp.simpple.ru/api/v1/widgets/ratings/753bf174295992b3ca2d0bd4a78d6598/popular&limit=8. Откройте в браузере, убедитесь, что работает. Видите, там 4 поля: айдишник, заголовок статьи, количество проголосовавших и средняя оценка. Отобразим эту информацию в браузере.

Базовая таблица

Для начала подключим на странице одну css и две js, в том числе jquery — tabulator без нее не работает.

Можно скачать исходники с сайта либы, я же подключал с cdn, чтобы лишний раз файлы не таскать.

Затем в html поставим пустой див, где и отрисуем таблицу

И еще один js-файлик, где зададим настройки табулятора.

В файлике tabulator.js сначала пишем заготовку

В табуляторе можно напрямую указать url, куда сама либа будет ходить аяксом. Но у меня это не сработало, либа заругалась на кроссдоменные запросы. Поэтому пришлось добавить прослойку в виде $.get. Но не суть. Самое интересное внутри. Для инициализации беру код из доки. Только названия полей ставлю нужные

Настройки колонок понятные: заголовок, название поля field (совпадает с полем в json-массиве), ширина и выравнивание. И formatter — классная штука, вариантов форматирования много, я взял progress как в доке. Обновляем страницу и видим это Красота! 10 строчек кода и море удовольствия: и таблица, и сортировки, и даже симпатичный прогрессбар. Без усилий мы сделали таблицу, которую врукопашную кодили бы пару часов.

Добавляем ссылки

Разбираемся дальше. Я хочу не просто показать заголовки статей, а дать ссылки на них. Настройка formatter может быть не только текстом или прогрессбаром. Но также и функцией, которая возвращает любые строки. Добавим в нашу таблицу новое скрытое поле id, а в существующем title напишем функцию formatter

Зачем лишнее поле id? Оно используется для формирования ссылки в другой колонке таблицы. Поэтому приходится id добавить, чтобы потом вытащить из объекта data = cell.getData(). Уберем колонку — и из data поле id пропадет. Обновляем страницу и смотрим на ссылки.

Идем дальше. А не добавить ли в таблицу пагинацию?

Пагинация

Это очень просто. В настройках сразу после layout: ‘fitColumns’ добавим еще 2 пункта.

И в апишном запросе изменим limit=8 на 30. Чтобы получить больше данных и сделать пагинацию интереснее. Вот что получилось Чувствуете, как круто? Реализовывать пагинацию собственными лапками то еще удовольствие. Вот здесь мы уже делали Постраничная навигация по товарам в интернет-магазине. А в табуляторе это 2 строки.

Дальше вообще идет магия.

Дизайн

Таблицу можно как угодно стилизовать. А можно не как угодно, а по-бутстраповски. Для этого подключим еще один файлик со стилями

Смотрим Уже гораздо круче. Bootstrap4, все дела. И пагинация приличнее стала. Такой вариант уже не то что в админке держать, а и людям не стыдно показать.

И последнее, что сегодня замутим. Добавим кастомную колонку «Рейтинг статьи». По скриншотам Вы видели, что статьи сортируются по количеству голосов и средней оценке. Но статья, которой 3 человека поставили пятерку, ценнее статьи, которой четверо поставили трояк, согласны? 3 * 5 > 4 * 3. Арифметика. Поэтому введем самую полезную колонку таблицы Рейтинг = Количество голосов * Средняя оценка

Как работает formatter, мы уже знаем. Появилась еще новая функция sorter. Выглядит диковато, но на первый взгляд. Берем два сравниваемых значения (value = count * rating) и возвращаем их разницу. Кастомные сортировки работают по такому принципу, углубляться не будем.

Напоследок добавим еще пару штрихов:
1. tooltip: true в колонке с прогрессбаром. Чтобы при ховере показалось число голосов
2. initialSort: [< column: 'rating', dir: 'desc' >] — сразу после настроек пагинации, чтобы таблица по дефолту сортировалась по убыванию рейтинга. Сверху самые классные статьи.
И итоговый скрин

Живой пример

А теперь на фиг картинки, посмотрим, что получилось уже в действии. Там не скриншоты, все кликается, сортируется, ссылки активны.

В таблице не левые числа. Это реальный показатель популярности статей, основанный на оценках читателей. Перейдите в любую статью из таблицы, оцените ее (в конце поста блок со звездочками) и обновите демо-страницу. Количество голосов и рейтинг изменятся. Средняя оценка может остаться такой же, если Ваша оценка совпадает со средней.

Мне эта табличка нравится. Конечно, и раньше смотрел, как читатели ставят оценки, но такой наглядной картины не было. Думаю, буду использовать такие таблички чаще.

И это еще я только чуточку библиотечку тронул. А там ведь есть и фильтры, и разные варианты форматирования. Колбеки и обмен данными с сервером. Можно даже добавлять новые строки в таблице и отправлять их бекенду, чтобы записать в базу. Красота.

Заключение

Куда такую таблицу можно прикрутить? Да навскидку:

1. Посещаемость статей
2. Список заказов в админке интернет-магазина
3. Список товаров в админке.
4. Логи или список событий. Здесь нужно будет запариться с серверной пагинацией, не все ж данные на клиент сразу тащить. Но это проще, чем целиком делать руками.
5. Здесь будет ваша фантазия

Читать еще:  Serversocket accept java

Динамическая работа с таблицами

Часто при использовании html таблиц с помощью JavaScript можно избежать лишних перезагрузок страницы, улучшить юзабилити и упростить работу пользователей.
Под динамической работой понимается:

  1. создание;
  2. управление атрибутами;
  3. добавление/удаление столбцов и строк;
  4. перемещение строк;
  5. заполнение ячеек

1. создание таблицы

Для того, чтобы создать новую таблицу на странице нужно сгенерировать элемент TABLE (createElement()) и добавить его в иерархическую структуру документа с помощью метода appendChild():

2. управление атрибутами

Есть два способа присвоения атрибутов элементу: использование метода setAttribute()

и прямое обращение к свойствам объекта

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

3. добавление/удаление столбцов и строк и 4. перемещение строк

Для вставки строк используется метод insertRow(), ячеек — insertCell():

Для удаления строк используется метод deleteRow(), по своей конструкции аналогичный методу insertRow(), ячейки — deleteCell(). Для перемещения строк существует функция moveRow(индекс_источника, индекс_приёмника), но она пока работает только в IE (по крайней мере мне не удалось заставить ее работать в других браузерах). Про кроссбраузерную функцию перемещения строк см. сортировка html таблицы средствами JavaScript.

Следующий пример работает только в IE:

5. заполнение ячеек

Заполнение ячеек возможно с помощью свойств innerHTML и innerTEXT (их отличия, думаю, понятны из названия):

дополнительно

Как перебрать в цикле все таблицы на странице:

Как перебрать в цикле все ячейки таблицы:

как закрасить строки таблицы через одну:

Спасибо, очень помогло! И про рекламу незабыл!

Эмм…я мож мало еще че погимаю, но я знаю только функцию getElementById, а не getElementSById, без с все прекрасно работает =)

Эмм…я мож мало еще че погимаю, но я знаю только функцию getElementById, а не getElementSById, без с все прекрасно работает =)

Мде
А в файрфоксе moveRow не работает

хуйня этот файрфокс

Почему то не работает setAttribute(«bgcolor»,»#ff0000) для ячеек таблицы TD, созданных с помощью createElement(‘TD’) в Internet Explorer, вообще не могу никак там цвет сделать в таблице…. ( ФФ и ОПера все номрально.

Спасибо за сайт! Очень помог разобраться с форматированием таблиц. Незнаю, ошибка ли это, но вот тут ‘s’ в середине кода лишняя: var t = document.getElementsById(‘t1’); и еще, не разобравшись с: rows[i].className = «odd»; я выбрал способ: rows[i].style.background=»#DDDDFF»;

добрый день,у меня есть форма хтмл, при заполнении которой,после нажатия кнопки, данные идут в базу, а из базы информация поступает в таблицу хтмл, которая расположена ниже этой формы.А мне надо чтобы информация обновлялась динамически по ходу внесения данных в форму, т е еще до нажатия кнопки, подскажите пожалуйста, может мне надо связать таблицу с формой напрямую(не через базу) или может есть какой то другой способ? и стоит ли мне переписать все вычисления с пхп на яваскрипт(для вызова onkeyup)? заранее спасибо!

JS Charting: Таблицы Google

В этой статье, мы возьмем данные из таблиц Google ( в формате JSON ) и создадим консоль диаграмм с использованием библиотеки JS Charting . Результаты будут обновляться, и выводиться в режиме реального времени.

Мы будем использовать эту таблицу ( рисунок 1 ):


Чтобы создать такую панель ( рисунок 2 ):

Настройка таблицы

При обработке данных таблицы лучше получать доступ к столбцам по их заголовкам. Чтобы настроить строку заголовка, необходимо зафиксировать ее на странице таблицы. Нажмите кнопку Вид > Закрепить > 1 строку , чтобы создать строку заголовка. Это также можно сделать для столбцов, но в нашем случае мы зафиксируем только строку, которая написана жирным шрифтом на рисунке 1.

Следующим шагом является публикация таблицы в интернете, чтобы она была доступна через браузер. При открытой таблице выберите из меню Google Docs : Файл> Опубликовать в Интернете .

Будет сгенерирована ссылка, в нашем случае:

Затем нажмите кнопку « Опубликовать ».

Извлечение исходных данных

Теперь, когда наша таблица доступна в интернете, мы будем использовать функцию JQuery getJSON для извлечения данных в формате JSON . Следующий специальным образом отформатированный URL-адрес требуется для получения JSON :

Обратите внимание на выделенную часть URL-адреса , которая берется из всплывающего окна « Опубликовать в Интернете » в предыдущем шаге.

Ниже приводится код для получения этих данных с помощью JQuery :

Эта строка просто получает доступ к JSON и записывает его в консоль браузера, но мы должны структурировать и обработать эти данные.

Разбор данных

Структура необработанных данных JSON выглядит следующим образом:


Каждая запись представляет собой строку в таблице. Вот пример строки данных:


Обратите внимание, что только ячейки, содержащие данные, включаются в свойство $t .

Следующий код разбивает данные электронной таблицы на серию точек и принимает два параметра: данные и имя столбца, представляющие значения оси Х , которые являются общими для всех точек данных:

Этот код работает путем передачи каждой записи с именем серии точек и значениями Х и Y в функцию addPointToSeries() . Если серия с таким именем не существует, создается новая серия, иначе точка добавляется в серию. После записи обрабатываются, и возвращается массив серий.

Примечание: При обработке содержимого свойства $t значения должны разделяться запятой с пробелом после нее ( «, « ). Заголовки столбцов должны разделяться двоеточием с пробелом после него ( «: « ). Такой синтаксис применяется из-за того, что формат некоторых числовых значений предусматривает использование в числах запятой, например, $1,120.00. А значения даты и времени — двоеточие. При обработке этих данных могут возникнуть проблемы, если не следовать корректному формату.

Создание консоли диаграммы

Теперь мы займемся визуализацией этих данных. JQuery у нас уже подключен, поэтому, чтобы начать работу, нам нужно добавить только скрипт диаграмм:

Далее, добавляем элемент DIV к самой диаграмме:

И код для построения диаграммы на основе данных, которые мы имеем на данный момент:

Теперь, когда диаграмма построена, мы добавим настройки для нее, а также несколько полезных функций, предлагаемых JSCharting .

Настройки оси Y для описания значений, представленных в этой диаграмме:

Примечание: Обратите внимание, что этот блок параметров является объектом для свойства уAxis , тогда как в предыдущем примере для определения аналогичных опций использовалось одно свойство. Это стало возможно благодаря тому, что JSCharting options API позволяет объединять иерархические имена свойств в один параметр свойства.

Читать еще:  Integer valueof java

Здесь мы форматируем значения данных оси Y по формату валюты и устанавливаем метку оси Y . Описание данных будет распространяться на все части диаграммы, которые используют значения оси Y . Например, всякий раз, когда значение оси Y упоминается в подсказке, оно автоматически будет выводиться в формате валюты. Назначение для оси метки также поможет автоматически создавать подсказки описания точек данных.

Далее с помощью следующего кода мы указываем название для этой диаграммы:

Обратите внимание, что маркер %sum включен в текст заголовка. Существует много маркеров, которые могут быть использованы в названии диаграммы. Подробно все эти маркеры описаны в разделе наборов серий в этом руководстве по маркерам .

Обратите внимание, что сумма принимает денежный формат, так как она связана со значениями оси Y .

Далее изменим метки описаний, чтобы вывести суммы для каждой серии:

Следующая диаграмма, которую мы создадим, будет основываться на вычислениях данных первой диаграммы, и будет выводить среднемесячный доход для каждого блока гистограммы. Для второй диаграммы в нашей консоли мы добавляем в HTML еще один элемент DIV :

Чтобы обеспечить взаимодействие с данными первой диаграммы и их использование в расчетах, код для диаграммы средних значений мы помещаем внутри функции обратного вызова инициализации первой диаграммы:

Эта диаграмма будет содержать только одну серию с блоками, представляющими среднемесячный доход для каждой серии данных первой диаграммы. Для этого данные серии основной диаграммы объединяются, и создается новая точка, значение которой по оси Y равно сумме значений серии, разделенной на 12 месяцев.

Указав палитру для этой серии, каждый блок будет иметь цвет, который соответствует цвету серии на основной диаграмме.

И в конце мы создадим круговую диаграмму, которая с помощью исходных данных будет отображать процентное соотношение каждого блока в общей сумме дохода. Наш текущий график может быть преобразован в круговую диаграмму с помощью добавления свойства type:’pie’ .

Вы можете просмотреть полный список типов диаграмм JS Charting вместе с примерами для каждого и поэкспериментировать с другими типами диаграмм. Этот параметр задает соответствие каждого сегмента диаграммы определенной серии данных. Если нам нужно вывести отдельно круговую диаграмму для каждой серии данных, то следует использовать параметр defaultSeriesType:’pie .

Обратите внимание, что мы указываем формат оси Y string , хотя на самом деле круговая диаграмма не имеет осей. Потому что параметры оси Y , на самом деле, описывают значения, а не саму ось.

Текст меток по умолчанию также указывается для круговой диаграммы с помощью следующего кода:

Мы используем маркеры, но на этот раз это набор маркеров точек.

Справка по таблицам JS Charting

Стоит упомянуть об интересной функции JS Charting , которая в может оказаться полезной. В приведенной выше таблице мы используем временную шкалу для оси х , так что порядок и положение каждой точки данных определяется самим значением. В некоторых случаях, например, для аббревиатур месяцев, значения оси Х — это названия или любые произвольные строки.

Поскольку некоторые из этих строк не могут быть обработаны по дате или другим значениям, которые указывают положение вдоль оси х , порядок сортировки точек может быть не корректным. Это актуально, когда у нас в таблице есть пустые ячейки и начальные значения первой серии отсутствуют. Вы ожидаете, что сначала будет обрабатываться серия данных, чтобы определить начальные значения оси х .

Тогда любые новые значения оси х , встречающиеся в последующих сериях, будут размещены на конце оси х . JS Charting автоматически анализирует порядок всех точек серии, чтобы определить, какой должен быть полный порядок, даже если в сериях отсутствуют данные для некоторых позиций. На приведенной ниже диаграмме можно увидеть пример этого:

Здесь мы присваиваем значения дат в качестве названий точек, и удаляем параметр шкалы времени оси Х . В результате диаграмма выглядит так же, как и при использовании шкалы времени и временных значений.

Заключение

Таблицы Google предлагают ряд уникальных возможностей для хранения данных в облаке, а также позволяют извлекать их для использования в любых веб-приложениях. Также у нас есть возможность динамически обновлять эти таблицы, создавая, таким образом, облачные хранилища баз данных. JSCharting позволяет с помощью маркеров, меток и других функций визуализировать эти данные и создавать функциональные и информативные диаграммы с помощью небольшого кода.

Существует много типов диаграмм, в том числе доступных в комплекте продукта. Вы также можете бесплатно загрузить полный набор типов диаграмм и функций и поэкспериментировать с ними. Документация JSCharting описывает декларативный API и является довольно исчерпывающей.

Данная публикация представляет собой перевод статьи « JS Charting Google Sheets » , подготовленной дружной командой проекта Интернет-технологии.ру

Динамическая таблица JavaScript

Помогите пожалуйста сделать динамическую таблицу с помощью JavaScript(можно так же использовать jQuery) и HTML.Возможно кто-то может посоветовать видео-урок или литературу.

С просьбами сделать домашку иди на Мэйлру

или в гугл с запросом «jquery table sort»

и это правильный совет

Не страдай хернёй jQuery в 2019 году это позор. Возьми что-то из нормального и строчи себе компоненты.

ага, щас начинающий верстальщик без базовых знаний даже jquery бросит всё и пойдет делать на vue. Пусть хоть на jquery что-то кое-как сделает, а уже потом на сложные штуки перейдет

HTML+CSS / JavaScript+React 2 курса бесплатно

Решил внести свою лепту.

2 современных, свежих, честно купленных курса (на канале ссылки на Google Drive).

Нерешенные проблемы человечества

Первый опыт

Интернет, который мы заслужили

Сижу давеча, листаю новостную ленту Яндекса. Взгляд привлекла одна интересная статья. Перехожу на сайт статьи и.. словно попадаю в начало 2000-х, когда «сёрфил» интернет на своем 56 Кбитном ZyXel’е.. иконка загрузки крутилась, пожалуй, с полминуты, а баннер рекламы в правой колонке плавно заполнял пустое пространство.

– Интернет так тупит? – подумал я. Но вроде все ок, другие сайты грузятся адекватно.

Проблема быстро была найдена, когда я зашел по f12 в логи загрузки ресурсов.

– circus.jpg 14308 Кб – пожаловался мне браузер.

14 метров (Карл!) на баннер сбоку, чьи размеры составляют 278 x 417 пикселей. Если пережать баннер с конечными размерами в 90% JPEG, то выйдет всего 151 Кб – без малого в 95 раз меньше!

Читать еще:  Integer parseint java

Десяток лет назад, когда мы занимались разработкой сайтов, во времена, когда у подавляющего числа пользователей не было скоростного интернета, мы бились за каждый килобайт. Олдскул разработчики не дадут соврать. И тогда имело значение, чем быстрее загрузится сайт, тем больше вероятность, что пользователь останется на нем, а не закроет вкладку.. а больше траффик пользователей – больше потенциальная прибыль при той же конверсии.

Думаю подобные принципы остались и сейчас, но все чаще разработчики кладут на это болт:

– Зачем делать превьюшку? И так сойдет, вставим 14 метровый оригинал!

У сайта кстати есть мобильная версия. И знаете чем она отличается от обычной десктопной?

А ничем она не отличается от слова совсем, просто появляется бесконечный скролл с автоматической подгрузкой статей. Лол.

JavaScript UI виджет DataTable

DataTable (или DataGrid) — это мощный JavaScript виджет для табличных данных, разработанный с инновационным подходом к разработке веб-компонентов для больших данных.

Откройте эту страницу на ПК или планшете, чтобы просмотреть демо

  • Интеграция: jQuery, Angular, React, Vue.js, Backbone
  • Примеры интеграции с PHP, Node.js и .NET
  • Поддержка всех современных браузеров
  • Работает на устройствах с сенсорным экраном
  • Соответствует требованиям Секции 508
  • Удобная стилизация с помощью CSS

Редактируйте данные

JavaScript таблица позволяет легко вводить новые данные. По щелчку на любую ячейку, вы можете легко редактировать ее содержимое с помощью ввода нового значения в поле или выбрав значение из выпадающего списка.

Сортируйте данные

Все строки таблицы можно сортировать в один щелчок по заголовку колонки. Вы можете использовать функцию сортировки DataTable, чтобы определить свой собственный критерий для упорядочивания данных.

Фильтруйте данные

Строки таблицы можно отфильтровать с помощью встроенных фильтров, помещаемых в заголовки колонок. Вы можете использовать функцию фильтрации DataTable, чтобы задать свои критерии для поиска данных.

Валидация

JavaScript Table позволяет вам проверять вводимые данные. Используя валидацию, вы можете проверить, соответствуют ли значения конкретных ячеек таблицы заданным правилам. Если нет, строка с неправильными данными будет подсвечена и пользователь получит уведомление об этом.

Пейджинг

Если вы планируете загружать в DataTable большие данные, можно разбить таблицу на несколько страниц. Легко настраиваемые кнопки с номерами страниц и стрелками помогают с легкостью переходить между страницами.

Сохраняйте текущее состояние Data Table

Благодаря этому свойству, вы сможете хранить состояние DataTable в cookie-файлах, локальном или сессионном хранилище и затем восстанавливать его после обновления страницы. Информация обо всех действиях над данными в виджете будет сохраняться, благодаря чему пользователи не потеряют текущее состояние DataTable.

Drag-n-drop строк

Вы можете изменить порядок строк, перетаскивая их. Режим ‘order’ определяет возможность менять порядок строк в пределах одной таблицы. Если у вас на странице две таблицы, вы можете перетаскивать строки из одной таблицы в другую, в то время как номера строк первой таблицы изменятся соответственно. Дополнительная настройка позволит вам запретить перетаскивание отдельных строк, перетаскивание любых строк в определенные позиции в таблице и т.д.

Drag-n-drop колонок

Вы можете разрешить перетаскивание колонок в JavaScript таблице. В режиме ‘order’ вы сможете менять порядок строк в пределах одной таблицы.

Работа с буфером обмена

Вы можете копировать данные из этого виджета в буфер обмена и вставлять их в другие виджеты или HTML-контейнеры. Работа с буфером обмена поддерживается во всех современных браузерах, включая Firefox, Opera, Chrome и Safari. Кроме того, вы можете копировать данные из DataTable в Excel-документ.

Изменяйте размеры колонок и строк

Вы можете изменять размеры колонок и строк, перетаскивая вертикальные или горизонтальные границы ячеек.

Фиксируйте строки и колонки

Вы можете создать DataTable с фиксированными колонками и строками, которые не будут перемещаться при прокрутке.

TreeTable

Разновидность виджета DataTable может отображать древовидные структуры данных подобно компоненту Tree. Виджет TreeTable позволяет создавать неограниченное число поддеревьев. Вы можете фильтровать данные в таких структурах по всему дереву или на конкретном уровне.

Выделение блоков ячеек

Кроме выделения ячейки, строки и колонки, вы можете выделять блоки ячеек. Кликните по первой ячейке из нужной вам области и протащите зажатый курсор дальше. Вы также можете использовать клавишу Shift чтобы выделить дополнительные ячейки.

Дополнительные редакторы в Data Table

Вы можете добавлять более сложные редакторы для изменения данных в JavaScript Table: Multi-select, Grid Editor и DataView Editor. Редактор Multi-select позволяет выбирать несколько опций из списка, редактор Grid и DataView выводят доступные опции внутри виджетов DataTable и DataView соответственно.

Дополнительные фильтры

С помощью функции фильтрации DataTable вы можете изменять содержимое таблицы, выбирая нужные значения из выпадающего списка (фильтры rich-select, multi-select) или выбирая даты во встроенном календаре.

Rowspan и colspan

Благодаря возможности объединять ячейки по горизонтали и вертикали, вы можете отображать сложные данные как в любой HTML таблице.

Меню заголовка таблицы

С помощью меню вы можете выбирать, какие колонки таблицы показывать.

Группировка колонок

Благодаря этому свойству пользователи Webix могут разворачивать или сворачивать колонки таблицы в один клик. Вы сами можете определять, какие колонки группировать и затем настраивать группировку.

Вертикальные заголовки

Вы можете размещать текст заголовков не только горизонтально, но и вертикально. Поворот текста в заголовке поможет вам сэкономить пространство в Data Table для другой информации.

Sparkline

Sparklines — это небольшие диаграммы, которые вы можете вставить в ячейки JavaScript Table. Доступны несколько видов Sparkline: линейная, двумерная, столбчатая диаграммы, Сплайн-диаграмма, Сплайн-диаграмма с областями и круговая диаграмма. Вы также можете добавить всплывающие подсказки (tooltip), которые появятся на экране, когда пользователь наведет курсор на диаграмму. Вы можете изменить цвета Sparklines. Кроме DataTable, Sparklines можно добавлять в другие виджеты, например, в List.

Вложенные строки и виджеты

В DataTable можно добавить вложенные строки и встроить другие виджеты. Они будут отображаться под каждой строкой таблицы. Содержимое вложенной строки можно задать с помощью template, а встроенным виджетом может быть любой Webix виджет. Вы можете сворачивать/разворачивать вложенные строки и виджеты по щелчку на иконку соответствующей строки таблицы.

Ссылка на основную публикацию
ВсеИнструменты 220 Вольт
Adblock
detector