jquery实现报表点击表头排序

 

利用参数和宏实现报表中点击表头排序功能，该方式实现的表头排序，需要进行页面刷新，实际上要重新进行报表运算。本文利用jquery和TableSort插件实现报表的客户端排序，能减轻对服务器造成的负担，也能给用户带来更好的体验。

插件使用说明：
 插件功能：把html的table转化为可排序的table，支持页面静态排序，无刷新。支持多种数据类型排序（字符串，数字，日期等）l
 使用方式：l
1、给标题行添加自定义属性role="head"
2、标题行中需要排序的列添加自定义属性sort="true"
3、调用扩展方法，如：$("#report1").sorttable();
参数说明：
sorttingMsg:      排序时显示的文字（默认为"排序中……"）,
sorttingMsgColor: 排序时显示的文字的颜色（默认为"#FFF"）,
allowMask:        是否允许遮罩层（默认为true）,
maskOpacity:      遮罩层的透明度（默认为"0.5"）,
maskColor:        遮罩层的颜色（默认为"#000"）,
ascImgUrl:        升序图片（默认为不显示）,
ascImgSize:       升序图片大小（默认为"8px"）,
descImgUrl:       降序图片（默认为不显示）,
descImgSize:      降序图片大小（默认为"8px"）
onSorted(cell):   排序完成回调函数（参数：cell，当前排序列的头(一般是th或者td的jquery对象)）

应用示例：
报表展现页面部分代码：


引入相关的样式文件和js文件>
   
   
   
   

……
测试/test.raq"
  needSaveAsWord="yes"
  needSaveAsPdf="yes"
  needSaveAsExcel="yes"
/>
报表模板：
 
示例数据位设计器demo数据库中的客户表。
其中：
A1单元格中使用HTML格式数据类型，内容为：


客户ID


公司名称
 

电话
 

联系人姓名


联系人职务

 
在该单元格中实现了table的表头，为表头行添加了属性role=”head”;并为表头行中的排序列添加了属性sort="true"。
最后需要把该单元格的高度调整为0。

实现效果：
对公司名称升序排列效果：

 
点击公司名称降序排列后，弹出提示框：