Отображение настроек для javascript сортировки

Очень сложная оказалась задача – дать пользователю возможность настраивать колонки таблицы не по Ctrl+click, а наглядно, как в оконных приложениях, выбором с помощью мышки. Весь моск вывернула наизнанку. И даже глюки «гнусного ИЕ» тут ни при чём, до них пока дело не дошло (может, в ИЕ пока что вовсе работать ничего не будет).

Начнём с типов данных. Под эту лавочку (что, мол, теперь всё будет наглядно) я оторвался на данных по максимуму, что и видно, если нажать в получившейся версии Simple Table Sorter v0.04 кнопку «Настроить», а потом один из выпадающих списков в любом столбце: str, ip, num, datru... Всё более-менее интуитивно понятно. А вот описание неочевидных типов:

1. undef – тип не определён (появляется само, если в атрибуте axis заголовочных ячеек ничего не указано); этот неопределённый тип сортируется по хитрому алгоритму: если значение начинается с цифр, то как число, иначе как строка.
2. none – явно указывает, что столбец сортировать не надо (на щелчки мышью столбец реагировать не будет).
3. formula – если значение начинается со знака равенства, оно считается математическим выражением и вычисляется (сортируется результат вычислений); иначе сортируется просто как число.
4. d_d – тип данных «число- разделитель – число». Специально для столбца Prices в примере.

Можно ещё добавить, например, тип dD (число – не число). Всё это теперь несложно, благодаря гигантской работе по «выравниванию» кода и алгоритмов. Из-за банальной визуализации пришлось всё перелопатить и привести в порядок. Ну, не в идеальный порядок, но на порядок ближе к идеалу (типа каламбур). Потому что иначе код стал бы просто неуправляемым из-за двух принципиально разных источников для настроек: от автора таблицы (настройки в заголовках ячеек и в самом скрипте) и от пользователя – настройки, сохраняемые в куки.

Один из элементов «приведения» – избавление от множественных условных операторов. Например, при работе с полями настроек, изначально было так:

А потом всё пришло к массиву names:

и к «глобальным» выражениям вида input.value = names[name][1]

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

Описание настроек (как всё работает)

Кнопка с надписью «Настроить» подрисовывается к левому верхнему углу таблицы. Кажется, удобнее было бы к правому верхнему, но таблица может быть широкой, и кнопка тогда не будет видна. При щелчке по кнопке настроек в верхней части каждого столбца таблицы появляются прямоугольнички, похожие на морды роботов.

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

Пример: если выбрать у столбца Profile число для очерёдности сортировки "2", а у столбца Radius очерёдность "1" и отметить флажок "Обратное направление", а потом не забыть нажать кнопку «Сохранить» (в которую превратилась кнопка «Настроить»), тогда при начальной загрузке страницы сначала будет отсортирован в нисходящем порядке столбец Radius, затем в нисходящем – Profile.

Что интересно, сочетание клавиш Ctrl+click по заголовку таблицы по-прежнему работает: оно устанавливает состояние таблицы «в нуль», без всякой сортировки столбцов в javascript.

При наведении мыши на кнопку «Настроить» (или «Сохранить»), под этой кнопкой появляется ещё одна – «Очистить». Имеется в виду очистка сохранённого состояния сортировки – все настройки, так заботливо выбранные пользователем и записанные в куки, удаляются, и остаётся только то, что было указано в HTML (в атрибутах axis заголовочных ячеек). А там можно указать тип данных и участие столбца в анализе содержания. Предопределённый столбец для начальной сортировки указать в axis теперь нельзя вообще, даже один (как было в версии 0.03).

Если вы передумали сохранять (или уничтожать) состояние сортировки, а выведенные на экран поля настроек мешают работать, избавиться от них можно банальным Escape.

Резюме

(Resume): ради чего было столько возни с рисованием на javascript? Проще ведь, кажется, сгенерировать HTML (поля ввода для настроек) на php. Ну, во-первых, не всегда проще (если это чужой фреймворк, замучаешься там искать, где подрисовывать такие сложные группы элементов). А главное, такие добавления на серверной стороне как угодно делают код более связанным.

А с нашим сортировщиком по-прежнему всё очень просто: добавил таблице class='sortable', добавил в HEAD подключения одного скрипта (sort0.03/tabsort004.js) и одного файла стилей (sort0.03/tabsort0.css) – и js сам подрисует всё необходимое для работы. Стал Сортировщик не нужен – удали ссылки из HEAD, и он тихо исчезнет.

Благодарности

Для работы с куки решил использовать чужие функции (признав тем самым, что мои собственные хуже :-)): для чтения куки – из библиотеки sorters/base.js (riim), для записи – из библиотеки CrossJS (kolyaj). Ну, и как всегда, спасибо AleXH за генерацию идей и тщательное тестирование результатов.