点击表头小图标实现排序

 

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

 

实现效果图：（模拟数据）

 

升序：

 

 

降序：

 

 

制作方法：

 

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脚本上用函数实现排序和点击表头排序，代码如下：

 

//添加排序函数