日期:2014-05-16 浏览次数:20437 次
对于table表格排序,是开发中很长用到得技术。今天把客户端排序完善了一下,它兼容数字、字符、日期、汉字、百分数等排序功能。 如下 对于数字类型列: 整型onclick=sortTable('tableID',1,'int'); 浮点型onclick=sortTable('tableID',1,'int'); 对于日期型列: onclick=sortTable('tableID',1,'date'); 对于字符串型列: 如:onclick=sortTable('tableID',1); 对于百分数的列(如:36%): 如:sortTable('tableID',5,'float',1); // 对table表格排序的处理TableSort.js 文件代码如下: //ie和FireFox的处理 function ieOrFireFox(obj) { if(obj.textContent != null) { return obj.textContent; } else { var s = obj.innerText; return s.substring(0,s.length); } } //对table排序。 //参数 ---tableId:表的id,iCol:列索引;dataType:iCol对应的列排序显示数据的类型,removeRight:排序时去掉列的右边的字符个数 function sortTable(tableId,iCol,dataType,removeRight) { var table = document.getElementById(tableId); //给排序列标题改变颜色//////////////////// var thead = table.childNodes[0]; var tr = thead.childNodes[0]; var thNew = tr.childNodes[iCol]; if(table.sortCol != null) { var thOld = tr.childNodes[table.sortCol]; thOld.style.color="Black" } thNew.style.color="Blue" /////////////////////////////////////////// var tbody = table.tBodies[0]; var colRows = tbody.rows; var aTrs = new Array;//定义数组 //将得到的列放入数组,备用 for(var i = 0;i<colRows.length;i++) { aTrs[i] = colRows[i]; } //判断上一次排列和现在需要排列的是否同一个 if(table.sortCol == iCol) { aTrs.reverse(); } else { //如果不是同一列,使用sort方法传进排序函数 aTrs.sort(compareEle(iCol,dataType,removeRight)); } var oFragment = document.createDocumentFragment(); for(var i =0;i<aTrs.length;i++) { oFragment.appendChild(aTrs[i]); } tbody.appendChild(oFragment); table.sortCol = iCol;//记录最后一次排序的列索引 } //排序函数,iCol:列索引,dataType:列数据类型 function compareEle(iCol,dataType,removeRight) { return function(oTR1,oTR2) { var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]),dataType,removeRight); var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]),dataType,removeRight); if(typeof(vValue1)=='string') { // 汉字排序单独处理 return vValue1.localeCompare(vValue2); } else { if(vValue1<vValue2) { return -1; } else if(vValue1>vValue2) { return 1; } else { return 0; } } }; } //将列的类型转换成相应的可以排序的数据类型 function convert(sValue,dataType,removeRight) { if(removeRight!=null) { var newLen = sValue.length - removeRight; sValue=sValue.substr(0,newLen); } switch(dataType) { case "int": return parseInt(sValue); case "float": return parseFloat(sValue); case "date": return new Date(Date.parse(sValue)); default: return sValue.toString(); } }
?