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 相关文章推荐
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
javascript中eval和with用法实例总结
Nov 30 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
jQuery Ajax全解析
Feb 13 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
使用JavaScript通过前端发送电子邮件
May 22 Javascript
ES2020 已定稿,真实场景案例分析
May 25 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
thinkphp控制器调度使用示例
2014/02/24 PHP
php构造函数与析构函数
2016/04/23 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
详解Python的循环结构知识点
2019/05/20 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
中国文明网签名寄语
2014/01/18 职场文书
班组安全员工作职责
2014/02/01 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
保护环境建议书100字
2014/05/13 职场文书
贷款担保申请书
2014/05/20 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
优秀班组申报材料
2014/12/25 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
Oracle用户管理及赋权
2022/04/24 Oracle