RuMasters Голосов: 1 Адрес блога: http://rumasters.net/ Добавлен: 2010-07-03 15:51:01

Скрипт изменения вывода в таблице

Уже не в первый раз меня заказчики просили увеличить вывод товаров в магазине PHPShop. В PHPShop в зависимости от версии скрипта максимальный вывод товаров в строку варьируется от 2 до 4.

Это можно сделать и в самом коде в той части где выводятся таблицы товаров. Но такой вариант не всегда хорош, к примеру в этот раз было необходимо сделать вывод разного количества товаров в строку в зависимости от разрешения экрана пользователя.

Я написал небольшой скрипт jQuery, который в зависимости от разрешения экрана пользователя заменяет старую таблицу вывода товара на новую с нужным количеством товаров в строку.

Скрипт работает в IE 6-8, Safari, Chrome, Opera, FF. Это в тез которых мы проверяли. Максимальное количество товаров при котором не лагает пока не узнавал, но будет проверено чуть позже.

И так, сам скрипт:

var k = 0;
var tds = new Array();
$(".panel_t").each(function(){ //создаем массив всех ячеек таблицы
   tds[k] = $(this).html();
   k++;
});
var width = screen.width; //узнаем разрешение монитора
if(width<1280) { //при разных разрешениях у нас разное количество столбцов
   // по умолчанию, ничего не меняем.
} else {
   if(width<1600) {
      var d = 4; //Можно поменять на свое, в зависимости от ширины вывода блока каждого товара
   } else {
      var d = 5;
   }
   var leng = tds.length; //скока в массиве элементов
   var strokse = leng/d; //расчитываем количество необходимых строк в зависимости от того сколько будет стобцов. округляем до большего
   strokse = Math.ceil(strokse);
   var all = strokse*d; //Сколько всего будет ячеек в таблице(строк*столбцов)
   if(all>leng) { // Товаров меньше чем ячеек в таблице?
      for(h=all;h>=leng;h--) {
         tds[h]=" ";//заполняем пустые ячейки
      }
   }
   var sumEl = leng-1; //массив считается с нуля, поэтому -1
   var tableM = ""; //пустая переменная для таблицы
   var l = d+(d-1); //цифра для colspan
   k=0; //обнуляем к
   for(i = 0; i < strokse; i++) { //первый цикл, формирует строки
      tableM += "<tr><td colspan=\""+l+"\"></td></tr><tr>"; //строка для сетки, и начало второй строки с товаром
         for(c=0;c<d;c++){//цикл второй формируем каждую строку
            if(c!==(d-1)) {//если не последняя ячейка в таблице то
               tableM += "<td>"+tds[k]+"</td><td class=\"setka\"></td>";
            }else{//если ячейка последняя
               tableM += "<td>"+tds[k]+"</td>";
            }
            k++;//прибавляем ячейку
         }
      tableM += "</tr>";//закрываем строку
   }
   $("#ThisMainTable").empty().append(tableM);
} 

На идеал этот скрипт не тянет, всегда есть что и куда улучшать. Есть идеи как улучшить скрипт? Отписываемся =)