«KISS (keep it short and simple — «делай короче и проще») — процесс и принцип проектирования, при котором простота системы декларируется в качестве основной цели и/или ценности.» © Wikipedia
Введение
Именно так в последнее время я все больше склоняюсь трактовать аббревиатуру KISS и писать программные компоненты для различного рода продуктов. Именно по этому принципу написана предлагаемая в данном обзоре библиотека. И именно поэтому она будет развиваться в заданном ключе в будущем.
Скажу сразу, я никогда не работал как JS-программист. Все 15 лет своей карьеры занимался в большей степени серверной стороной. Что касается клиентской стороны, чаще отвечал за проектирование интерфейсов, а верстку доверял профессионалам.
Так случилось, что в 2012 году я перешел на новую работу и стал работать по двум крупным проектам. По иронии судьбы приходилось писать код как для серверов, так и для клиентов. Особенностью было то, что в обоих проектах клиентская часть должна была представлять собой тонкий клиент для отображения большого объёма разнородных табличных, цифровых, аналитических данных. Соответственно было рассмотрено большое количество различных библиотек и фреймворков по данной тематике. В данной статье упомяну только несколько из них: extJS, jqGrid, dhtmlx (который применялся как набор отельных плагинов, и в итоге разросся в то, что можно сегодня видеть) ну и еще десяток разных гридов.
И вот по прошествии 3 лет четко стала ощущаться (не только мной и не только в js а вообще в софте) избыточность продуктов, которые когда-то были маленькими и легкими. Со временем наблюдается разрастание проектов и превращение эффективных средств в неповоротливые комбайны. Они могут все, но цена за это – трафик и задержки в работе клиентской стороны. Теряются гибкость и простота использования.
В результате было принято решение, возникшее как идея «а не замутить ли свой грид с блэк-джеком …», разработать простой инструмент, который бы быстро выполнял требуемые задачи.
Задачи
- Сделать инструмент для отображения табличных данных
Требования:
- Простота использования
- Быстродействие
- Небольшой объем кода
- Нужен функционал, которым пользуются постоянно. Незачем делать продукт 90% возможностей которого никто в проекте не использует.
Данная идея по началу воспринималась как некоторая афера, в результате которой получился код tmsTable , который теперь постоянно использую в ряде проектов.
Функциональные возможности
- Асинхронная загрузка данных с сервера в формате json
- Отображение данных в виде таблицы
- Возможность отображения части пришедших данных
- Возможность пагинации и настройки количества строк на страницу
- Возможность дополнять запросы к серверу различными данными
- Возможность определять декораторы для ячеек и строк таблицы с целью обеспечения гибкости представления данных и реализации
- Возможность сортировок в таблице
- Возможность сокрытия шапки и подвала таблицы
- Возможность селектов и мультиселектов строк с применением click, CTRL и SHIFT
- Возможность обработки click и dblclick по строкам таблицы
- Возможность кастомизации отображения таблицы за счет применения своих стилей.
Как вы можете заметить, заявленный функционал прост до безобразия – этого я и добивался. Инструмент должен быть простым. В моем случае получившаяся библиотека полностью реализует весь набор функционала, который требуется в подавляющем большинстве случаев.
Кто-то может сказать, что у таблицы нет фильтров. Полностью согласен – их нет в привычном понимании. И не будет. Причина проста: написание фильтров – объемная задача (если хочется их сделать понятными и удобными), которая сильно усложнит код библиотеки. При этом, как правило, родные фильтры неспособны удовлетворить всех и вся. В результате появляются костыли и не сильно понятные интерфейсы, у которых часть фильтров в одном месте, а часть в другом. Вместо родных фильтров у вас в руках есть атрибут postVars, используя который для любых задач можно сделать набор инструментов для ограничения выборок данных. В моем понимании это гораздо удобнее, чем пытаться втиснуть свою логику в рамки некоторой сторонней библиотеки.
Как уже было сказано, с сервера тянутся данные в формате JSON. Отображать все или только часть данных вы решаете сами. В любой момент всегда можно получить доступ к объекту строки с полным набором данных.
Немного о коде
Для создания грида (в чистом виде без стилей и красоты) в коде странице требуется написать:
<link rel="stylesheet" href="css/tmsTable.css"> <script src="js/jquery-1.10.2.min.js" type="application/x-javascript"></script> <script src="js/tmsTable.js" type="application/x-javascript"></script> Если вы используете bootstrap, то скорее всего захотите использовать его стили, тогда вам стоит написать
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="bootstrap/dist/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="css/tmsTable.css"> <script src="js/jquery-1.10.2.min.js" type="application/x-javascript"></script> <script src="bootstrap/dist/js/bootstrap.min.js"></script> <script src="js/tmsTable.js" type="application/x-javascript"></script> Далее для создания таблицы на странице сайта нужно определить контейнер, который будет содержать табличку:
<div id="json_ttt"></div> Ну и собственно описать таблицу:
<script> json_params = { id: 'json_ttt' // контейнер таблицы , class: 'table table-bordered table-striped table-hover' // дополнительные css классы для красоты , col_names: ['id', 'title', 'date'] // наименование заголовков столбцов , dataType: 'jsonp' // тип данных , url: 'data.json' //адрес источника данных на сервере , order_direction: 'asc' //тип упорядочивания , order_by: 'title' // по какму столбцу упорядочивать данные , cols: [ {index: 'id', name: 'id', width: 100} , {index: 'title', name: 'title'} , {index: 'date', name: 'date', width: 100} ] , selectable: true // разрешаем выбирать строки таблицы , rowNum: 20 // количество строк на страницу по умолчанию , rowNums: [10, 20, 50] // возможные значения rowNum }; var json_tbl = new tmsTable(json_params) // инициализируем объект таблицы json_tbl.render(); // отрисовываем таблицу на странице </script> Все, перед вами представлены данные в удобном для восприятия виде.
Вы можете интегрировать данную табличку в сайт, cms, billing… Есть весь основной функционал. Остается только описывать фильтры для данных и поведение при click и dblclick.
Исходный код доступен на github.com/Tony-M/tmsTable
Там же доступны примеры использования.
Буду рад, если кому-либо библиотека окажется полезной.
ссылка на оригинал статьи http://habrahabr.ru/post/259795/
Добавить комментарий