/************************************** *purpouse:对表格进行排序 (胡尊杰 20090718修正增强版本 ) *author :王建波 *version :1.0 bate *date :2008-9-26 *email :wang_jian_bo037@126.com **************************************/ function _$(sId){ return document.getElementById(sId); } function _$Name(sName){ var oParNode=oParNode?oParNode:document; return oParNode.getElementsByName(sName); } Array.prototype._isElIn=function(el){ var i,nLen=this.length; for(i=0;i<nLen;i++){ if(this[i]==el) break; } return i<nLen; } function TableOrder(oTable,oCfg){ if(typeof(oTable)=="string") oTable=_$(oTable)||_$Name(oTable)[0]; if(!oTable){ alert("Error table object!"); return; } this.iconpath=oCfg&&oCfg.iconpath&&oCfg.iconpath!="" ?oCfg.iconpath :"./images/"; this.getfuncs=oCfg&&oCfg.getfuncs; this.callAfterOrder=oCfg&&oCfg.callAfterOrder; this.table=oTable; this.header=(function(){ var oHeader=oTable.tHead; var oRowHead=oHeader ?oHeader.rows[oHeader.rows.length-1] :oTable.rows[0]; return oRowHead; })(); //set order colum if(oCfg&&oCfg.sortcols) this.sortcols=oCfg.sortcols; this.record=(function(){ var i,nLen,aRows,aBodies=oTable.tBodies; if(oTable.tHead){ aRows=aBodies[0].rows; }else{ //if can't find thead then the first row as thead others as tbody nLen=oTable.rows.length; aRows=[]; for(i=1;i<nLen;i++){ aRows.push(oTable.rows[i]); } } return aRows; })(); } TableOrder.prototype.init=function(){ var oTOrder=this; this.header.onclick=function(e){ oTOrder.header.onclick=null; oTOrder.handleClick(e); oTOrder.header.onclick=arguments.callee; } } TableOrder.prototype.handleClick=function(e){ var evt=e||window.event; var srcEl=evt.target||evt.srcElement; var oTr,i,nLen;/*oImg,*/ var nCellIndex,canOrder; //check weather the colum can sort while(srcEl.tagName!="TD"&&srcEl.tagName!="TH"){ srcEl=srcEl.parentNode; } oTr=srcEl.parentNode; nCellIndex=(function(){ var i,nLen=oTr.cells.length; for(i=0;i<nLen;i++) if(oTr.cells[i]==srcEl) break; return i; })(); canOrder=!this.sortcols ||this.sortcols._isElIn(nCellIndex); if(!canOrder){ return; } //if the colum has not sort image then append 胡尊杰 将图片换为样式 /*if(!srcEl.orderImg){ oImg=new Image(); srcEl.appendChild(oImg); srcEl.orderImg=oImg; }*/ //hide orther colums sort image nLen=oTr.cells.length; for(i=0;i<nLen;i++){ if(i!=srcEl.cellIndex/*&&oTr.cells[i].orderImg*/){ oTr.cells[i].className="";/*orderImg.style.visibility="hidden"*/; oTr.cells[i].style.backgroundImage="url("+this.iconpath+"new_paixu_all.jpg)"; } } srcEl.className="Sel";/*.orderImg.style.visibility="visible"*/; //change sort images if(srcEl.order&&srcEl.order=="des") srcEl.order="asc"; else srcEl.order="des"; srcEl.style.backgroundImage="url("+this.iconpath+"new_paixu_"+(srcEl.order=="des"?"down":"up")+".jpg)"; /*orderImg.src*/ //sort table try{ this.order(e,nCellIndex,srcEl.order); }catch(e){ alert("没有可排序的数据!"); //e.message } } TableOrder.prototype.order=function(e,index,order){ var oGetValue=this.getfuncs&&this.getfuncs[index] ?this.getfuncs[index] :function(_oTd){ return _oTd.innerHTML.replace(/<[\S\s]*?>/gi,"") .replace(/^\s+|\s+$/gi,""); }; var orderFunc=order=="asc" ?orderFunc=function(item1,item2){return item1.value<item2.value?1:-1;} :orderFunc=function(item1,item2){return item1.value>item2.value?1:-1;}; var parNodeOfRow=this.record[0].parentNode ||this.table; var oFrag=document.createDocumentFragment(); var i,nLen=this.record.length; var aRowInfo=[]; //sort rows for(i=nLen-1;i>=0;i--){ aRowInfo.push({ index:i, value:oGetValue(this.record[i].cells[index]), obj:parNodeOfRow.removeChild(this.record[i]) }); } aRowInfo.sort(orderFunc); //append sorted rows to tbody for(i=0;i<nLen;i++){ aRowInfo[i].obj.className=(i%2==0?"":"BG");/*胡尊杰 扩展样式调整*/ oFrag.appendChild(aRowInfo[i].obj); } parNodeOfRow.appendChild(oFrag); //if set callAfterOrder function then call the function if(this.callAfterOrder) this.callAfterOrder(e); }以下为效果演示:
商品名称 | 价格 | 类型 | 特性 | 数字编号 |
---|---|---|---|---|
商品1A | RMB |
中国制造 | 很好 | 1 |
商品1B | RMB |
美国制造 | 不错 | 2 |
商品2A | RMB |
日本制造 | 凑合 | 3 |
商品2B | RMB |
俄国制造 | 一般 | 4 |
商品3B | RMB |
英国制造 | 小小意思 | 5 |
商品3A | RMB |
德国制造 | 毛毛雨 | 6 |
商品4B | RMB |
爱哪哪制造 | 木知 | 7 |
商品4 | RMB |
不知道 | 知不到 | 8 |
Copyright © 2008 - 2009 PYZY.net All Rights Reserved
本站一切原创作品均采用创作共享授权方式 转载请注明出处 商业用途请与本站联系
飘雨之夜© 版权所有 京ICP备16068181号-1 Mail:Admin@pyzy.net