如何提高jQuery的性能 [英] how to improve performance in jquery

问题描述

我不是一个好的程序员，我刚开始使用jQuery.我需要一个可以扩展和折叠行的表排序器.我的代码如下.我花了很多时间试图改善它的执行时间.在IE中，这需要很多时间.非常感谢您的建议.

I'm not a good programmer and I just started using jQuery. I need a table sorter that can expand and collapse rows. My code is below. I've spent lots of time trying to improve its execution time. In IE it takes lots of time. I'd appreciate your suggestions.

$(document).ready(function() {
  $('table.sortable').each(function() {
    var $table = $(this);
    var myData = new Array(), myData1 = new Array();
    var rows = $table.find('tbody > tr').get();
    var rowCount = 0;
    $.each(rows, function(index, row){ //arrange rows in 2 dimention array
      if(($(row).children('td').eq(0).attr('class').indexOf('collapse') != -1 || $(row).children('td').eq(0).attr('class').indexOf('expand') != -1)){   
        myData.push(myData1);
        myData1 = [];
      }
      myData1.push(row);    
      rowCount++;
      if(rowCount == $(rows).length){ // to assign last group of rows
        myData.push(myData1);
        myData1 = [];
      }
    });
    $table.find('th').each(function(column) {
      var findSortKey;
      if ($(this).is('.sort-alpha')) {
        findSortKey = function($cell) { 
          return $cell.find('.sort-key').text().toUpperCase() +
            ' ' + $cell.text().toUpperCase();
        };
      }
      else if ($(this).is('.sort-numeric')) {
        findSortKey = function($cell) {
          var key = parseFloat($cell.text().replace(/,/g,''));
          return isNaN(key) ? 0 : key;
        };
      }
      if (findSortKey) {
        $(this).addClass('header').click(function() {
          var newDirection = 1;
          if ($(this).is('.headerSortUp')) {
            newDirection = -1;
          }
          var expand = $table.find('tbody > tr > td.expand').get().length;
          if(expand > 0){
            $.each(myData, function(index, row) {
              $.each(row, function(index1, row2) {
                row2.sortKey = findSortKey($(row2).children('td').eq(column));
              });
            });
            $.each(myData, function(index, row) {
              row.sort(function(a, b) {
                if($(a).children('td').eq(0).attr('class').indexOf('collapse') == -1 && $(a).children('td').eq(0).attr('class').indexOf('expand') == -1 && $(b).children('td').eq(0).attr('class').indexOf('collapse') == -1 && $(b).children('td').eq(0).attr('class').indexOf('expand') == -1 ){
                  return ((a.sortKey < b.sortKey) ? -newDirection : ((a.sortKey > b.sortKey) ? newDirection : 0));
                }
                if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1){
                  return -1; // hack for google chromo
                }
                return 0;
              });
            });
          }else{
            $.each(myData, function(index, row) {
              row.sortKey = findSortKey($(row[0]).children('td').eq(column));
            });
            myData.sort(function(a, b) {
              if (a.sortKey < b.sortKey) return -newDirection;
              if (a.sortKey > b.sortKey) return newDirection;
              return 0;
            });
          }
          // alternate rows goes here and updating table 
          var alt = true;
          var altSub = true;
          $.each(myData, function(index, row) {
            var noRow = $(row).length;
            for (var i=0; i < noRow; i++){
              if($(row[0]).attr('id') == $(row[i]).attr('id')){
                if(alt == true){
                  $(row[0]).removeClass("odd").addClass("even");
                  alt = !alt;
                  altSub =true;
                }else if( alt == false){
                  $(row[0]).removeClass("even").addClass("odd");
                  alt = !alt;
                  altSub = true;
                }
              }else{
                if(altSub == true){
                  $(row[i]).removeClass("alt_row_sub").addClass("alt_row_sub2");
                  altSub = !altSub;
                }else if( altSub == false){
                  $(row[i]).removeClass("alt_row_sub2").addClass("alt_row_sub");
                  altSub = !altSub;
                }
              }
            }
            $table.children('tbody').append(row);
            row.sortKey = null;
          });
          $table.find('th').removeClass('headerSortUp')
            .removeClass('headerSortDown');
          var $sortHead = $table.find('th').filter(':nth-child('
            + (column + 1) + ')');
          if (newDirection == 1) {
            $sortHead.addClass('headerSortUp');
          } else {
            $sortHead.addClass('headerSortDown');
          }
        });
      }
    });
  });
});

下面的图像给出了一些想法.这将是几排行. 表格图片

image below gives some idea. this wil sort group of rows. table image

推荐答案

我不确定您要做什么，但是如果您要对表格进行排序，是否考虑过使用此jQuery插件: http://tablesorter.com/docs/吗?

I'm not entirely sure what you're trying to do, but if you're trying to sort tables, have you considered using this jQuery plugin: http://tablesorter.com/docs/ ?

看过您的屏幕截图(我想您的链接应该是: http://www.freeimagehosting.net/uploads/dc95537e24.gif )，我知道您正在尝试做什么.这不是我在jQuery中看到的，但ExtJS处理得很好:

having seen your screenshot (I presume your link should be to: http://www.freeimagehosting.net/uploads/dc95537e24.gif), I see what you're trying to do. This isn't something I've seen in jQuery, but it's something that ExtJS handles very well: http://extjs.com/deploy/dev/examples/grid/grouping.html - that may not be very helpful to you though, sorry.

这篇关于如何提高jQuery的性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！