Страницы: [1]   Вниз

Автор Тема: [JS, JQuery] Сильно тормозит таблица  (Прочитано 4778 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн Qwentor

  • Пользователь
  • Сообщений: 935
  • Пол: Мужской
    • ВКонтакте
    • Просмотр профиля
[JS, JQuery] Сильно тормозит таблица
« : 08 Май 2012, 22:03:15 »
Нужно сделать редактируемую таблицу. Данные берутся из БД MySQL.
Таблица очень большая 107х776
Вот код скрипта, которым я делал ячейки редактируемыми (код для отправки на сервер пока не вставлял):

Код: [Выделить]
$(document).ready(function() {
$('td').click(function(e) {
//ловим элемент, по которому кликнули
var t = e.target || e.srcElement;
//получаем название тега
var elm_name = t.tagName.toLowerCase();
//если это инпут - ничего не делаем
if(elm_name == 'textarea') {return false;}
var val = $(this).html(); //получаем значение ячейки
//формируем код текстового поля
var code = '<textarea id="edit">'+val+'</textarea>';
//удаляем содержимое ячейки, вставляем в нее сформированное поле
$(this).empty().append(code);
//устанавливаем фокус на свеженарисованное поле
$('#edit').focus();
$('#edit').blur(function() { //устанавливаем обработчик
var val = $(this).val();     //получаем то, что в поле находится
//находим ячейку, опустошаем, вставляем значение из поля
$(this).parent().empty().html(val);
});
});

});
При этом страница грузится секунд 6-7 и при переключении между ячейками довольно ощутимые тормоза - ячейка активируется более чем через полсекунды после клика.
Есть ли способ это оптимизировать или для такой большой таблицы нереально?

Оффлайн Planestranger

  • Пользователь
  • Сообщений: 1837
  • Пол: Мужской
    • Просмотр профиля
Re: [JS, JQuery] Сильно тормозит таблица
« Ответ #1 : 09 Май 2012, 01:37:33 »
Qwentor, сдаётся мне, что такое количество активных объектов на странице способно тупо подвесить браузер даже на хай-эндовой машине. Попробуй тестануть на более мощной (именно на клиентской стороне) на всякий случай.
Как-нить без жабы это сделать нельзя? В конце-концов написать лёгкий WinAPI клиент, который также к этой базе будет обращаться, религия не позволяет? И вообще как-то слабо себе представляю работу с такой таблицей. Уверен, что всё это можно организовать гуманнее.

З.Ы. Я извиняюсь, конечно, за стандартный стиль ответа на вопрос "Как сделать X" - "Сделай лучше Y", но уж очень диковинная задачка у топикстартера.

Оффлайн HardWareMan

  • Модератор
  • Сообщений: 7422
    • Просмотр профиля
Re: [JS, JQuery] Сильно тормозит таблица
« Ответ #2 : 09 Май 2012, 11:53:36 »
Альтернатива Жабе только Плеш или Активикс. Последний нормально работать будет только в Осле. А на пыхе на стороне серва никак что-ли?

Оффлайн Qwentor

  • Пользователь
  • Сообщений: 935
  • Пол: Мужской
    • ВКонтакте
    • Просмотр профиля
Re: [JS, JQuery] Сильно тормозит таблица
« Ответ #3 : 09 Май 2012, 13:05:12 »
Помогли на ру-борде:
Код: [Выделить]
$(document).ready(function() {
    $('body').on('click', 'td', function(e) { 
        //ловим элемент, по которому кликнули 
        var t = e.target || e.srcElement; 
        //получаем название тега 
        var elm_name = t.tagName.toLowerCase(); 
        //если это инпут - ничего не делаем 
        if(elm_name == 'textarea') {return false;}
        $(this).wrapInner('<textarea />');
        //устанавливаем фокус на свеженарисованное поле
        $(':first-child', this).focus()
               .blur(function() { //устанавливаем обработчик
                    var val = $(this).val();     //получаем то, что в поле находится
                    //находим ячейку, опустошаем, вставляем значение из поля
                    $(this).parent().empty().html(val); 
                }); 
    });
}); Получается один обработчик для <body> (можно для <table>) вместо кучи для <td>
Грузится все равно порядочно, но после загрузки уже работает нормально

Оффлайн Qwentor

  • Пользователь
  • Сообщений: 935
  • Пол: Мужской
    • ВКонтакте
    • Просмотр профиля
Re: [JS, JQuery] Сильно тормозит таблица
« Ответ #4 : 10 Май 2012, 11:36:00 »
В общем, на более слабых
машинах все равно
тормозит.
Нужно, чтоб работало на
P4 2GHz 1 Gb RAM
На какой веб-технологии
можно это реализовать?
Страницы: [1]   Вверх