jquery tablesorter.js 支持中文表格排序改进
jquery tablesorter.js 支持中文表格排序改进
发布时间:2016-12-30 来源:查字典编辑
摘要:代码:仿一个网友的代码写的,不记得出自哪里了,改成可以支持中文排序,而且支持控件value的排序。没办法,能力有限,只能。。。复制代码代码如...

代码: 仿一个网友的代码写的,不记得出自哪里了,改成可以支持中文排序,而且支持控件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教程学习
编程开发子分类