js对table排序(类似点击Excel表头排序)
2010-10-22 14:59
337 查看
这个星期已经结束了,我总结下这个星期以来的一点小小是收获,以前在项目中,我们需要对表格排序,我想到过两种解决方案:
第一,用服务器事件来控制排序。优点:可以很好的控制需要排序的内容,在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排序,这个结果可能不正确,也没有意义。
以上这个表格是我进行各种测试的时候使用的,在IE6,7,8,9和火狐中没有任何问题(但是如果要是在IE6中使用的话,不能简单引用,加上charset="gb2312",这是因为IE6对编码的识别能力很差),可以直接排序。在排序后可以保留原有行和列,单元格各自的样式,不会丢失。大家有什么问题可以跟我交流。
另外需要引入一个样式,也可以自己修改样式。
下载地址如下:点击下载
第一,用服务器事件来控制排序。优点:可以很好的控制需要排序的内容,在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 | 21 | 77.7 | eee |
统计 | ||||
总结 |
以上这个表格是我进行各种测试的时候使用的,在IE6,7,8,9和火狐中没有任何问题(但是如果要是在IE6中使用的话,不能简单引用,加上charset="gb2312",这是因为IE6对编码的识别能力很差),可以直接排序。在排序后可以保留原有行和列,单元格各自的样式,不会丢失。大家有什么问题可以跟我交流。
另外需要引入一个样式,也可以自己修改样式。
下载地址如下:点击下载
相关文章推荐
- js对table排序(类似点击Excel表头排序)
- js/jquery常用方法(replaceALl、new Map()、点击th(表头)或拖动tr只前台排序)
- Js-点击表头进行排序
- js中table的值进行点击排序
- Html Table用JS导出excel格式问题 导出EXCEL后单元格里的000412341234会变成412341234 7-14 会变成 2018-7-14(7月14) 自定义格式 web利用table表格生成excel格式问题 js导出excel增加表头、mso-number-format定义数据格式 数字输出格式转换 mso-number-format:"\@"
- table点击表头排序
- JS实现点击表头表格自动排序(含数字、字符串、日期)
- js 点击表头进行排序
- jquery点击table表头排序
- JS实现的点击表头排序功能示例
- web中table表格点击表头排序
- JS实现点击表头表格自动排序(含数字、字符串、日期)
- 实现Repeater控件点击表头排序功能
- EasyUI Datagrid 分页的情况下实现点击表头的小三角图标对数据库中所有数据重新排序
- jquery实现报表点击表头排序
- 固定表头的JS:How to fix a part of a table
- ie9兼容模式下可用,js导出table到excel
- js 导出 html 中的 table 表格为 excel