欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

点击表头小图标实现排序

程序员文章站 2022-03-29 12:17:21
...

 

集智数据平台的报表中的排序效果是多种多样的,先前已经有过很多点击报表头实现排序的例子,这里我们再介绍一个,在报表头上引入小图标(向上、向下的箭头)来点击,实现字段的排序效果。

 

实现效果图:(模拟数据)

 

升序:

点击表头小图标实现排序
            
    
    博客分类: 集智 表头小图标报表排序代码 

 

 

降序:

点击表头小图标实现排序
            
    
    博客分类: 集智 表头小图标报表排序代码 

 

 

制作方法:

 

1、  Img文件夹中放所需小图标,如下:

点击表头小图标实现排序
            
    
    博客分类: 集智 表头小图标报表排序代码 

 

 

2、  在展现报表的JSP上加入一段引入JS脚本的代码,如下:

点击表头小图标实现排序
            
    
    博客分类: 集智 表头小图标报表排序代码 

 

 

3、  在此JSP上引入img文件夹中的小图标,代码如下:

 

.row-up{background-image:url(’../img/up.png’);background-position:center right;background-repeat:no-repeat; border:1px solid #D4D4D4; font-weight:bold;}

 

.row-down{background-image:url(’../img/down.png’);background-position:center right;background-repeat:no-repeat; border:1px solid #D4D4D4; font-weight:bold;}

 

4、在report_sort.js脚本上用函数实现排序和点击表头排序,代码如下:

 

//添加排序函数

 

         $.fn.sort = function(fun){ 

 

                   var d = this;

 

                   var dom = this.find(’tr:gt(0)’);

 

                   dom.each(function(i){ 

 

                      dom.each(function(j){ 

 

                          if(j<=i){ 

 

                             return true; 

 

                          } 

 

                          var dom1 = dom.eq(i);

 

                          var dom2 = dom.eq(j);

 

                          if(fun(dom1,dom2)){ 

 

                             dom1.before(dom2); 

 

                             dom = d.find(’tr:gt(0)’);

 

                          } 

 

                      }) 

 

                   }) 

 

         } 

 

         // 设置点击表头排序

 

         $(function(){ 

 

                   $(’#report1 tr:nth-child(1)’).find(’td’).each(function(i){ 

 

                      $(this).toggle(function(){ 

 

                          $(this).parent().parent().sort(function(dom1,dom2){ 

 

                              var value1 = parseInt(dom1.find(’td:eq(’+i+’)').text()); 

 

                              var value2 = parseInt(dom2.find(’td:eq(’+i+’)').text()); 

 

                              return value1<value2; 

 

                          })

 

                          init_table();

 

                          $(this).addClass(’row-down’);

 

                      },function(){ 

 

                          $(this).parent().parent().sort(function(dom1,dom2){ 

 

                              var value1 = parseInt(dom1.find(’td:eq(’+i+’)').text()); 

 

                              var value2 = parseInt(dom2.find(’td:eq(’+i+’)').text()); 

 

                              return value1>value2;

 

                          })

 

                          init_table();

 

                          $(this).addClass(’row-up’);

 

                      })

 

                   }) 

 

         })

 

 


更多了解各种复杂问题的处理,可以参考:灵活订阅和调度,丰富的图表展现导出打印几十种静动态统计图和自定义功能满足各种图表展示需求