«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
Там же доступны примеры использования.

Буду рад, если кому-либо библиотека окажется полезной.