欢迎来到福编程网,本站提供各种互联网专业知识!

一实用的实现table排序的Javascript类库

发布时间:2007-09-12 作者: 来源:转载
一个Javascript的类库,用于table内容排序。使用很方便,不用每次都去调用数据库了。特别适合多表查询的排序。加上的style.display切换,也可以实现分页。效果演示用法:1.添加JS2.添加TABLE,注意的是:一定要有ID,class为"sortable"OK,可以了,简单的吧如果
一个Javascript的类库,用于table内容排序。使用很方便,不用每次都去调用数据库了。
特别适合多表查询的排序。加上的style.display切换,也可以实现分页。
效果演示
用法:
1.添加JS

2.添加TABLE,注意的是:一定要有ID,class为"sortable"

OK,可以了,简单的吧
如果觉得太单调,自己加点CSS吧,官方给出了改HEAD的CSS

/*Sortabletables*/
table.sortablea.sortheader{
background-color:#eee;
color:#666666;
font-weight:bold;
text-decoration:none;
display:block;
}
table.sortablespan.sortarrow{
color:black;
text-decoration:none;
}

复制代码 代码如下:
addEvent(window,"load",sortables_init);

varSORT_COLUMN_INDEX;

functionsortables_init(){
//Findalltableswithclasssortableandmakethemsortable
if(!document.getElementsByTagName)return;
tbls=document.getElementsByTagName("table");
for(ti=0;tithisTbl=tbls[ti];
if(((''+thisTbl.className+'').indexOf("sortable")!=-1)&&(thisTbl.id)){
//initTable(thisTbl.id);
ts_makeSortable(thisTbl);
}
}
}

functionts_makeSortable(table){
if(table.rows&&table.rows.length>0){
varfirstRow=table.rows[0];
}
if(!firstRow)return;

//Wehaveafirstrow:assumeit'stheheader,andmakeitscontentsclickablelinks
for(vari=0;ivarcell=firstRow.cells[i];
vartxt=ts_getInnerText(cell);
cell.innerHTML=''onclick="ts_resortTable(this,'+i+');returnfalse;">'+
txt+'';
}
}

functionts_getInnerText(el){
if(typeofel=="string")returnel;
if(typeofel=="undefined"){returnel};
if(el.innerText)returnel.innerText;//Notneededbutitisfaster
varstr="";

varcs=el.childNodes;
varl=cs.length;
for(vari=0;iswitch(cs[i].nodeType){
case1://ELEMENT_NODE
str+=ts_getInnerText(cs[i]);
break;
case3://TEXT_NODE
str+=cs[i].nodeValue;
break;
}
}
returnstr;
}

functionts_resortTable(lnk,clid){
//getthespan
varspan;
for(varci=0;ciif(lnk.childNodes[ci].tagName&&lnk.childNodes[ci].tagName.toLowerCase()=='span')span=lnk.childNodes[ci];
}
varspantext=ts_getInnerText(span);
vartd=lnk.parentNode;
varcolumn=clid||td.cellIndex;
vartable=getParent(td,'TABLE');

//Workoutatypeforthecolumn
if(table.rows.length<=1)return;
varitm=ts_getInnerText(table.rows[1].cells[column]);
sortfn=ts_sort_caseinsensitive;
if(itm.match(/^dd[/-]dd[/-]dddd$/))sortfn=ts_sort_date;
if(itm.match(/^dd[/-]dd[/-]dd$/))sortfn=ts_sort_date;
if(itm.match(/^[?]/))sortfn=ts_sort_currency;
if(itm.match(/^[d.]+$/))sortfn=ts_sort_numeric;
SORT_COLUMN_INDEX=column;
varfirstRow=newArray();
varnewRows=newArray();
for(i=0;ifor(j=1;j

newRows.sort(sortfn);

if(span.getAttribute("sortdir")=='down'){
ARROW='↑';
newRows.reverse();
span.setAttribute('sortdir','up');
}else{
ARROW='↓';
span.setAttribute('sortdir','down');
}

//WeappendChildrowsthatalreadyexisttothetbody,soitmovesthemratherthancreatingnewones
//don'tdosortbottomrows
for(i=0;i//dosortbottomrowsonly
for(i=0;i

//Deleteanyotherarrowstheremaybeshowing
varallspans=document.getElementsByTagName("span");
for(varci=0;ciif(allspans[ci].className=='sortarrow'){
if(getParent(allspans[ci],"table")==getParent(lnk,"table")){//inthesametableasus?
allspans[ci].innerHTML='';
}
}
}

span.innerHTML=ARROW;
}

functiongetParent(el,pTagName){
if(el==null)returnnull;
elseif(el.nodeType==1&&el.tagName.toLowerCase()==pTagName.toLowerCase())//Geckobug,supposedtobeuppercase
returnel;
else
returngetParent(el.parentNode,pTagName);
}
functionts_sort_date(a,b){
//y2knotes:twodigityearslessthan50aretreatedas20XX,greaterthan50aretreatedas19XX
aa=ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
bb=ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
if(aa.length==10){
dt1=aa.substr(6,4)+aa.substr(3,2)+aa.substr(0,2);
}else{
yr=aa.substr(6,2);
if(parseInt(yr)<50){yr='20'+yr;}else{yr='19'+yr;}
dt1=yr+aa.substr(3,2)+aa.substr(0,2);
}
if(bb.length==10){
dt2=bb.substr(6,4)+bb.substr(3,2)+bb.substr(0,2);
}else{
yr=bb.substr(6,2);
if(parseInt(yr)<50){yr='20'+yr;}else{yr='19'+yr;}
dt2=yr+bb.substr(3,2)+bb.substr(0,2);
}
if(dt1==dt2)return0;
if(dt1return1;
}

functionts_sort_currency(a,b){
aa=ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
bb=ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
returnparseFloat(aa)-parseFloat(bb);
}

functionts_sort_numeric(a,b){
aa=parseFloat(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
if(isNaN(aa))aa=0;
bb=parseFloat(ts_getInnerText(b.cells[SORT_COLUMN_INDEX]));
if(isNaN(bb))bb=0;
returnaa-bb;
}

functionts_sort_caseinsensitive(a,b){
aa=ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase();
bb=ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase();
if(aa==bb)return0;
if(aareturn1;
}

functionts_sort_default(a,b){
aa=ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
bb=ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
if(aa==bb)return0;
if(aareturn1;
}


functionaddEvent(elm,evType,fn,useCapture)
//addEventandremoveEvent
//cross-browsereventhandlingforIE5+,NS6andMozilla
//ByScottAndrew
{
if(elm.addEventListener){
elm.addEventListener(evType,fn,useCapture);
returntrue;
}elseif(elm.attachEvent){
varr=elm.attachEvent("on"+evType,fn);
returnr;
}else{
alert("Handlercouldnotberemoved");
}
}

相关推荐