js实现table排序-sortable.js

方案一、引用sortable.js包

/*  <th class="thcss" style="width: 40px;" onclick="sortAble('tbThead',0,'int')">
                            序号
                        </th>
*/

function ieOrFireFox(ob) {
    var s = "";
    if (ob!=null&&ob!=undefined) {
        if (ob.text != null && ob.text != undefined)
            return ob.text;
        var s = ob.innerText;

    }
    return s.substring(0, s.length);
}  

//排序 tableId: 表的id,iCol:第几列 ；dataType：iCol对应的列显示数据的数据类型
function sortAble(tableId, iCol, dataType) {
    var table = document.getElementById(tableId);
    var tbody = table.tBodies[0];
    var colRows = tbody.rows;
    var aTrs = new Array;
         //将将得到的列放入数组，备用
    for (var i=0; i < colRows.length; i++) {
        aTrs[i] = colRows[i];
    }  

    //判断上一次排列的列和现在需要排列的是否同一个。
    if (table.sortCol == iCol) {
        aTrs.reverse();
    } else {
        //如果不是同一列，使用数组的sort方法，传进排序函数
        aTrs.sort(compareEle(iCol, dataType));
    }  

    var oFragment = document.createDocumentFragment();  

    for (var i=0; i < aTrs.length; i++) {
        oFragment.appendChild(aTrs[i]);
    }
    tbody.appendChild(oFragment);
    //记录最后一次排序的列索引
    table.sortCol = iCol;
}
//将列的类型转化成相应的可以排列的数据类型
function convert(sValue, dataType) {
    switch(dataType) {
    case "int":
        return parseInt(sValue);
    case "float":
        return parseFloat(sValue);
    case "date":
        return new Date(Date.parse(sValue));
    default:
        return sValue.toString();
    }
}  

//排序函数，iCol表示列索引，dataType表示该列的数据类型
function compareEle(iCol, dataType) {
    return function (oTR1, oTR2) {
        var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType);
        var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType);
        if (vValue1 < vValue2) {
            return -1;
        } else if (vValue1 > vValue2) {
            return 1;
        } else {
            return 0;
        }
    };
}  

方案二、

