方案一、引用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>