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.getAttribute("value")) { //用于高级排序，比如图片，添加一个额外的属性来排序vValue1 = kw.convert(oTR1.cells.getAttribute("value"), sDataType);vValue2 = kw.convert(oTR2.cells.getAttribute("value"), sDataType);} else {vValue1 = kw.convert(oTR1.cells.firstChild.nodeValue, sDataType);vValue2 = kw.convert(oTR2.cells.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;var colDataRows = oTBody.rows;var aTRs = [];for (var i = 0; i < colDataRows.length; i++) {aTRs = colDataRows;};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);};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" >First Name</th> <th width="100" >Last Name</th> <th width="100" >Date</th> <th width="100" >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分离，这里只是为了演示而矣。
页:
[1]