Web前端开发之——表格高级排序（字符串，日期，整型，浮点型，以及图片等）
在项目中，经常会碰表格排序，最近整理了一个表格排序包括字符串，日期，整型，浮点型，以及图片等高级排序，将服务器功能转移到前端实现，减轻了服务器压力，功能比较强大。
1 (function () { 2 /** 3 @ Author: Kingwell leng 4 @ Date : 2012-8-22 5 @ Blog : http://kingwell-leng.iteye.com/ 6 @ Email : jinhua.leng##gmail.com 7 */ 8 //创建闭包以及下面的空间命名，避免项目开发中与其它内容有冲突 9 if (!window.kw) { 10 window.kw = {}; 11 }; 12 kw = { 13 convert : function (sValue, sDataType) { //类型转，根据不同类型数据排序，比如，整型，日期，浮点，字符串，接受两个参数，一个是值，一个是排序的数据类型 14 switch (sDataType) { 15 case "int": 16 return parseInt(sValue); 17 case "float": 18 return parseFloat(sValue); 19 case "date": 20 return new Date(Date.parse(sValue)); 21 default: 22 return sValue.toString(); 23 } 24 }, 25 geterateCompareTRs : function (iCol, sDataType) { //比较函数，用于sort排序用 26 return function compareTRs(oTR1, oTR2) { 27 var vValue1, 28 vValue2; 29 if (oTR1.cells[iCol].getAttribute("value")) { //用于高级排序，比如图片，添加一个额外的属性来排序 30 vValue1 = kw.convert(oTR1.cells[iCol].getAttribute("value"), sDataType); 31 vValue2 = kw.convert(oTR2.cells[iCol].getAttribute("value"), sDataType); 32 } else { 33 vValue1 = kw.convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType); 34 vValue2 = kw.convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType); 35 } 36 if (vValue1 < vValue2) { 37 return -1; 38 } else if (vValue1 > vValue2) { 39 return 1; 40 } else { 41 return 0; 42 } 43 } 44 }, 45 tabSort : function (sTableID, iCol, sDataType) { //排序函数，sTableID为目标,iCol哪列排序，为必需，sDataType可选 46 var oTable = document.getElementById(sTableID); 47 var oTBody = oTable.tBodies[0]; 48 var colDataRows = oTBody.rows; 49 var aTRs = []; 50 for (var i = 0; i < colDataRows.length; i++) { 51 aTRs[i] = colDataRows[i]; 52 }; 53 if (oTable.sortCol == iCol) { //如果已经排序，则倒序 54 aTRs.reverse(); 55 } else { 56 aTRs.sort(this.geterateCompareTRs(iCol, sDataType)); 57 } 58 var oFragment = document.createDocumentFragment(); 59 for (var j = 0; j < aTRs.length; j++) { 60 oFragment.appendChild(aTRs[j]); 61 }; 62 oTBody.appendChild(oFragment); 63 oTable.sortCol = iCol; //设置一个状态 64 } 65 }; 66 })();
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn"> 3 <head> 4 <title>kingwell</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <style type="text/css"> 7 html,body{font-family:Arial, Helvetica, sans-serif; font-size:12px} 8 table{ border-collapse:collapse} 9 td,th{padding:5px; border:1px solid #CCC; font-weight:lighter;} 10 th{ cursor:pointer} 11 </style> 12 <script type="text/javascript"> 13 14 </script> 15 </head> 16 <body> 17 <table width="400" id="tab"> 18 <thead> 19 <tr> 20 <th width="100" onclick="kw.tabSort('tab',0)">First Name</th> 21 <th width="100" onclick="kw.tabSort('tab',1)">Last Name</th> 22 <th width="100" onclick="kw.tabSort('tab',2,'date')">Date</th> 23 <th width="100" onclick="kw.tabSort('tab',3,'int')">Int</th> 24 </tr> 25 </thead> 26 <tbody> 27 <tr> 28 <td>Kingwell</td> 29 <td>Leng</td> 30 <td>3/10/2012</td> 31 <td>1</td> 32 </tr> 33 <tr> 34 <td>1aJim</td> 35 <td>Green</td> 36 <td>3/5/2012</td> 37 <td>2</td> 38 </tr> 39 <tr> 40 <td>Kate</td> 41 <td>Bin</td> 42 <td>1/2/2012</td> 43 <td>3</td> 44 </tr> 45 <tr> 46 <td>Zte</td> 47 <td>Ri</td> 48 <td>5/3/2012</td> 49 <td>33</td> 50 </tr> 51 <tr> 52 <td>Bee</td> 53 <td>Dd</td> 54 <td>8/1/2012</td> 55 <td>15</td> 56 </tr> 57 </tbody> 58 </table> 59 60 61 </body> 62 </html>
为了现实结构，表现，行为相分离的原则，尽量与HTML分离，这里只是为了演示而矣。
