这个星期已经结束了,我总结下这个星期以来的一点小小是收获,以前在项目中,我们需要对表格排序,我想到过两种解决方案:
第一,用服务器事件来控制排序。优点:可以很好的控制需要排序的内容,在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-02 |
15 |
56.7 |
aaa |
2 |
1989-02-01 |
43 |
98.2 |
ggg |
3 |
1987-02-23 |
23 |
75 |
bbb |
4 |
1977-03-03
|
34
|
69.8 |
ddd |
5 |
1943年03月03 |
99 |
56.8 |
ccc |
6 |
2010/08/02 |
|
77.7 |
eee |
统计 |
总结 |
以上这个表格是我进行各种测试的时候使用的,在IE6,7,8,9和火狐中没有任何问题(但是如果要是在IE6中使用的话,不能简单引用,加上charset="gb2312",这是因为IE6对编码的识别能力很差),可以直接排序。在排序后可以保留原有行和列,单元格各自的样式,不会丢失。大家有什么问题可以跟我交流。
另外需要引入一个样式,也可以自己修改样式。
下载地址如下:点击下载
分享到:
相关推荐
table表头点击可实现排序,用JavaScript编写,可修改使用
用js实现点击表头对Table排序,支持td中包含html标签,支持tr,td的原来样式不丢失,支持选择从第几行开始排序,支持时间,小数,整数和字符的排序
使用JavaScript实现表格排序,点击表头切换升序降序,非常简单
js实现点击table表头字段,根据字段排序例子。在表中添加js代码后可以自动排序,非常方便!
点击表头即可实现排序的代码./*table排序步骤 1、给排序的表格加id 2、标题栏加 3、排序的内容加 5、引入此js 6、在文档的末尾加入 [removed] var to = new TableOrder("idTable"), odID = to.creat({ type: "int", ...
在页面里用js 对页面table数据排序,点击表头直接排序
绝对是好东西,非常简单实用,表头有箭头表明是降序还是升序一目了然,非常实用
绝对是好东西 如果你刚好找这方面的资料要实现点击表头就产生排序,绝对实用,物超所值 轻量级JavaScript表格内容排序代码 对生产的html进行排序,不需要与数据库交互,速度性能好
javascript Table排序javascript Table排序javascript Table排序javascript Table排序
table表头排序
js-table-sorter(纯js实现点击表头排序)
table2excel.js 用于直接将table转换成Excel的js工具包
//需要排序的表头,以th开头 $('#keyword_num, #impressions, #click, #click_rate, #conversions, #cost, #conversion_unitprice') .each(function(){ var th = $(this), thIndex = th.index(), inverse = ...
web中table表格点击表头排序文件 文件使用说明可以参考: http://blog.csdn.net/baidu_25310663/article/details/45920939
纯JS将table表格导出到excel的方法 html <div > ('tableExcel','myDiv')">IE导出Excel方法</button> ('tableExcel')">Chrome导出Excel</button> </div> <div id="myDiv"> <table id="tableExcel" ...
html表格table的表头排序,js代码fastunit使用案例
js 实现 table 行排序
资源提供js操作html、table导出生成excel文件,代码简介易懂
SWT表格管理类,包括表头排序事件,table宽度自适应事件,隔行颜色事件
基于Jquery的前台按表头排序table tr th