0
Ich bin kein guter Programmierer und habe gerade angefangen, jQuery zu verwenden. Ich brauche einen Tabellensortierer, der Zeilen erweitern und reduzieren kann. Mein Code ist unten. Ich habe viel Zeit damit verbracht, die Ausführungszeit zu verbessern. In IE braucht es viel Zeit. Ich würde deine Vorschläge schätzen.wie ich die Leistung in Jquery verbessern kann
$(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');
}
});
}
});
});
});
Bild unten gibt eine Idee. Das wird eine Gruppe von Zeilen sortieren.
ich mit Ihrem Punkt einig, aber die Sache ist, wenn ich tablesorter jQuery-Plugin verwenden, seine Leistung ist ausgezeichnet. Ich denke, das Problem mit meinem Code ist die Art der DOM-Modifikation. – vinay
@Michael, ich stimme nicht zu, es gibt gute Gründe, warum Sie die Clientseite sortieren möchten. Mit verbesserter JavaScript-Geschwindigkeit und Bibliotheken gibt es viele Fälle, in denen es bei einem Roundtrip zum Server optimal sein kann. – Pool
Ich habe im Handumdrehen ziemlich viele Daten in JavaScript sortiert. Nach meiner Erfahrung ist es eine Größenordnung schneller, auf dem Client zu sortieren, und dann den Server zu bitten, die Informationen zu sortieren und zu erhalten. – Nosredna