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 相关文章推荐
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
vue中可编辑树状表格的实现代码
Oct 31 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连接Access数据库的方法小结
2013/06/20 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
js实现列表向上无限滚动
2020/01/13 Javascript
python字符串替换示例
2014/04/24 Python
python爬虫实例详解
2018/06/19 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
旅游网创业计划书
2014/01/31 职场文书
法人代表证明书
2014/09/18 职场文书
在职员工证明书
2014/09/19 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
感恩父母主题班会
2015/08/12 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers