Table sort,html table 列排序

/* By Sk 2013.01.30*/
var tableSort = function () {
    this.initialize.apply(this, arguments);
}

tableSort.prototype = {

    initialize: function (tableId, clickRow, startRow, endRow, classUp, classDown, selectClass) {
        this.Table = document.getElementById(tableId);
        this.rows = this.Table.rows; //所有行 
        this.Tags = this.rows[clickRow - 1].cells; //标签td 
        this.up = classUp;
        this.down = classDown;
        this.startRow = startRow;
        this.selectClass = selectClass;
        this.endRow = (endRow == 999 ? this.rows.length : endRow);
        this.T2Arr = this._td2Array(); //所有受影响的td的二维数组 
        this.setShow();
    },
    //设置标签切换 
    setShow: function () {
        var defaultClass = this.Tags[0].className;
        for (var Tag, i = 0; Tag = this.Tags[i]; i++) {
            Tag.index = i;
            addEventListener(Tag, 'click', Bind(Tag, statu));
        }
        var _this = this;
        var turn = 0;
        function statu() {
            for (var i = 0; i < _this.Tags.length; i++) {
                _this.Tags[i].className = defaultClass;
            }
            if (turn == 0) {
                addClass(this, _this.down)
                _this.startArray(0, this.index);
                turn = 1;
            } else {
                addClass(this, _this.up)
                _this.startArray(1, this.index);
                turn = 0;
            }
        }
    },
    //设置选中列样式 
    colClassSet: function (num, cla) {
        //得到关联到的td 
        for (var i = (this.startRow - 1); i < (this.endRow); i++) {
            for (var n = 0; n < this.rows[i].cells.length; n++) {
                removeClass(this.rows[i].cells[n], cla);
            }
            addClass(this.rows[i].cells[num], cla);
        }
    },
    //开始排序 num 根据第几列排序 aord 逆序还是顺序 
    startArray: function (aord, num) {
        var afterSort = this.sortMethod(this.T2Arr, aord, num); //排序后的二维数组传到排序方法中去 
        this.array2Td(num, afterSort); //输出 
    },
    //将受影响的行和列转换成二维数组 
    _td2Array: function () {
        var arr = [];
        for (var i = (this.startRow - 1), l = 0; i < (this.endRow); i++, l++) {
            arr[l] = [];
            for (var n = 0; n < this.rows[i].cells.length; n++) {
                arr[l].push(this.rows[i].cells[n].innerHTML);
            }
        }
        return arr;
    },
    //根据排序后的二维数组来输出相应的行和列的 innerHTML 
    array2Td: function (num, arr) {
        this.colClassSet(num, this.selectClass);
        for (var i = (this.startRow - 1), l = 0; i < (this.endRow); i++, l++) {
            for (var n = 0; n < this.Tags.length; n++) {
                this.rows[i].cells[n].innerHTML = arr[l][n];
            }
        }
    },
    //传进来一个二维数组,根据二维数组的子项中的w项排序,再返回排序后的二维数组 
    sortMethod: function (arr, aord, w) {
        //var effectCol = this.getColByNum(whichCol); 
        arr.sort(function (a, b) {
            x = killHTML(a[w]);
            y = killHTML(b[w]);
            x = x.replace(/,/g, '');
            y = y.replace(/,/g, '');
            switch (isNaN(x)) {
                case false:
                    return Number(x) - Number(y);
                    break;
                case true:
                    return x.localeCompare(y);
                    break;
            }
        });
        arr = aord == 0 ? arr : arr.reverse();
        return arr;
    }
}
/*-----------------------------------*/
function addEventListener(o, type, fn) {
    if (o.attachEvent) { o.attachEvent('on' + type, fn) }
    else if (o.addEventListener) { o.addEventListener(type, fn, false) }
    else { o['on' + type] = fn; }
}

function hasClass(element, className) {
    var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
    return element.className.match(reg);
}

function addClass(element, className) {
    if (!this.hasClass(element, className)) {
        element.className += " " + className;
    }
}

function removeClass(element, className) {
    if (hasClass(element, className)) {
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
        element.className = element.className.replace(reg, ' ');
    }
}

var Bind = function (object, fun) {
    return function () {
        return fun.apply(object, arguments);
    }
}
//去掉所有的html标记 
function killHTML(str) {
    return str.replace(/<[^>]+>/g, "");
}
var temp = new tableSort('tableid', 1, 2, 999, 'up', 'down', 'hov');
//tableid  表格ID
//1,第一行为列头
//2,第二行开始排序
//999,第999行结束(999为最后)
//up 升序标签样式
//down 降序标签样式
//hov 选中列样式

项目需要html表格有排序的功能,网上找了好多都不合适,而且用起来很麻烦,要加各种id, onclik,colum_index之类的,甚是麻烦,不就排个序嘛,还得话花时间学习怎么用你的js,学完发现还是有BUG.. 于是自己写了一个,50行代码左右,自己用的爽歪歪,支持chorme,ie其他的没环境测试。如有发现BUG请告知,谢谢! /************************************************************************************************** JS排序表格,您只需要在原本的html中添加一句 Auteror: BYDARKST mailto: bydarkst@163.com 始终坚持用最简单的思路,最简洁的写法,打造效率更高,易用性更高的软件! ****************************************************************************************************/ //一句话调用,自动搜索所有table的所有排序,支持日期,支持 存在或不存在 window.onload = function(){RegisterAllTableSort(-1);} //接口1:设置id 为tableid的表格第 col 排序,col为-1时自动选取所有 function RegisterTableSortById(tableid, col){ RegisterTableSort(document.getElementById(tableid), col) } //接口2:自动设置所有table的 col 排序 function RegisterAllTableSort(col){ var tableNodes = document.getElementsByTagName("table"); for(var i=0; i<tableNodes.length; i++) RegisterTableSort(tableNodes[i], col); } //接口3:立即对 tableid 的col 进行排序 function SortTableNow(tableid, col){ SortTableByCol(document.getElementById(tableid), col); }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值