Posted in Javascript onDecember 09, 2009
代码: 仿一个网友的代码写的,不记得出自哪里了,改成可以支持中文排序,而且支持控件value的排序。 没办法,能力有限,只能。。。
//转换器,将列的字段类型转换为可以排序的类型:String,int,float 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(); } } // 汉字排序方法 function chrComp(a,b) { return a.localeCompare(b); } //排序函数产生器 function generateCompareTRs(iCol, sDataType,isinput,sDec) { return function compareTRs(oTR1, oTR2) { if(isinput == 1) { var vValue1 = convert(oTR1.getElementsByTagName("input")[iCol].value); var vValue2 = convert(oTR2.getElementsByTagName("input")[iCol].value); } else { var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType); var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType); } if(sDec=='desc') { if(sDataType=='int') { return vValue1 == vValue2 ? 0 :(vValue1 - vValue2 <0 ? 1 : -1); } else if(sDataType =='cn') { if(chrComp(vValue1,vValue2)>0) { return -1; } else if(chrComp(vValue1,vValue2)<0) { return 1; } else { return 0; } } else { if (vValue1 > vValue2) { return -1; } else if (vValue1 < vValue2) { return 1; } else { return 0; } } } else if(sDec=='asc') { if(sDataType=='int') { return vValue1 == vValue2 ? 0 :(vValue1 - vValue2 >0 ? 1 : -1); } else if(sDataType =='cn') { return chrComp(vValue1,vValue2); } else { if (vValue1 > vValue2) { return 1; } else if (vValue1 < vValue2) { return -1; } else { return 0; } } } }; } //重置单元格的classname function ChangeClsName(tr,num) { num = num%2?1:2; num.toString(); for ( var i = 0 ; i < tr.childNodes.length; i ++ ) { tr.childNodes[i].className = "row" + num } } /*排序方法(主函数) sTableID 表格的id iCol表示列索引 1,当不是input类型时,iCol表示的是tr的第几个td; 2,当是input类型时,则iCol表示在这个tr中的第几个input; sDataType表示该cell的数据类型或者该input的value 的数据类型. 默认是string,也可以int, float. cn是中文 isinput表示排序的内容是不是input(1是, 0否) sDec表示倒序还是顺序(desc, 默认顺序), 避免出现input值改变之后再排序时候出现直接倒序的情况。 */ function sortTable(sTableID, iCol, sDataType, isinput, sDec) { 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]; } aTRs.sort(generateCompareTRs(iCol, sDataType,isinput, sDec)); var oFragment = document.createDocumentFragment(); for (var i=0; i < aTRs.length; i++) { oFragment.appendChild(aTRs[i]); ChangeClsName(aTRs[i],i); } oTBody.appendChild(oFragment); }
这个星期终于有时间研究一下jquery,一直很想学的。可惜公司用不到,其实是学了之后还是觉得用的到。 知道jqery后就看了一下别人的插件。jquery.tablesorter.js 这个插件功能挺强大。试了一下,发现不支持中文的。 看看源码在说
/* sorting methods */ function multisort(table,sortList,cache) { if(table.config.debug) { var sortTime = new Date(); } var dynamicExp = "var sortWrapper = function(a,b) {", l = sortList.length; for(var i=0; i < l; i++) { var c = sortList[i][0]; var order = sortList[i][1]; var s = (getCachedSortType(table.config.parsers,c) == "text") ? ((order == 0) ? "sortText" : "sortTextDesc") : ((order == 0) ? "sortNumeric" : "sortNumericDesc"); var e = "e" + i; dynamicExp += "var " + e + " = " + s + "(a[" + c + "],b[" + c + "]); "; dynamicExp += "if(" + e + ") { return " + e + "; } "; dynamicExp += "else { "; } for(var i=0; i < l; i++) { dynamicExp += "}; "; } dynamicExp += "return 0; "; dynamicExp += "}; "; eval(dynamicExp); cache.normalized.sort(sortWrapper); if(table.config.debug) { benchmark("Sorting on " + sortList.toString() + " and dir " + order+ " time:", sortTime); } return cache; }; function sortText(a,b) { return ((a < b) ? -1 : ((a > b) ? 1 : 0)); }; function sortTextDesc(a,b) { return ((b < a) ? -1 : ((b > a) ? 1 : 0)); }; function sortNumeric(a,b) { return a-b; }; function sortNumericDesc(a,b) { return b-a; }; function getCachedSortType(parsers,i) { return parsers[i].type; };
一开始还以为会遇到一些困难的。没想到,我只需要把他的排序函数改一下就ok啦.
function sortText(a,b) { return a.localeCompare(b); }; function sortTextDesc(a,b) { return -a.localeCompare(b); };
测试一下。中文,中英文一起,中间有列为空等都没问题了。
本来这个插件是有一个jquery.tablesorter.pack.js 压缩过后的才9kb,可是我只会改jquery.tablesorter.js (23kb)。要怎么把它变成jquery.tablesorter.pack.js 就不知道了。
ps:当然这个插件还有很多扩展功能,例如多列排序,各种例子等都有文档可以参考的。原文件和例子网上应该挺多的。有需要的 童鞋 可以留个邮箱给我
jquery tablesorter.js 支持中文表格排序改进
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@