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