纯JS操作服务器绑定控件(Repeat)实现表头升降排序

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;     width: 10px;     height: 7px;     background-position: center center;     display: inline-block; }

.class_arrow_down {     background-image: url('../Image/trigger-arrow.png');     background-repeat: no-repeat;     width: 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>

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/tx720/p/3484223.html