<script type="text/javascript" src="../../js/CJL.0.1.min.js"></script>
    <script type="text/javascript">
        var TableOrder = function (table, options) {
            this._checked = []; //存放checkbox和radio集合
            var tBody = $$(table).tBodies[0];
            this._tBody = tBody; //tbody对象
            this._rows = $$A.map(tBody.rows, function (o) { return o; }); //行集合
            this._setOptions(options);
        }
        TableOrder.prototype = {
            _repair: $$B.ie6 || $$B.ie7, //在ie6/7才需要修复bug
            //设置默认属性
            _setOptions: function (options) {
                this.options = {//默认值
                    index: 0, //td索引
                    property: "innerHTML", //获取数据的属性
                    type: "string", //比较的数据类型
                    desc: true, //是否按降序
                    compare: null, //自定义排序函数
                    value: null, //自定义取值函数
                    repair: this._repair, //是否解决checkbox和radio状态恢复bug
                    onBegin: function () { }, //排序前执行
                    onEnd: function () { } //排序后执行
                };
                $$.extend(this.options, options || {});
            },
            //排序并显示
            sort: function () {
                //没有排序对象返回
                if (!arguments.length) { return false };
                var orders = Array.prototype.slice.call(arguments);
                //执行附加函数
                orders[0].onBegin();
                //排序
                this._rows.sort($$F.bind(this._compare, this, orders, 0));
                //获取集合
                var repair = this._repair && $$A.some(orders, function (o) { return o.repair; });
                repair && this._getChecked();
                //显示表格
                var frag = document.createDocumentFragment();
                $$A.forEach(this._rows, function (o) { frag.appendChild(o); });
                this._tBody.appendChild(frag);
                //恢复状态
                repair && this._setChecked();
                //执行附加函数
                orders[0].onEnd();
            },
            //比较函数
            _compare: function (orders, i, tr1, tr2) {
                var od = orders[i], value1 = this._value(od, tr1), value2 = this._value(od, tr2)
        , result = od.compare ? od.compare(value1, value2) : //使用自定义排序函数
            typeof value2 == "string" ? value1.localeCompare(value2) : (value1 - value2);
                //如果result是0(值相同)同时有下一个排序对象的话继续比较否则根据desc修正结果并返回
                return !result && od[++i] ? this._compare(orders, i, tr1, tr2) : (od.desc ? -1 : 1) * result;
            },
            //获取比较值
            _value: function (order, tr) {
                var td = tr.cells[order.index], att = order.property
        , data = order.value ? order.value(td) : //使用自定义取值函数
            att in td ? td[att] : td.getAttribute(att);
                //数据转换
                switch (order.type.toLowerCase()) {
                    case "int":
                        return parseInt(data, 10) || 0;
                    case "float":
                        return parseFloat(data, 10) || 0;
                    case "date":
                        return Date.parse(data) || 0;
                    case "bool":
                        return data === true || String(data).toLowerCase() == "true" ? 1 : 0;
                    case "string":
                    default:
                        return data.toString() || "";
                }
            },
            //创建并返回一个排序对象
            creat: function (options) {
                return $$.extend($$.extend({}, this.options), options || {});
            },
            //获取要修正的checkbox和radio集合
            _getChecked: function () {
                this._checked = $$A.filter(this._tBody.getElementsByTagName("input"), function (o) {
                    return (($$B.ie6 && o.type == "checkbox") || o.type == "radio") &&
            o.checked != o.defaultChecked;
                });
            },
            //设置checkbox和radio集合的checked
            _setChecked: function () {
                $$A.forEach(this._checked, function (o) { o.checked = !o.defaultChecked; });
            }
        }
    </script>

<script type="text/javascript">
        var to = new TableOrder("idTable"), odID = to.creat({ type: "int", desc: false }), arrOrder = [];

        function ClearCss() { $$A.forEach(arrOrder, function (o) { o.className = ""; }); }

        function SetCheck(td) { return td.getElementsByTagName("input")[0].checked; }

        $$A.forEach([
    ["idCount", { index: 0, type: "int"}],
    ["idLiuShuiHao", { index: 1}],
    ["idYingShouHao", { index: 2}],
    ["idXYDWMC", { index: 3}],
    ["idZWMC", { index: 4}],
    ["idDanHao", { index: 5}],
    ["idShouRu", { index: 6, type: "int"}],
    ["idZhiChu", { index: 7, type: "int"}],
    ["idLZSJ", { index: 8}],
    ["idFKSJ", { index: 9}],
    ["idGZBM", { index: 10}],
    ["idJZY", { index: 11}],
    ["idFK", { index: 12}],
    ["idSG", { index: 13}],
    ["idBZ", { index: 14}]

], function (arr) {
    var o = $$(arr[0]), order = to.creat(arr[1]);
    order.onBegin = function () { ClearCss(); odID.desc = this.desc; }
    order.onEnd = function () {
        o.className = this.desc ? "desc" : "asc"; //设置样式
        this.desc = !this.desc; //取反排序
    }
    o.onclick = function () { to.sort(order, odID); }
    arrOrder.push(o); //记录排序项目（这里主要用来设置样式）
});

        $$("idNum").onclick();

        //////////////////////////////////////////////////////////////////////

        var od1 = to.creat({ index: 1, onEnd: ClearCss,
            compare: function (value1, value2) {
                var re = /[\u4E00-\u9FA5]/, v1 = re.test(value1), v2 = re.test(value2);
                return v1 == v2 ? 0 : (v1 ? 1 : -1);
            }
        })
    , od2 = to.creat({ index: 2, type: "date" }), od3 = to.creat({ type: "int" });

        $$("idBtn").onclick = function () { to.sort(od1, od2, od3); }
    </script>