js 实现 table 行排序

[align=center][b]js 实现 table 行排序[/b][/align]
闲时无聊,参考网上一些资料,写了一个 SortTableTool.js 实现table行排序.
关键代码如下:

/** object
* example : sortTableT.sort('sortTable',0,'Number')
*
**/
var sortTableT = new SortTableTool();
/** function
* SortTableTool
*/
function SortTableTool(){
/** is sort all tBodies */
this.isSortAlltBodies = false;
/** is first descending sort by sortColumn */
this.first_descending = false;
};
/** SortTableTool.sort
* tableId : table.id
* sortColumn : cell's index of row
* nodeType : {'Number' ,'String' ,'Date' ,'NoCaseString'}
*/
SortTableTool.prototype.sort = function(tableId, sortColumn ,nodeType ,_first_descending) {
var table = document.getElementById(tableId);
var _tBodies_length = this.isSortAlltBodies ? table.tBodies.length : 1;

var rowArray = new Array();
var rowIndex = 0;
for(var t=0 ; t< _tBodies_length ; t++){
var tableBody = table.tBodies[t];
var tableRows = tableBody.rows;
for (var i = 0; i < tableRows.length; i++) {
rowArray[rowIndex++] = tableRows[i];
}
}
if( !isNULL(_first_descending) && ( _first_descending == true || _first_descending == false)){
this.first_descending = _first_descending;
}else{
this.first_descending = false;
}
if (table.sortColumn == sortColumn) {
rowArray.reverse();
} else {
rowArray.sort(generateCompareTR(sortColumn, nodeType));
if(this.first_descending){
rowArray.reverse();
}
}
var tbodyFragment = document.createDocumentFragment();
for (var i = 0; i < rowArray.length; i++) {
tbodyFragment.appendChild(rowArray[i]);
}
tableBody.appendChild(tbodyFragment);
table.sortColumn = sortColumn;
}
/**
* generateCompareTR
* @return
*/
var generateCompareTR = function(sortColumn, nodeType) {
return function compareTR(trLeft, trRight) {
var left_firstChild = trLeft.cells[sortColumn].firstChild;
var right_firstChild = trRight.cells[sortColumn].firstChild;
var leftValue = convertData(left_firstChild == null ? "" :left_firstChild.nodeValue, nodeType);
var rightValue = convertData(right_firstChild == null ? "" :right_firstChild.nodeValue, nodeType);
if (leftValue < rightValue) {
return -1;
}else if (leftValue > rightValue) {
return 1;
}else{
return 0;
}
};
}
/**function : convertData
* _value : string value
* _dataType : {'Number' ,'String' ,'Date' ,'NoCaseString'}
* @return
*/
var convertData = function(_value, _dataType) {
var value = isNULL(_value) ? "" : _value;
var dataType = isNULL(_dataType) ? null : _dataType.toLowerCase();
var v_result = null;
switch (dataType) {
case "number":
v_result = new Number(value.trim().replace(/,/g,''));
return isNaN(v_result) ? null : v_result ;
case "string":
return value.toString();
case "nocasestring":
return value.toString().toLowerCase();
case "date":
v_result = new Date(Date.parse(value.trim().trimNBSP().replace(/-/g,'/')));
return isNaN(v_result) ? null : v_result;
default:
return value.toString();
}
}
/**
* isNULL()
* @return true or false
*/
var isNULL=function(v){
return v == null || typeof(v) == 'undefined';
}
/**
* String.prototype.trim()
* @return
*/
String.prototype.trim=function(){
return this.replace(/(^\s*)|(\s*$)/g, '');
}
String.prototype.ltrim=function(){
return this.replace(/(^\s*)/g,'');
}
String.prototype.rtrim=function(){
return this.replace(/(\s*$)/g,'');
}
/**
* String.prototype.trimNBSP()
* @return
*/
String.prototype.trimNBSP=function(){
return this.replace(/^[\s\u3000\xA0]+|[\s\u3000\xA0]+$/g, '');
}
String.prototype.ltrimNBSP=function(){
return this.replace(/^[\s\u3000\xA0]+/g,'');
}
String.prototype.rtrimNBSP=function(){
return this.replace(/[\s\u3000\xA0]+$/g,'');
}
//------------------ over --------------------------


效果如下图:
[img]http://dl.iteye.com/upload/attachment/602552/6c49f9e2-dae4-3267-b90e-9afab2014c18.png[/img]

测试多次,发现一个棘手的问题:
如果单元格中有   ,则 trim() 无法去除  (双字节空格).
尝试多次,终于找到解决办法.新加 trimNBSP() 方法可以去除  (双字节空格).

最后,附上源码.
源码中有 2 个demo示例页.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值