jquery tablesorter.js 支持中文表格排序改进


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:当然这个插件还有很多扩展功能,例如多列排序,各种例子等都有文档可以参考的。原文件和例子网上应该挺多的。有需要的 童鞋 可以留个邮箱给我

Javascript 相关文章推荐
实现JavaScript中继承的三种方式
Oct 16 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
babel基本使用详解
Feb 17 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
jquery 事件执行检测代码
Dec 09 #Javascript
为指定元素增加样式的js代码
Dec 09 #Javascript
javascript setTimeout和setInterval 的区别
Dec 08 #Javascript
javascript OFFICE控件测试代码
Dec 08 #Javascript
JavaScript Cookie 直接浏览网站分网址
Dec 08 #Javascript
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 #Javascript
JavaScript 利用Cookie记录用户登录信息
Dec 08 #Javascript
You might like
laravel批量生成假数据的方法
2019/10/09 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
js常见遍历操作小结
2019/06/06 Javascript
vue实例的选项总结
2020/06/09 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
简单了解Python生成器是什么
2019/07/02 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
机械制造专业个人的自我评价
2013/12/28 职场文书
医院护士的求职信
2014/01/03 职场文书
勾股定理课后反思
2014/04/26 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
李强优秀员工观后感
2015/06/16 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
关于EntityWrapper的in用法
2022/03/22 Java/Android