javascript 排序

<SCRIPT language=JavaScript type=text/javascript>
//主要用于页面排序
var curObj;
var globalColIndex=0;
//表示没有排序
var noSort="0";
//表示升序
var ascSort="1";
//表示降序
var descSort="2";
var tableRowDataArr=new Array();
//数据数组
var theDataRowsArr=new Array();
//标题数组
var theTitleRowsArr=new Array();
//列排序标记数组
var tableColSortFlagArr=new Array();
function sortTable(tempColIndex,imageName) {
  var prefix_str="imagerorder";
  var suffix_str="_0";
  var image_path="/test/sort/";
  sortTableForProceeding(tempColIndex,imageName,tableRowDataArr,theDataRowsArr
  ,theTitleRowsArr,tablesortlist,tableColSortFlagArr,prefix_str,suffix_str,image_path);
}
</SCRIPT>

 

 

 

//排序函数脚本
function sortTableForProceeding(tempColIndex,imageName,tableRowDataArr
   ,theDataRowsArr,theTitleRowsArr,tablesortlist,tableColSortFlagArr
   ,prefix_str,suffix_str
   ,image_path){
  var start=new Date()
  var i;
  var imageObj=null;
  if(tablesortlist.rows.length==2){
    if(tablesortlist.rows[1].cells.length==1){
      return ;
    } 
  } 
  initColSortFlag(tablesortlist,tableColSortFlagArr);
  //把第一行的标题行数据装入数组中
  for(i=0;i<tablesortlist.rows.length;i++) {   
    theTitleRowsArr[i]=new Array(tablesortlist.rows[i].cells[tempColIndex].innerText.toLowerCase(),tablesortlist.rows[i].outerHTML);   
  }
  //alert(tablesortlist.rows[1].cells[tempColIndex].innerText.toLowerCase());
  //把数据装入数组中
  for(i=0;i<tablesortlist.rows.length;i++) {
    //过滤掉标题行
    if(i==0){
      theDataRowsArr[i]=new Array("","");
    }
    else{
      theDataRowsArr[i]=new Array(tablesortlist.rows[i].cells[tempColIndex].innerText.toLowerCase(),tablesortlist.rows[i].outerHTML);
    }
    //alert(theDataRowsArr[i]);
    //alert("2:"+tablesortlist.rows[i].outerHTML);
  }
  //排序
  //alert(tableColSortFlagArr[tempColIndex]+"&tempColIndex:"+tempColIndex);
  //一开始是没有排序
  if(tableColSortFlagArr[tempColIndex]==noSort){
    theDataRowsArr.sort(sortRowsDesc);
    tableColSortFlagArr[tempColIndex]=descSort;
  }
  else{
    if(tableColSortFlagArr[tempColIndex]==ascSort){
      theDataRowsArr.sort(sortRowsDesc);
      tableColSortFlagArr[tempColIndex]=descSort;   
    }
    else{
      if(tableColSortFlagArr[tempColIndex]==descSort){
        theDataRowsArr.sort(sortRowsAsc);
        tableColSortFlagArr[tempColIndex]=ascSort;   
       } 
    }
  }
  //alert(tableColSortFlagArr[tempColIndex]);
  var str='';
  var tempStr='';
  for(i=0;i<theDataRowsArr.length;i++) {
        if(i==0){
          str+=theTitleRowsArr[i][1];
          str+=theDataRowsArr[i][1];
        }
        else{
          tempStr=theDataRowsArr[i][1];
          if(i % 2==0){  
            if(tempStr.indexOf('<TR class=rowoutdark2 align=middle>')>=0){
              tempStr=tempStr.replace('<TR class=rowoutdark2 align=middle>','<TR class=rowoutdark align=middle>');
            }
          }
          else{
            if(tempStr.indexOf('<TR class=rowoutdark align=middle>')>=0){
              tempStr=tempStr.replace('<TR class=rowoutdark align=middle>','<TR class=rowoutdark2 align=middle>');
            }
          }
          theDataRowsArr[i][1]=tempStr;
   str+=theDataRowsArr[i][1];
 }
  }
  tablesortlist.outerHTML='<table id="tablesortlist" width="100%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#A0A0A0">'+str+'</table>'
  curObj=null;
   //变换图片
   imageObj=getFormObjectByObjectName(imageName);
   //alert("adfsaf:"+imageObj+"&I:"+tableColSortFlagArr[tempColIndex]);
   if(imageObj!=null){
     if(tableColSortFlagArr[tempColIndex]==ascSort){
       imageObj.setAttribute("src",image_path+"images/downarrow.gif");
       imageObj.setAttribute("width","10");
       imageObj.setAttribute("height","10");
       //alert("adfsaf:"+imageObj+"&I:"+tableColSortFlagArr[tempColIndex]);
     }
     if(tableColSortFlagArr[tempColIndex]==descSort){
      imageObj.setAttribute("src",image_path+"images/uparrow.gif");
      imageObj.setAttribute("width","10");
      imageObj.setAttribute("height","10");
      //alert("adfsaf:"+imageObj+"&I:"+tableColSortFlagArr[tempColIndex]);
     }    
   }
   //alert(imageObj);
   //清除图片
   for(i=0;i<tablesortlist.rows.length;i++) {
    if(i==0){
      for (j=0;j<tablesortlist.rows(i).cells.length;j++)
      {    
        if(tempColIndex!=j){
          tableColSortFlagArr[j]=noSort;
        }      
        if(tableColSortFlagArr[j]==noSort){
          //alert("j:"+j+"&tableColSortFlagArr:"+tableColSortFlagArr[j]);
          imageObj=getFormObjectByObjectName(prefix_str+j+suffix_str);
          if(imageObj!=null){
            imageObj.setAttribute("src","");
            imageObj.setAttribute("width","0");
            imageObj.setAttribute("height","0");
          }
        }
      }
    }
    break;
  }
  return ;
}

