Функция Jquery вызывается из $ (document) .ready занимает слишком много времени - IE открывает диалоговое окно «Остановить скрипт» - PullRequest
Новая
       4

Функция Jquery вызывается из $ (document) .ready занимает слишком много времени - IE открывает диалоговое окно «Остановить скрипт»

1 голос
/ 29 декабря 2010

У меня есть следующий скрипт для имитации функциональности «freezepane» в html, как в Excel, где правая сторона и заголовок прокручиваются, когда пользователь прокручивает таблицу результатов. 

fnAdjustTable=function(){

    var colCount=$('#firstTr>td').length; //get total number of column

    var m=0;
    var n=0;
    var brow='mozilla';
    jQuery.each(jQuery.browser, function(i, val) {
        if(val==true){

            brow=i.toString();
        }
    });
    $('.tableHeader').each(function(i){
        if(m<colCount){

            if(brow=='mozilla'){
                $('#firstTd').css("width",$('.tableFirstCol').innerWidth());//for adjusting first td

                $(this).css('width',$('#table_div td:eq('+m+')').innerWidth());//for assigning width to table Header div
            }
            else if(brow=='msie'){
                $('#firstTd').css("width",$('.tableFirstCol').width());

                $(this).css('width',$('#table_div td:eq('+m+')').width());//In IE there is difference of 2 px
            }
        }
        m++;
    });

    $('.tableFirstCol').each(function(i){
        if(brow=='mozilla'){
            $(this).css('height',$('#table_div td:eq('+colCount*n+')').outerHeight()-1);//for providing height using scrollable table column height
        }else if(brow=='msie'){

            $(this).css('height',$('#table_div td:eq('+colCount*n+')').innerHeight());
        }else{
            $(this).css('height',$('#table_div td:eq('+colCount*n+')').height());
        }
        n++;
    });



}

fnScroll=function(){

    $('#divHeader').scrollLeft($('#table_div').scrollLeft());
    $('#firstcol').scrollTop($('#table_div').scrollTop());
}

Проблема в том, что при переборе tds "tableFirstCol" всплывает ошибка остановки выполнения скрипта. Есть ли более эффективный способ сделать это?

По сути, скрипт изменяет размеры каждого верхнего заголовка и боковой панели, чтобы соответствовать ширине в первой строке / столбце. Если я запускаю свой отчет с большим диапазоном дат (боковой заголовок), сценарий всплывает, как правило, когда имеется более 30 боковых строк заголовка.

Любая помощь приветствуется!

Ответы [ 2 ]

0 голосов
/ 29 декабря 2010

Вам необходимо кэшировать ваши селекторы: 

var tableDiv = $('#table_div'),
    divHeader = $('#divHeader'),
    firstcol = $('#firstcol'),
    tableFirstCol = $('.tableFirstCol'),
    tds = $('td', tableDiv);

Вы можете использовать для своих селекторов столбцов .eq (n).

Не используйте $(this).css("height", n) при this.style.height = n; проще и быстрее.

Это: 

$('.tableHeader').each(function(i){
    if(m<colCount){
        /* ... */
    }
    m++;
});

должно быть: 

$('.tableHeader').each(function(i){
    if(i<colCount){
        /* ... */
    }
});

и я не совсем уверен, что вам даже понадобится проверка i<colCount (но я бы посмотрел HTML).

Навигация в браузере, вероятно, не нужна. Попробуйте применить таблицу стилей сброса и действительный doctype или используйте HTML5Boilerplate .

Если у вас есть браузер снифф: вы можете просто использовать: 

if($.browser.mozilla){
    /* ... */
}
else if ($.browser.msie){
    /* ... */
}
else{
    /* ... */
}

Вы также можете сжать этот код довольно много. Посмотрите на принцип DRY .

Кроме того, что касается установки высоты tableFirstCol, не могли бы вы просто установить высоту строки вместо этого?

0 голосов
/ 29 декабря 2010

Вы можете сгенерировать HTML с тегами id для каждого столбца и строки.Затем просто выберите по имени вместо использования сложных селекторов.

Я бы сказал, что $('#table_div td:eq('+colCount*n+')') - это сложный селектор, в то время как $('#row1') гораздо проще.

Кроме того, я верю, чтоВы делаете для проверки браузера не будет работать.Код, который у вас есть, перебирает все свойства обнаруженного браузера и устанавливает значение brow для последнего.Вместо имеющегося цикла используйте что-то вроде $.browser.webkit для проверки наличия webkit и $.browser.msie для проверки IE.Поскольку ваш код сейчас, я думаю, вы всегда будете выполнять дело else.Подробнее об объекте браузера jQuery можно узнать здесь: http://api.jquery.com/jQuery.browser/

...