Другое > Hard'n'Soft
[JS, JQuery] Сильно тормозит таблица
(1/1)
Qwentor:
Нужно сделать редактируемую таблицу. Данные берутся из БД 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:
Qwentor, сдаётся мне, что такое количество активных объектов на странице способно тупо подвесить браузер даже на хай-эндовой машине. Попробуй тестануть на более мощной (именно на клиентской стороне) на всякий случай.
Как-нить без жабы это сделать нельзя? В конце-концов написать лёгкий WinAPI клиент, который также к этой базе будет обращаться, религия не позволяет? И вообще как-то слабо себе представляю работу с такой таблицей. Уверен, что всё это можно организовать гуманнее.

З.Ы. Я извиняюсь, конечно, за стандартный стиль ответа на вопрос "Как сделать X" - "Сделай лучше Y", но уж очень диковинная задачка у топикстартера.
HardWareMan:
Альтернатива Жабе только Плеш или Активикс. Последний нормально работать будет только в Осле. А на пыхе на стороне серва никак что-ли?
Qwentor:
Помогли на ру-борде:

--- Код: ---$(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:
В общем, на более слабых
машинах все равно
тормозит.
Нужно, чтоб работало на
P4 2GHz 1 Gb RAM
На какой веб-технологии
можно это реализовать?
Навигация
Главная страница сообщений

Перейти к полной версии