方案一、引用sortable.js包
/* <th class="thcss" style="width: 40px;" οnclick="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>