点击表头小图标实现排序
?
集智数据平台的报表中的排序效果是多种多样的，先前已经有过很多点击报表头实现排序的例子，这里我们再介绍一个，在报表头上引入小图标（向上、向下的箭头）来点击，实现字段的排序效果。
?
实现效果图：（模拟数据）
?
升序：
?
?
降序：
?
?
制作方法：
?
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’);
?
?????????????????? ?? })
?
?????????????????? })?
?
???????? })
?
?
更多了解各种复杂问题的处理，可以参考：灵活订阅和调度，丰富的图表展现导出打印；几十种静动态统计图和自定义功能满足各种图表展示需求。
