jquery实现报表点击表头排序
利用参数和宏实现报表中点击表头排序功能，该方式实现的表头排序，需要进行页面刷新，实际上要重新进行报表运算。本文利用jquery和TableSort插件实现报表的客户端排序，能减轻对服务器造成的负担，也能给用户带来更好的体验。
插件使用说明：
插件功能：把html的table转化为可排序的table，支持页面静态排序，无刷新。支持多种数据类型排序（字符串，数字，日期等）
使用方式：
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对象)）
应用示例：
报表展现页面部分代码：
<head>
<title>sorttable</title>
<!-引入相关的样式文件和js文件>
<link href=”../Styles/Site.css” rel=”stylesheet” type=”text/css” />
<script src=”../Scripts/jquery-1.4.1.min.js” type=”text/javascript”></script>
<script src=”../Scripts/JQueryPlugin/TableSort.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function () {
$(“#report1″).sorttable({
ascImgUrl: “../Images/bullet_arrow_up.png”,
descImgUrl: “../Images/bullet_arrow_down.png”,
ascImgSize: “8px”,
descImgSize: “8px”,
onSorted: function (cell) {
//排序完成后，弹出排序列序号和名称
alert(cell.index() + ” — ” + cell.text());
});
});
</script>
</head>
……
<report:html name=”report1″ reportFileName=”测试/test.raq”
needSaveAsWord=”yes”
needSaveAsPdf=”yes”
needSaveAsExcel=”yes”
/>
报表模板：
示例数据位设计器demo数据库中的客户表。
其中：
A1单元格中使用HTML格式数据类型，内容为：
<tr role=”head” style=”background-color: #ddd;height:40px” >
<th sort=”true” style=”border:1px solid #999999;height:10px”>
客户ID
</th>
<th sort=”true” style=”border:1px solid #999999;”>
公司名称
</th>
<th sort=”true” style=”border:1px solid #999999;”>
电话
</th>
<th sort=”true” style=”border:1px solid #999999;”>
联系人姓名
</th>
<th sort=”true” style=”border:1px solid #999999;”>
联系人职务
</th>
</tr>
在该单元格中实现了table的表头，为表头行添加了属性role=”head”;并为表头行中的排序列添加了属性sort=”true”。
最后需要把该单元格的高度调整为0。
实现效果：
对公司名称升序排列效果：
点击公司名称降序排列后，弹出提示框：