function initColSortFlag(tablesortlist,tableColSortFlagArr){
  //保存排序标记
  for(i=0;i<tablesortlist.rows.length;i++) {
   if(i==0){
     for (j=0;j<tablesortlist.rows(i).cells.length;j++)
     {           
       if(tableColSortFlagArr[j]==null){
         tableColSortFlagArr[j]=noSort;
       }
     }
   }
   break;
  }
} 

 

以下是使用示例，排序页面如下：

  <TABLE id=tablesortlist cellSpacing=1 cellPadding=3 width="100%"
      align=center bgColor=#a0a0a0 border=0>
        <TBODY>
        <TR class=rowoutlight align=middle bgColor=#c9d8ff>
          <TD width="5%">全选 <INPUT  type=checkbox
            value=checkbox name=chkall></TD>
          <TD onclick="javascript:sortTable('1','imagerorder1_0');"
            width="15%"><DIV align=center><FONT title=点击标题，进行数据排序
            style="CURSOR: hand">项目名称</FONT> <IMG title="" height=1
            src="/arrowdown.gif" width=1 name=imagerorder1_0>
</DIV></TD>
          <TD onclick="javascript:sortTable('2','imagerorder2_0');"
            width="15%"><DIV align=center><FONT title=点击标题，进行数据排序
            style="CURSOR: hand">项目类型</FONT> <IMG title="" height=1
            src="/arrowdown.gif" width=1 name=imagerorder2_0>
</DIV></TD>
          <TD onclick="javascript:sortTable('3','imagerorder3_0');"
            width="14%"><DIV align=center><FONT title=点击标题，进行数据排序
            style="CURSOR: hand">项目类别</FONT> <IMG title="" height=1
            src="/arrowdown.gif" width=1 name=imagerorder3_0>
</DIV></TD>
          <TD onclick="javascript:sortTable('4','imagerorder4_0');"
            width="10%"><DIV align=center><FONT title=点击标题，进行数据排序
            style="CURSOR: hand">申请者名称</FONT> <IMG title="" height=1
            src="/arrowdown.gif" width=1 name=imagerorder4_0>
</DIV></TD>
          <TD onclick="javascript:sortTable('5','imagerorder5_0');"
            width="13%"><DIV align=center><FONT title=点击标题，进行数据排序
            style="CURSOR: hand">联系电话</FONT> <IMG title="" height=1
            src="/arrowdown.gif" width=1 name=imagerorder5_0>
</DIV></TD>
          <TD onclick="javascript:sortTable('6','imagerorder6_0');">
            <DIV align=center><FONT title=点击标题，进行数据排序
            style="CURSOR: hand">申报时间</FONT> <IMG title="" height=1
            src="/arrowdown.gif" width=1 name=imagerorder6_0>
</DIV></TD>
          <TD onclick="javascript:sortTable('7','imagerorder7_0');">
            <DIV align=center><FONT title=点击标题，进行数据排序
            style="CURSOR: hand">市级</FONT> <IMG title="" height=1
            src="/arrowdown.gif" width=1 name=imagerorder7_0>
</DIV></TD>
          <TD onclick="javascript:sortTable('8','imagerorder8_0');">
            <DIV align=center><FONT title=点击标题，进行数据排序
            style="CURSOR: hand">资金合计</FONT> <IMG title="" height=1
            src="/arrowdown.gif" width=1 name=imagerorder8_0>
        </DIV></TD></TR>