JS table重新排序例子

最新推荐文章于 2021-10-13 17:32:33 发布

博智诚信

最新推荐文章于 2021-10-13 17:32:33 发布

阅读量1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u011425213/article/details/9406685

版权

javascript 专栏收录该内容

81 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Table 排序</title>
<style type="text/css">
.odTable {
   width:500px;
   border:1px solid #ebebeb;
   line-height:20px;
   font-size:12px;
   background:#FFF;
}
.odTable thead td {
   background-color:#ebebeb;
}
.odTable a {
   outline:none;/*ff*/
   hide-focus:expression(this.hideFocus=true);/*ie*/
}
.odTable a:link, .odTable a:visited, .odTable a:hover, .odTable a:active {
   text-decoration:none;
   color:#333;
   padding-right:15px;
}
.odTable a.up, .odTable a.down {
   background:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/r_2.jpg) right center no-repeat;
}
.odTable a.down {
   background-image:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/r_1.jpg);
}
</style>
<script type="text/javascript">
var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

var Extend = function(destination, source) {
   for (var property in source) {
       destination[property] = source[property];
   }
   return destination;
}

var Bind = function(object, fun) {
   var args = Array.prototype.slice.call(arguments).slice(2);
   return function() {
       return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
   }
}

var forEach = function(array, callback, thisObject){
   if(array.forEach){
       array.forEach(callback, thisObject);
   }else{
       for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); }
   }
}

var Map = function(array, callback, thisObject){
   if(array.map){
       return array.map(callback, thisObject);
   }else{
       var res = [];
       for (var i = 0, len = array.length; i < len; i++) { res.push(callback.call(thisObject, array[i], i, array)); }
       return res;
   }
}

var TableOrder = function(table, options) {
   this.tBody = $(table).tBodies[0];//tbody对象
   this.Rows = Map(this.tBody.rows, function(o){ return o; });//行集合

   this.SetOptions(options);
}
TableOrder.prototype = {
//设置默认属性
SetOptions: function(options) {
    this.options = {//默认值
       Index:       0,//td索引
       Attri:       "innerHTML",//获取数据的属性
       DataType:   "string",//比较的数据类型
       Desc:       true,//是否按降序
       Compare:   null,//自定义排序函数
       startSort:   function(){},//排序前执行
       endSort:   function(){}//排序后执行
    };
    Extend(this.options, options || {});
},
//排序并显示
Sort: function() {
   var orders = Array.prototype.slice.call(arguments);
   //没有排序对象返回
   if(!orders.length){ return false };
   //执行附加函数
   orders[0].startSort();
   //排序
   this.Rows.sort(Bind(this, this.Compare, orders, 0));
   //显示表格
   var oFragment = document.createDocumentFragment();
   forEach(this.Rows, function(o){ oFragment.appendChild(o); });
   this.tBody.appendChild(oFragment);
   //执行附加函数
   orders[0].endSort();
},
//比较函数
Compare: function(orders, i, o1, o2) {
   var order = orders[i], value1 = this.GetValue(order, o1), value2 = this.GetValue(order, o2)
       ,result = order.Compare ? order.Compare(value1, value2) ://使用自定义排序
           typeof value2 == "string" ? value1.localeCompare(value2) : (value1 - value2);
   //如果result是0(值相同)同时有排序对象的话继续比较否则根据Desc修正结果并返回
   return !result && orders[++i] ? this.Compare(orders, i, o1, o2) : (order.Desc ? -1 : 1) * result;
},
//获取比较值
GetValue: function(order, tr) {
   var td = tr.getElementsByTagName("td")[order.Index]
       , at = order.Attri, data = at in td ? td[at] : td.getAttribute(at);
   //数据转换
   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() || "";
   }
},
//创建并返回一个排序对象
Creat: function(options) {
   return Extend(Extend({}, this.options), options || {});
}
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="5" class="odTable" id="idTable">
   <thead>
       <tr>
           <td align="center"><a href="javascript:void(0)" id="idNum">ID</a></td>
           <td> <a href="javascript:void(0)" id="idTitle">名称</a> / <a href="javascript:void(0)" id="idExt">类型</a></td>
           <td width="150" align="center"><a href="javascript:void(0)" id="idAddtime">上传时间</a></td>
           <td width="50" align="center"><a href="javascript:void(0)" id="idSize">大小</a></td>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td align="center">1</td>
           <td _ext="htm">new.htm</td>
           <td align="center">2008/9/12</td>
           <td align="right" _order="433247">423.09 K</td>
       </tr>
       <tr>
           <td align="center">2</td>
           <td _ext="js">Scroller.js</td>
           <td align="center">2008/9/23</td>
           <td align="right" _order="2556">2.5 K</td>
       </tr>
       <tr>
           <td align="center">3</td>
           <td _ext="js">AlertBox.js</td>
           <td align="center">2008/9/23</td>
           <td align="right" _order="3565">3.48 K</td>
       </tr>
       <tr>
           <td align="center">4</td>
           <td _ext="xml">1.xml</td>
           <td align="center">2008/10/4</td>
           <td align="right" _order="11394">11.13 K</td>
       </tr>
       <tr>
           <td align="center">5</td>
           <td _ext="xml">4.xml</td>
           <td align="center">2008/10/4</td>
           <td align="right" _order="351">351 b</td>
       </tr>
       <tr>
           <td align="center">6</td>
           <td _ext="htm">news.htm</td>
           <td align="center">2008/10/4</td>
           <td align="right" _order="14074">13.74 K</td>
       </tr>
       <tr>
           <td align="center">7</td>
           <td _ext="js">function.js</td>
           <td align="center">2008/10/4</td>
           <td align="right" _order="2844">2.78 K</td>
       </tr>
       <tr>
           <td align="center">8</td>
           <td _ext="mp3">神秘园 - Nocturne.mp3</td>
           <td align="center">2008/9/20</td>
           <td align="right" _order="3111293">2.97 M</td>
       </tr>
       <tr>
           <td align="center">9</td>
           <td _ext="doc">详细功略+剧情流程（一）.doc</td>
           <td align="center">2009/2/2</td>
           <td align="right" _order="63488">62 K</td>
       </tr>
       <tr>
           <td align="center">10</td>
           <td _ext="doc">详细功略+剧情流程（二）.doc</td>
           <td align="center">2009/2/2</td>
           <td align="right" _order="164352">160.5 K</td>
       </tr>
       <tr>
           <td align="center">11</td>
           <td _ext="txt">禁止文件预览功能.txt</td>
           <td align="center">2008/8/7</td>
           <td align="right" _order="860">860 b</td>
       </tr>
       <tr>
           <td align="center">12</td>
           <td _ext="txt">超级无敌精彩的效果集合.txt</td>
           <td align="center">2009/2/2</td>
           <td align="right" _order="351">351 b</td>
       </tr>
   </tbody>
</table>
<br />
有中文的先排前面，再按时间倒序，ID倒序排序：
<input name="" type="button" value="Sort" id="idBtn" />

<script type="text/javascript">
var to = new TableOrder("idTable"), odID = to.Creat({ DataType: "int", Desc: false }), arrOrder = [];

function ClearCss(){ forEach(arrOrder, function(o){ o.className = ""; }); }

function SetOrder(obj, options){
   var o = $(obj), order = to.Creat(options);
   order.startSort = function(){ ClearCss(); odID.Desc = this.Desc; }
   order.endSort = function(){
       o.className = this.Desc ? "down" : "up";//设置样式
       this.Desc = !this.Desc;//取反排序
   }
   o.onclick = function(){ to.Sort(order, odID); return false; }
   arrOrder.push(o);//记录排序项目（这里主要用来设置样式）
}

SetOrder("idNum", { DataType: "int" });
SetOrder("idTitle", { Index: 1 });
SetOrder("idExt", { Index: 1, Attri: "_ext" });
SetOrder("idAddtime", { Index: 2, DataType: "date" });
SetOrder("idSize", { Index: 3, Attri: "_order", DataType: "int" });

$("idNum").onclick();

//

var od1 = to.Creat({ Index: 1, endSort: ClearCss,
   Compare: function(value1, value2) {
       var re = /[\u4E00-\u9FA5]/i, v1 = re.test(value1), v2 = re.test(value2);
       return v1 == v2 ? 0 : (v1 ? 1 : -1);
   }
})
, od2 = to.Creat({ Index: 2, DataType: "date" })
, od3 = to.Creat({ DataType: "int" });

$("idBtn").onclick = function(){ to.Sort(od1, od2, od3); }
</script>
</body>
</html>