JS实现功能
var obj = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
create: function () {
return function () {
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function (destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
function Each(list, fun) {
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};
var TableOrder = Class.create(); ;
TableOrder.prototype = {
initialize: function (tbody) {
var oThis = this;
this.Body = obj(tbody); //tbody對象
this.Rows = []; //行集合
Each(this.Body.rows, function (o) { oThis.Rows.push(o); })
},
//排序并顯示
Sort: function (order) {
//排序
this.Rows.sort(this.Compare(order));
order.Down && this.Rows.reverse();
//顯示表格
var oFragment = document.createDocumentFragment();
Each(this.Rows, function (o) { oFragment.appendChild(o); });
this.Body.appendChild(oFragment);
},
//比較函數
Compare: function (order) {
var oThis = this;
return function (o1, o2) {
var value1 = oThis.GetValue(o1, order), value2 = oThis.GetValue(o2, order);
return value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
};
},
//讀取比對值
GetValue: function (tr, order) {
var data = tr.getElementsByTagName("td")[order.Index].getAttribute(order.Attribute);
//數據
switch (order.DataType.toLowerCase()) {
case "int":
return parseInt(data) || 0;
case "float":
return parseFloat(data) || 0;
case "date":
return Date.parse(data) || 0;
case "string":
default:
return data.toString() || "";
}
},
//添加并返回一行排序對象
Add: function (index, options, isSort) {
var oThis = this;
return new function () {
//默認性
this.Attribute = "innerHTML"; //讀取數据的類性
this.DataType = "string"; //數据類型
isSort ? this.Down = true : this.Down = false; //是否按排序 this.Down = false;
Object.extend(this, options || {});
//排序對象
this.Index = index;
this.Sort = function () { oThis.Sort(this); };
};
}
}
var SetOrder = function (objs, index, to, options, isSort) {
var o = obj(objs);
//添加一行排序對象
var order = to.Add(index, options, isSort);
o.onclick = function () {
//取相反排序
order.Down = !order.Down;
//設置樣式
Each(SetOrder._arr, function (o) { o.className = ""; })
o.className = order.Down ? "down" : "up";
//排序樣示
order.Sort();
///图片样式
isSortAddIamgeClass(order.Down, o);
return false;
}
//_arr是裡面排序數目
SetOrder._arr ? SetOrder._arr.push(o) : SetOrder._arr = [];
isSortFun(isSort, o);
}
function isSortFun(isSort, o) {
switch (isSort) {
case true:
case false:
o.onclick();
break;
default:
break;
}
}
///圖片變化
function isSortAddIamgeClass(isSort, o) {
switch (isSort) {
case true:
SortAddImageId("class_arrow_down", o);
break;
case false:
SortAddImageId("class_arrow_up", o);
break;
default:
break;
}
}
//添加圖片
function SortAddImageId(class_arrow, o) {
if (o.children.length > 0) {
o.removeChild(obj(o.id + "class_arrow_id"));
}
var span = document.createElement("span");
span.setAttribute("class", class_arrow);
span.setAttribute("id", o.id + "class_arrow_id");
o.appendChild(span);
}
///事件配置
window.onload = function()
{
var to = new TableOrder("idList"); ///需要排序的tbodyID
/// 1.事件觸發對象 2.是哪一列 {3.需要排序的屬性對象,數據類型} 4.默認排序 true 為升序|false 為降序 |"" 不排序
SetOrder("CompanyCode", 1, to, { Attribute: "sort", DataType: "string" }, false);
}
///表单代码
.class_arrow_up { background-image: url('../Image/trigger-up.png'); background-repeat: no-repeat; 10px; height: 7px; background-position: center center; display: inline-block; }
.class_arrow_down { background-image: url('../Image/trigger-arrow.png'); background-repeat: no-repeat; 10px; height: 7px; background-position: center center; display: inline-block; }
<table>
<thead>
<tr>
<td><a id="CompanyCode" herf="javascript:void(0)">点击我排序</a></td> </tr>
</thead>
<tbody id="idList">
<tr>
<td sort="af">排序</td> </tr>
</tbody>
</table>