js表格欄位排序的執行個體代碼介紹

js表格欄位排序的執行個體代碼介紹

 本篇文章只要是對js表格欄位排序的執行個體代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所協助

1.比較函數產生器：

 

 代碼如下:

/**

 * 比較函數產生器

 * 

 * @param iCol

 *            資料行數

 * @param sDataType

 *            該行的資料類型

 * @return

 */

function  generateCompareTRs(iCol, sDataType) {

     return   function  compareTRs(oTR1, oTR2) {

        vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);

        vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);

         if  (vValue1 < vValue2) {

             return  -1;

        }  else   if  (vValue1 > vValue2) {

             return  1;

        }  else  {

             return  0;

        }

    };

}

 

2.處理比較字元類型：

 代碼如下:

/**

 * 處理排序的欄位類型

 * 

 * @param sValue

 *            欄位值 預設為字元類型即比較ASCII碼

 * @param sDataType

 *            欄位類型 對於date只支援格式為mm/dd/yyyy或mmmm dd,yyyy(January 12,2004)

 * @return

 */

function  convert(sValue, sDataType) {

     switch  (sDataType) {

     case   "int" :

         return  parseInt(sValue);

     case   "float" :

         return  parseFloat(sValue);

     case   "date" :

         return   new  Date(Date.parse(sValue));

     default :

         return  sValue.toString();

    }

}

 

3.主函數：

 代碼如下:

/**

 * 通過表頭對錶列進行排序

 * 

 * @param sTableID

 *            要處理的表ID<table id=''>

 * @param iCol

 *            欄位列id eg: 0 1 2 3 ...

 * @param sDataType

 *            該欄位資料類型 int,float,date 預設情況下當字串處理

 */

function  sortTable(sTableID, iCol, sDataType) {

     var  oTable = document.getElementById(sTableID);

     var  oTBody = oTable.tBodies[0];

     var  colDataRows = oTBody.rows;

     var  aTRs =  new  Array;

     for  (  var  i = 0; i < colDataRows.length; i++) {

        aTRs[i] = colDataRows[i];

    }

     if  (oTable.sortCol == iCol) {

        aTRs.reverse();

    }  else  {

        aTRs.sort(generateCompareTRs(iCol, sDataType));

    }

     var  oFragment = document.createDocumentFragment();

     for  (  var  j = 0; j < aTRs.length; j++) {

        oFragment.appendChild(aTRs[j]);

    }

    oTBody.appendChild(oFragment);

    oTable.sortCol = iCol;

}

 

將以上問代碼封裝到一個js檔案中，在html頁面中引用。 

 

測試test.html: 

 

 代碼如下:

< html   xmlns = "http://www.w3.org/1999/xhtml" >

< title > 表列排序 </ title >

< script   type = "text/javascript"   src = "js/sortTable.js" > </ script >

< body >

< table   border = "1"   id = "tblSort" >

     < thead   style = "color: red; bgcolor: blank" >

         < tr >

             < th   onclick = " sortTable('tblSort',0);"   style = "cursor: pointer" > LastName </ th >

             < th   onclick = " sortTable('tblSort',1,'int');"   style = "cursor: pointer" > Number </ th >

             < th   onclick = " sortTable('tblSort',2,'date');"   style = "cursor: pointer" > Date </ th >

         </ tr >

     </ thead >

     < tbody >

         < tr >

             < td > A </ td >

             < td > 1 </ td >

             < td > 5/9/2008 </ td >

         </ tr >

         < tr >

             < td > B </ td >

             < td > 3 </ td >

             < td > 6/9/2008 </ td >

         </ tr >

         < tr >

             < td > D </ td >

             < td > 6 </ td >

             < td > 5/4/2008 </ td >

         </ tr >

         < tr >

             < td > E </ td >

             < td > -5 </ td >

             < td > 5/4/2007 </ td >

         </ tr >

         < tr >

             < td > H </ td >

             < td > 34 </ td >

             < td > 5/8/2008 </ td >

         </ tr >

         < tr >

             < td > C </ td >

             < td > 12 </ td >

             < td > 1/4/2018 </ td >

         </ tr >

     </ tbody >

</ table >

</ body >

</ html >