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.
我不是一个优秀的程序员,我刚开始使用jQuery。我需要一个可以展开和折叠行的表格分类器。我的代码如下。我花了很多时间来改善执行时间。在IE中需要很多时间。我很感激你的建议。
$(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
下图给出了一些想法。这将排成一排排。表格图像
4 个解决方案
#1
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/ ?
我不完全确定你要做什么,但是如果你想对表进行排序,你是否考虑过使用这个jQuery插件:http://tablesorter.com/docs/?
EDIT: 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.
编辑:看过你的截图(我猜你的链接应该是:http://www.freeimagehosting.net/uploads/dc95537e24.gif),我看到你正在尝试做什么。这不是我在jQuery中看到过的,但它是ExtJS处理得非常好的东西:http://extjs.com/deploy/dev/examples/grid/grouping.html - 虽然对你来说可能不是很有帮助对不起
#2
As a start, I would not trying to sort mydata with JavaScript at client-side, but I would to do it a server side. JavaScript is not made for performance and it blocks your browser when it is processing things.
首先,我不会尝试在客户端使用JavaScript对mydata进行排序,但我会将其作为服务器端。 JavaScript不是为了提高性能,而是在处理事物时阻止浏览器。
#3
Another option to improve performance of operations like sorting data client side is to use the HTML Bridge and interop with a non-visual Silverlight 2 component. That way you can use managed code (C#) to do the calculations client side.
提高数据客户端排序等操作性能的另一个选择是使用HTML Bridge并与非可视Silverlight 2组件互操作。这样您就可以使用托管代码(C#)来进行客户端计算。
Offcourse you would have to provide a (slower) JavaScript alternative to users who does not have Silverlight 2 installed. Look at this as "progressive enhancement" of performance (use Silverlight if available, if not use JavaScript).
当然,您必须为未安装Silverlight 2的用户提供(较慢的)JavaScript替代方案。将此视为性能的“渐进增强”(如果可用则使用Silverlight,如果不使用JavaScript)。
#1
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/ ?
我不完全确定你要做什么,但是如果你想对表进行排序,你是否考虑过使用这个jQuery插件:http://tablesorter.com/docs/?
EDIT: 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.
编辑:看过你的截图(我猜你的链接应该是:http://www.freeimagehosting.net/uploads/dc95537e24.gif),我看到你正在尝试做什么。这不是我在jQuery中看到过的,但它是ExtJS处理得非常好的东西:http://extjs.com/deploy/dev/examples/grid/grouping.html - 虽然对你来说可能不是很有帮助对不起
#2
As a start, I would not trying to sort mydata with JavaScript at client-side, but I would to do it a server side. JavaScript is not made for performance and it blocks your browser when it is processing things.
首先,我不会尝试在客户端使用JavaScript对mydata进行排序,但我会将其作为服务器端。 JavaScript不是为了提高性能,而是在处理事物时阻止浏览器。
#3
Another option to improve performance of operations like sorting data client side is to use the HTML Bridge and interop with a non-visual Silverlight 2 component. That way you can use managed code (C#) to do the calculations client side.
提高数据客户端排序等操作性能的另一个选择是使用HTML Bridge并与非可视Silverlight 2组件互操作。这样您就可以使用托管代码(C#)来进行客户端计算。
Offcourse you would have to provide a (slower) JavaScript alternative to users who does not have Silverlight 2 installed. Look at this as "progressive enhancement" of performance (use Silverlight if available, if not use JavaScript).
当然,您必须为未安装Silverlight 2的用户提供(较慢的)JavaScript替代方案。将此视为性能的“渐进增强”(如果可用则使用Silverlight,如果不使用JavaScript)。
#4
Below image is screen shot of the table
demo image
下图是表演示图像的屏幕截图