jquery tablesorter.js 支持中文表格排序改進(jìn)
更新時間:2009年12月09日 04:46:32 作者:
之前研究過一下表格排序。上網(wǎng)找了一些代碼研究了一下。勉強(qiáng)做了一個用著。后面發(fā)現(xiàn)當(dāng)動態(tài)給單元格加超鏈接,或者列中存在一些空白,就排序不了了。
代碼: 仿一個網(wǎng)友的代碼寫的,不記得出自哪里了,改成可以支持中文排序,而且支持控件value的排序。 沒辦法,能力有限,只能。。。
//轉(zhuǎn)換器,將列的字段類型轉(zhuǎn)換為可以排序的類型: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);
}
//排序函數(shù)產(chǎn)生器
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
}
}
/*排序方法(主函數(shù))
sTableID 表格的id
iCol表示列索引
1,當(dāng)不是input類型時,iCol表示的是tr的第幾個td;
2,當(dāng)是input類型時,則iCol表示在這個tr中的第幾個input;
sDataType表示該cell的數(shù)據(jù)類型或者該input的value 的數(shù)據(jù)類型. 默認(rèn)是string,也可以int, float. cn是中文
isinput表示排序的內(nèi)容是不是input(1是, 0否)
sDec表示倒序還是順序(desc, 默認(rèn)順序), 避免出現(xiàn)input值改變之后再排序時候出現(xiàn)直接倒序的情況。
*/
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;
//將所有列放入數(shù)組
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,一直很想學(xué)的。可惜公司用不到,其實是學(xué)了之后還是覺得用的到。 知道jqery后就看了一下別人的插件。jquery.tablesorter.js 這個插件功能挺強(qiáng)大。試了一下,發(fā)現(xiàn)不支持中文的。 看看源碼在說
/* 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;
};
一開始還以為會遇到一些困難的。沒想到,我只需要把他的排序函數(shù)改一下就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:當(dāng)然這個插件還有很多擴(kuò)展功能,例如多列排序,各種例子等都有文檔可以參考的。原文件和例子網(wǎng)上應(yīng)該挺多的。有需要的 童鞋 可以留個郵箱給我
復(fù)制代碼 代碼如下:
//轉(zhuǎn)換器,將列的字段類型轉(zhuǎn)換為可以排序的類型: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);
}
//排序函數(shù)產(chǎn)生器
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
}
}
/*排序方法(主函數(shù))
sTableID 表格的id
iCol表示列索引
1,當(dāng)不是input類型時,iCol表示的是tr的第幾個td;
2,當(dāng)是input類型時,則iCol表示在這個tr中的第幾個input;
sDataType表示該cell的數(shù)據(jù)類型或者該input的value 的數(shù)據(jù)類型. 默認(rèn)是string,也可以int, float. cn是中文
isinput表示排序的內(nèi)容是不是input(1是, 0否)
sDec表示倒序還是順序(desc, 默認(rèn)順序), 避免出現(xiàn)input值改變之后再排序時候出現(xiàn)直接倒序的情況。
*/
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;
//將所有列放入數(shù)組
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,一直很想學(xué)的。可惜公司用不到,其實是學(xué)了之后還是覺得用的到。 知道jqery后就看了一下別人的插件。jquery.tablesorter.js 這個插件功能挺強(qiáng)大。試了一下,發(fā)現(xiàn)不支持中文的。 看看源碼在說
復(fù)制代碼 代碼如下:
/* 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;
};
一開始還以為會遇到一些困難的。沒想到,我只需要把他的排序函數(shù)改一下就ok啦.
復(fù)制代碼 代碼如下:
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:當(dāng)然這個插件還有很多擴(kuò)展功能,例如多列排序,各種例子等都有文檔可以參考的。原文件和例子網(wǎng)上應(yīng)該挺多的。有需要的 童鞋 可以留個郵箱給我
您可能感興趣的文章:
- 33種Javascript 表格排序控件收集
- js實現(xiàn)表格字段排序
- javascript 表格排序和表頭浮動效果(擴(kuò)展SortTable)
- js 表格排序(編輯+拖拽+縮放)
- js 靜態(tài)HTML表格排序功能實現(xiàn)
- jquery.tableSort.js表格排序插件使用方法詳解
- Vue.js實現(xiàn)多條件篩選、搜索、排序及分頁的表格功能
- JS實現(xiàn)點擊表頭表格自動排序(含數(shù)字、字符串、日期)
- JS實現(xiàn)table表格數(shù)據(jù)排序功能(可支持動態(tài)數(shù)據(jù)+分頁效果)
- js實現(xiàn)表格單列按字母排序
相關(guān)文章
從零開始學(xué)習(xí)jQuery (一) 開天辟地入門篇
本篇文章是入門第一篇, 主要是簡單介紹jQuery, 通過簡單示例指導(dǎo)大家如何編寫jQuery代碼以及搭建開發(fā)環(huán)境. 詳細(xì)講解了如何在Visual Studio中配合使用jQuery.2010-10-10jQuery動態(tài)生成不規(guī)則表格(前后端)
這篇文章主要介紹了jQuery動態(tài)生成不規(guī)則表格的實現(xiàn)代碼,非常不錯,具有參考借鑒價值,需要的朋友參考下2017-02-02jquery中ajax調(diào)用json數(shù)據(jù)的使用說明
jquery里提供了便捷的ajax運用,下面總結(jié)我自己的一些經(jīng)驗2011-03-03jQuery Attributes(屬性)的使用(二、類篇)
本系列文章主要講述jQuery框架的屬性(Attributes)使用方法,我將以實例方式進(jìn)行講述,以簡單,全面為基礎(chǔ),不會涉及很深,我的學(xué)習(xí)方法:先入門,后進(jìn)階!2009-12-12基于jQuery和CSS3實現(xiàn)APPLE TV海報視差效果
這篇文章主要介紹了基于jQuery和CSS3實現(xiàn)APPLE TV海報視差效果,需要的朋友可以參考下2017-06-06jquery動態(tài)調(diào)整div大小使其寬度始終為瀏覽器寬度
需要設(shè)置寬度為整個瀏覽器寬度的div,當(dāng)然我們可以使用相對布局的方式做到這一點,下面是具體實現(xiàn),大家可以參考下2014-06-06基于Bootstrap和jQuery構(gòu)建前端分頁工具實例代碼
本文給大家介紹基于Bootstrap和jQuery構(gòu)建前端分頁工具實例代碼,包括前端分頁的優(yōu)缺點和解決辦法,對jquery bootstrap分頁知識感興趣的朋友一起通過本文學(xué)習(xí)吧2016-11-11