Зараз досить активно використовую Javascript-бібліотеку jQuery. Під неї написано досить багато різних плагінів, зокрема такий чудовий плагін tablesorter – він дозволяє робити сортування таблиці засобами javascript. Демо можна глянути тут. Поставив плагін, все добре, але клієнтові захотілося, щоб стрілочки в хідерах таблиці були не по правому краю вирівняні, а зразу після тексту. Але стрілочки у плагіні виводятся у бекграунді td і вирівнюються background-position:right. А мені треба, щоб стрілочки були зразу після тексту у хідері таблиці. Спочатку працювало на такому варіанті: background-position: 40px, але з часом збільшувалась кількість стовпчиків, які потрібно сортувати і природно, що різні слова мають різну довжину і потрібно різний відступ ставити.
Вирішив зробити по-іншому, стрілку запихати в span, і вже цьому спану міняти клас (тобто вигляд стрілки), а не td. Далі реалізація.
Як виявилось пізніше потрібно внести тільки 4 маленькі зміни у код плагіна, після чого код можна використовувати, як у старому режимі вирівнювання, так і у новому.
1. Додаємо властивість leftAlign у настройки компонента. (При ініціалізації задаємо потрібне значення параметра).
2. При генеруванні таблиці додаємо генерування спанів у тдшках
3. Вилучаємо з наших спанів всі css-класи, які були задані
$headers.find("span").removeClass(css[0]).removeClass(css[1]);
} else {
$headers.removeClass(css[0]).removeClass(css[1]);
}
4. Додаємо до “наших” спанів потрібний клас
h[list[i][0]].find("span").addClass(css[list[i][1]]);
} else {
h[list[i][0]].addClass(css[list[i][1]]);
}
Також потрібно зробити деякі зміни в CSS-файлі:
вилучаємо в table.tablesorter thead tr .header такі значення
background-repeat: no-repeat;
background-position: right center;
і додаємо
background-image: url(../images/bg.gif);
background-repeat: no-repeat;
background-position: left center;
width:14px;
height:12px;
vertical-align: middle;
margin-left:2px;
display:inline-block;
}
Тільки один нюанс – якщо міняємо режим на alignLeft або навпаки, то потрібно робити ці зміни у CSS-файлі.
Приклад з вирівнюванням по правому краю – тут, вирівнювання по тексту – тут.
Також тут можна скачати обновлений файл jquery.tablesorter.js
P.S. Щоб знайти в коді, все що було змінено пошукаєте по слову Taras
08.02.2009 15:19
а чого б не використовувати такий грід? _http://www.trirand.com/blog/_
08.02.2009 17:53
2 Xobb
Не знав про нього, знайшов на сайті jQuery саме цей плагін – тому його і використовував.
22.11.2010 03:54
Чувак, я вірно зрозумів, що в тебе у пункті (3) в спана вилучаються лише перші два класи?
Я б чинив би інакше. Я б обчислював ширину тексту в кожному TD і задавав би йому відповідний backgroundPosition 
22.11.2010 09:45
Хм, в принципі слушна думка, тоді чомусь не догадався до такого.
22.11.2010 10:01
Ні Максим – твоя поправка не покатить.
Раніше як було – в кінці кожної тдшки стояли стрілки у вигляді бекграунду, а мені потрібно було, щоб стрілки стояли одразу біля тексту – тому в тдшку після тексту я додаю спан, в який ставлю стрілки, а якщо твій варіант – то треба рахувати не ширину тдшки, а ширину текста в тдшці.
22.11.2010 11:11
Ти не в’їхав. Ось так:
var td_text = $(’td#col1′).html();
var text_width = $(’#td_tester’).html(td_text).width();
$(’td#col1′).css({ backgroundPosition : text_width + ‘px 50%’ })
Де
td#col1 – TD, про який іде мова (зсередини плагіну якось по-іншому до нього звертаємося)
#td_tester – прихований шрифтові стилі якого відповідають нашому TD
22.11.2010 15:35
А, ти юзаєш сховану комірку td_tester – для того, щоб визначити ширину, на яку має зміщуватись бекграунд.
Тоді треба юзати не одну тестову тдшку, а декілька, або кожного разу ставити їй ширину 0, бо коли ти поставиш більший текст, а потім менший – ширина її не зменшиться (і точно не впевнений у різних браузерах як воно буде).
І ще один момент – коли у браузері будеш збільшувати шрифт – у моєму випадку span просто відсунеться, а у твоєму текст налізе на стрілочку.
22.11.2010 15:48
По другому пункту згоден. Лікується setInterval(check_width, 100).
По першому ти неправий. МНе обов’язково робтити , це може бути .
22.11.2010 21:59
Ну ось по другому пункту – на сторінці будуть додатково лишні запуски.
А на рахунок першого – перевірив в 4 браузерах – все гуд.
22.11.2010 22:04
Парсер порізав код
Я мав на увазі, що можна робити не (td id=”td_tester”), a (span id=”td_tester”)