《JavaScript高级程序设计》阅读笔记(十九):表格排序
排序代码
function SortTable(sTableID, iCol, sDataType){ this.oTable=document.getElementById(sTableID); this.oTBody=this.oTable.tBodies[0]; this.colDataRows=this.oTBody.rows; this.aTRs=[]; this.iCol=iCol; this.sDataType=sDataType;}SortTable.prototype={ convert:function(sValue, sDataType){ switch(sDataType){ case "int": return parseInt(sValue); case "float": return parseFloat(sValue); case "date": return new Date(sValue); default: return sValue.toString(); } }, generateCompareTRs:function(iCol, sDataType, that){ return function compareTRs(oTR1,oTR2){ var vValue1= that.convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType), vValue2= that.convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType); if(vValue1 < vValue2){ return -1; } else if(vValue1 > vValue2){ return 1; } else{ return 0; } }; }, sort:function(){ for(var i=0,l=this.colDataRows.length;i<l;i++){ this.aTRs.push(this.colDataRows[i]); } if(this.oTable.sortCol === this.iCol){ this.aTRs.reverse(); } else { this.aTRs.sort(this.generateCompareTRs(this.iCol, this.sDataType, this)); } var oFragment=document.createDocumentFragment(); for(var i=0,l=this.aTRs.length;i<l;i++){ oFragment.appendChild(this.aTRs[i]); } this.oTBody.appendChild(oFragment); this.oTable.sortCol = this.iCol; }}
调用示例
function bindSortTable(sTableID, iCol, sDataType){ var table=document.getElementById(sTableID), ftr=table.tHead.rows[0], tds=ftr.cells; if(tds[iCol]){ tds[iCol].onclick=function(){ var sortTable=new SortTable(sTableID, iCol, sDataType); sortTable.sort(); } }}window.onload=function(){ bindSortTable("tblSort",0); bindSortTable("tblSort",1); bindSortTable("tblSort",2,"int"); bindSortTable("tblSort",3,"float"); bindSortTable("tblSort",4,"date");}
完整Demo:
TAG: