js对table排序(类似点击Excel表头排序)

这个星期已经结束了,我总结下这个星期以来的一点小小是收获,以前在项目中,我们需要对表格排序,我想到过两种解决方案:
   第一,用服务器事件来控制排序。优点:可以很好的控制需要排序的内容,在cs代码中通过事件来实现;缺点:那样的话很占用资源,而且效率不高.
   第二,在网上找了些小的js包来实现对Table的排序,优点:排序效率快;缺点:不能满足大多数程序员的需要,经常也会遇到在td中如果有html标签就不能排序了。经过了一段时间的思考和查询资料,在三个6小时工作中,我终于自己写出了一套很好的js对table排序的实例,下面就是这段代码的讲解

   我自己写的这段js有以下几个优点:可以对整数,小数,时间和字符来排序,可以控制需要排序的列,可以克服合并行和合并列的障碍,可以忽视td标签中一切html标签,可以保留原有行和列相应的样式,可以在表头显示当前排序的顺序(顺序或者是倒序)

   该方法名为sortTable(tid,std,col,dtype,this)一共需要传四个参数,tid表示当前需要排序表的id,std表示从第几列开始排序,col表示需要以哪列的数据为依据来排序,dtype表示当前列的数据类型,this直接传入 。
注意:第二个,第三个和第四个参数,第二个参数是从零开始的,比如需要从下面表格的编号为1的开始排序的话,那这个参数应该为2,因为前面是一个合并了行的列。第三个参数就是传入你点击这个表头的时候需要以哪列的数据为依据来排序,比如需要点击下面表头“分数”的列,我们可以依据小数那一列排序,也可以依据字符那一列排序,如果要是通过小数那一列排序这里传入的就应该是3了,如果需要依据字符那一列排序这里传入的就是4了(从0开始)。第四个参数就是当前需要排序列的数据类型,可以传入4个值:什么都不传,int,float,date。除了以上这些用法外,有一点需要注意,就是如果你对表尾的合并行不需要排序的话,需要设置不需要排序行的class='cols',这个是固定的,不允许在表的中间行使用class='cols'。如果依据时间排序,需要标准的yyyy年mm月dd日,yyyy-mm-dd,yyyy/mm/dd这三种形式 。在排序的列中的数据一定要是标准的和传入的数据类型一致,否则排序可能有错误,如果不允许对56.6sdfasdf进行float排序,这个结果可能不正确,也没有意义。

 

序号 出生年月 年龄 分数
一般 基础
1 1956-08-0215 56.7 aaa
2 1989-02-0143 98.2 ggg
3 1987-02-2323 75 bbb
4
1977-03-03
34 69.8 ddd
5 1943年03月0399 56.8 ccc
6 2010/08/02
21
77.7 eee
统计
总结

 

   以上这个表格是我进行各种测试的时候使用的,在IE6,7,8,9和火狐中没有任何问题(但是如果要是在IE6中使用的话,不能简单引用,加上charset="gb2312",这是因为IE6对编码的识别能力很差),可以直接排序。在排序后可以保留原有行和列,单元格各自的样式,不会丢失。大家有什么问题可以跟我交流。

   另外需要引入一个样式,也可以自己修改样式。

 

   下载地址如下:点击下载

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
表头即可实现排序的代码./*table排序步骤 1、给排序的表格加id 2、标题栏加<thead> 3、排序的内容加<tbody> 5、引入此js 6、在文档的末尾加入 [removed] var to = new TableOrder("idTable"), odID = to.creat({ type: "int", desc: false }), arrOrder = []; $$A.forEach([ ["idNum", { type: "int" }],//排序对象(对应列的id) ["idTitle", { index: 1 }], ["idExt", { index: 1, property: "_ext" }], ["idAddtime", { index: 2, type: "date" }], ["idSize", { index: 3, property: "_order", type: "int" }], ["idCheckbox", { index: 4, type: "bool", value: SetCheck }], ["idRadio", { index: 5, type: "bool", value: SetCheck }] ], 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);//记录排序项目(这里主要用来设置样式) }); [removed] 7、【排序对象】 属性 默认值//说明 index: 0,//td索引 property: "innerHTML",//获取数据的属性 type: "string",//比较的数据类型 desc: true,//是否按降序 compare: null,//自定义排序函数 value: null,//自定义取值函数 repair: this._repair,//是否解决checkbox和radio状态恢复bug onBegin: function(){},//排序前执行 onEnd: function(){}//排序后执行 */ //完整的示例 //<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> //<html> //<head> //<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> //<title>Table 排序</title> //[removed][removed] //</head> //<body> //<style type="text/css"> //.odTable {width:500px;border:1px solid #ebebeb;line-height:20px;font-size:12px;background:#FFF;} //.odTable thead {background-color:#ebebeb;} //.odTable span {color:#333;padding-right:15px;cursor:pointer;} //.odTable .desc, .odTable .asc {background:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/r_2.jpg) right center no-repeat;} //.odTable .desc {background-image:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/r_1.jpg);} //</style> //<table border="0" cellspacing="0" cellpadding="5" class="odTable" id="idTable"> // <thead> // <tr> // <td align="center"><span id="idNum">ID</span></td> // <td> <span id="idTitle">名称</span> / <span id="idExt">类型</span></td> // <td width="100" align="center"><span id="idAddtime">上传时间</span></td> // <td width="50" align="center"><span id="idSize">大小</span></td> // <td width="30" align="center"><span id="idCheckbox">C</span></td> // <td width="30" align="center"><span id="idRadio">R</span></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="433244">423.09 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></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="2560">2.5 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></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="3563">3.48 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></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="11397">11.13 K</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></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="108">108 b</td> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></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> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></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> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></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> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></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> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></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> // <td align="center"><input type="checkbox"/></td> // <td align="center"><input name="c" type="radio"/></td> // </tr> // </tbody> //</table> //<br /> //有中文的先排前面,再按时间倒序,ID倒序排序: //<input name="" type="button" value="Sort" id="idBtn" /> //[removed] //var to = new TableOrder("idTable"), odID = to.creat({ type: "int", desc: false }), arrOrder = []; //$$A.forEach([ // ["idNum", { type: "int" }], // ["idTitle", { index: 1 }], // ["idExt", { index: 1, property: "_ext" }], // ["idAddtime", { index: 2, type: "date" }], // ["idSize", { index: 3, property: "_order", type: "int" }], // ["idCheckbox", { index: 4, type: "bool", value: SetCheck }], // ["idRadio", { index: 5, type: "bool", value: SetCheck }] //], 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); } //[removed] //</body> //</html>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值