Web前端开发之——报表高级排序(字符串,日期,整型,浮点型,以及图片等)
Web前端开发之——表格高级排序(字符串,日期,整型,浮点型,以及图片等)
在项目中,经常会碰表格排序,最近整理了一个表格排序包括字符串,日期,整型,浮点型,以及图片等高级排序,将服务器功能转移到前端实现,减轻了服务器压力,功能比较强大。
(function () { /** @ Author: Kingwell leng @ Date : 2012-8-22 @ Blog : http://kingwell-leng.iteye.com/ @ Email : jinhua.leng##gmail.com */ //创建闭包以及下面的空间命名,避免项目开发中与其它内容有冲突 if (!window.kw) { window.kw = {}; }; kw = { convert : function (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(); } }, geterateCompareTRs : function (iCol, sDataType) { //比较函数,用于sort排序用 return function compareTRs(oTR1, oTR2) { var vValue1, vValue2; if (oTR1.cells[iCol].getAttribute("value")) { //用于高级排序,比如图片,添加一个额外的属性来排序 vValue1 = kw.convert(oTR1.cells[iCol].getAttribute("value"), sDataType); vValue2 = kw.convert(oTR2.cells[iCol].getAttribute("value"), sDataType); } else { vValue1 = kw.convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType); vValue2 = kw.convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType); } if (vValue1 < vValue2) { return -1; } else if (vValue1 > vValue2) { return 1; } else { return 0; } } }, tabSort : function (sTableID, iCol, sDataType) { //排序函数,sTableID为目标,iCol哪列排序,为必需,sDataType可选 var oTable = document.getElementById(sTableID); var oTBody = oTable.tBodies[0]; var colDataRows = oTBody.rows; var aTRs = []; for (var i = 0; i < colDataRows.length; i++) { aTRs[i] = colDataRows[i]; }; if (oTable.sortCol == iCol) { //如果已经排序,则倒序 aTRs.reverse(); } else { aTRs.sort(this.geterateCompareTRs(iCol, sDataType)); } var oFragment = document.createDocumentFragment(); for (var j = 0; j < aTRs.length; j++) { oFragment.appendChild(aTRs[j]); }; oTBody.appendChild(oFragment); oTable.sortCol = iCol; //设置一个状态 } }; })();
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn"> <head> <title>kingwell</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> html,body{font-family:Arial, Helvetica, sans-serif; font-size:12px} table{ border-collapse:collapse} td,th{padding:5px; border:1px solid #CCC; font-weight:lighter;} th{ cursor:pointer} </style> <script type="text/javascript"> </script> </head> <body> <table width="400" id="tab"> <thead> <tr> <th width="100" onclick="kw.tabSort('tab',0)">First Name</th> <th width="100" onclick="kw.tabSort('tab',1)">Last Name</th> <th width="100" onclick="kw.tabSort('tab',2,'date')">Date</th> <th width="100" onclick="kw.tabSort('tab',3,'int')">Int</th> </tr> </thead> <tbody> <tr> <td>Kingwell</td> <td>Leng</td> <td>3/10/2012</td> <td>1</td> </tr> <tr> <td>1aJim</td> <td>Green</td> <td>3/5/2012</td> <td>2</td> </tr> <tr> <td>Kate</td> <td>Bin</td> <td>1/2/2012</td> <td>3</td> </tr> <tr> <td>Zte</td> <td>Ri</td> <td>5/3/2012</td> <td>33</td> </tr> <tr> <td>Bee</td> <td>Dd</td> <td>8/1/2012</td> <td>15</td> </tr> </tbody> </table> </body> </html>
为了现实结构,表现,行为相分离的原则,尽量与HTML分离,这里只是为了演示而矣。