zoukankan      html  css  js  c++  java
  • 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-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对编码的识别能力很差),可以直接排序。在排序后可以保留原有行和列,单元格各自的样式,不会丢失。大家有什么问题可以跟我交流。

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

       下载地址如下:点击下载

  • 相关阅读:
    (OK) 从do_register_framebuffer开始的函数调用关系
    Linux内核基础--事件通知链(notifier chain)
    Java EE即将死去,毫无疑问!- Docker & 微服务 & DevOps
    GUI显示系统之SurfaceFlinger--- Gralloc与Framebuffer
    (OK) kernel create framebuffer device
    Android: 显示系统模块加载以及调用流程 HWComposer::loadFbHalModule() -> framebuffer_open()
    (OK) Android x86如何启动到图形界面&init.sh分析.md
    error: call to '__creat_missing_mode' declared with attribute error
    Android
    Android hwcomposer模块接口
  • 原文地址:https://www.cnblogs.com/nlx0201/p/1908134.html
Copyright © 2011-2022 走看看