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检测函数
May 31 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
微信小程序进入广告实现代码实例
Sep 19 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
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
python简单实现计算过期时间的方法
2015/06/09 Python
python连接字符串的方法小结
2015/07/13 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
python 美化输出信息的实例
2018/10/15 Python
Python用字典构建多级菜单功能
2019/07/11 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
python 伯努利分布详解
2020/02/25 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
法律专业应届本科毕业生求职信
2013/10/25 职场文书
日语专业推荐信
2013/11/12 职场文书
客服文员岗位职责
2013/11/29 职场文书
施工班组长岗位职责
2014/01/05 职场文书
迟到早退检讨书
2014/02/10 职场文书
护士节慰问信
2015/02/15 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android
Python进程池与进程锁之语法学习
2022/04/11 Python
nginx访问报403错误的几种情况详解
2022/07/23 Servers