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>

纯JS操作服务器绑定控件(Repeat)实现表头升降排序的更多相关文章

  1. js操作Attribute,控件的各种属性.....maxlength,style...

    Attribute是属性的意思,文章仅对部分兼容IE和FF的Attribute相关的介绍. attributes:获取一个属性作为对象 getAttribute:获取某一个属性的值setAttribu ...

  2. WebForm服务器验证控件与前端js自定义验证共同使用

        问题: 前端aspx页面中需要在button中添加OnClientClick事件后,这个OnClientClick所执行的自定义的客户端js验证:这个时候,所有的服务器验证控件都会失效!   ...

  3. JS与APP原生控件交互

    "热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显 ...

  4. [js开源组件开发]js多选日期控件

    js多选日期控件 详情请见:http://www.lovewebgames.com/jsmodule/calendar.html 它的github地址:https://github.com/tianx ...

  5. asp.net学习之 数据绑定控件--表格绑定控件

    原文:asp.net学习之 数据绑定控件--表格绑定控件     数据绑定 Web 服务器控件是指可绑定到数据源控件,以实现在 Web 应用程序中轻松显示和修改数据的控件.数据绑定 Web 服务器控件 ...

  6. js插件---Bootstrap 树控件

    js插件---Bootstrap 树控件 一.总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...

  7. 开发类似"音速启动"的原创工具简码"万能助手"的过程中对ztree.js与win标准控件treeview、HTMLayout树形框等优缺点的比较

    在开发类似"音速启动"的桌面快捷方式管理软件简码"万能助手"的早期规划中,曾经考虑过几种树形框方案: ztree.js.win标准控件treeview.HTML ...

  8. js进阶 9-10 html控件如何实现点击自动选择控件内容

    js进阶 9-10  html控件如何实现点击自动选择控件内容 一.总结 一句话总结: 1.在click事件中,如果focus,那就select 2.blur 1.html中控件添加两种方式? 在表单 ...

  9. Dev控件GridView单元格绑定控件

    Dev控件GridView单元格绑定控件 //文本按钮 RepositoryItemButtonEdit btnFields = new RepositoryItemButtonEdit();//创建 ...

随机推荐

  1. ArrayList、LinkedList、HashMap的遍历及遍历过程中增、删元素

    ArrayList.LinkedList.HashMap是Java中常用到的几种集合类型,遍历它们是时常遇到的情况.当然还有一些变态的时候,那就是在遍历的过程中动态增加或者删除其中的元素. 下面的例子 ...

  2. easily add files to META-INF in NetBeans

    http://georgeinfo.blog.163.com/blog/static/16368334120101019104044650/ ————————————————————————————— ...

  3. 值栈与ognl

    ValueStack (值栈): 1.贯穿整个Action的生命周期(每个Action类的对象实例都拥有一个ValueStack对象).相当于一个数据的中转站.在其中保存当前Action对象和其他相关 ...

  4. awk的二维数组

    awk是不支持二维数组的,它的底层是一维数组,将两个key拼接为一维数组的key. 如下是其初始化和遍历 awk 'BEGIN{ for(i=0;i< 3; ++i) for(j = 0; j ...

  5. Delphi使用TStringHash实现建立类(有点像反射)

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  6. Gym 100507G The Debut Album (滚动数组dp)

    The Debut Album 题目链接: http://acm.hust.edu.cn/vjudge/contest/126546#problem/G Description Pop-group & ...

  7. srcelement、parentElement

    srcElement 是Dom事件中的事件最初指派到的元素. 比如有一个div,里面有一个按钮.你响应div的onclick事件,但实际上,你单击的只是它内部的按钮,那么,srcElement指向的, ...

  8. Nginx 禁止IP访问

    我们在使用的时候会遇到很多的恶意IP攻击,这个时候就要用到Nginx 禁止IP访问了.下面我们就先看看Nginx的默认虚拟主机在用户通过IP访问,或者通过未设置的域名访问(比如有人把他自己的域名指向了 ...

  9. Listener 监听器

    Listener的定义与作用 监听器Listener就是在application,session,request三个对象创建.销毁或者往其中添加修改删除属性时自动执行代码的功能组件. Listener ...

  10. iOS开发-block使用与多线程

    Block Block封装了一段代码,可以在任何时候执行 Block可以作为函数参数或者函数的返回值,而其本身又可以带输入参数或返回值. 苹果官方建议尽量多用block.在多线程.异步任务.集合遍历. ...