Сортировка таблиц – очень часто встречающаяся задача при построении пользовательских интерфейсов. Давайте посмотрим как легко и просто решается задача сортировки таблиц на стороне клиента с помощью библиотеки jQuery.
Испытайте этот небольшой пример, а затем мы разберем как это сделано.
Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.
В раздел HEAD понадобится подключить всего два файла: библиотеку jQuery – jquery-1.2.1.js и файл ui.tablesorter.js
В исходном коде примера Вы сможете посмотреть стилевую таблицу, отвечающую за отображение календаря и при необходимости отредактировать ее под свой дизайн. Эта часть кода выделена комментариями /* Стили для таблицы */.
HTML-код не представляет собой ничего интересного – это обычная таблица. Обращу внимание разве что на необходимость использования тэгов thead и tbody.
И наконец приведу очень простой код, который будет вызывать UI Tablesorter:
Таблица с идентификатором #example будет сортируемой. Большинство опций сортировки задано по умолчанию в самом файле ui.tablesorter.js, но мы легко можем их переопределить.
widgets: ["zebra"] – используем «фирменный» виджет, чтобы чередовать цвет строк в таблице.
sortList:[[1,0]] – задаем сортировку по умолчанию (при загрузке). В этом примере – сортировка второго столбца по возрастанию (первая цифра – порядковый номер столбца, вторая порядок сортировки, где 0 – по возрастанию, 1 – по убыванию). Здесь можно задавать сортировку и по нескольким столбцам сразу. Например: sortList:[[1,0], [0,1]] – сначала второй столбец сортируется по возрастанию, а затем первый – по убыванию…
widgets: ["zebra"] – используем «фирменный» виджет, чтобы чередовать цвет строк в таблице.
sortList:[[1,0]] – задаем сортировку по умолчанию (при загрузке). В этом примере – сортировка второго столбца по возрастанию (первая цифра – порядковый номер столбца, вторая порядок сортировки, где 0 – по возрастанию, 1 – по убыванию). Здесь можно задавать сортировку и по нескольким столбцам сразу. Например: sortList:[[1,0], [0,1]] – сначала второй столбец сортируется по возрастанию, а затем первый – по убыванию…
Приведу еще пару полезных опций.
sortMultisortKey – по умолчанию задано значение shiftKey, т.е. щелкая мышью по заголовку столбца при нажатой клавише Shift можно выполнять сортировку по нескольким столбцам. Естественно клавишу можно переопределить. Например так: sortMultiSortKey: «ctrlKey». Теперь можно работать через клавишу Ctrl.
headers – с помощью этой опции можно запретить сортировку по отдельным столбцам. Например: headers: { 4: { sorter: false} } запретит сортировку пятого столбца.
sortMultisortKey – по умолчанию задано значение shiftKey, т.е. щелкая мышью по заголовку столбца при нажатой клавише Shift можно выполнять сортировку по нескольким столбцам. Естественно клавишу можно переопределить. Например так: sortMultiSortKey: «ctrlKey». Теперь можно работать через клавишу Ctrl.
headers – с помощью этой опции можно запретить сортировку по отдельным столбцам. Например: headers: { 4: { sorter: false} } запретит сортировку пятого столбца.
Весь список опций есть на сайте разработчиков библиотеки, а я буду благодарен, если найдете возможность оставить свои отзывы…
Комментариев нет:
Отправить комментарий