jquery实现报表点击表头排序

 

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

插件使用说明:
 插件功能:把htmltable转化为可排序的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或者tdjquery对象)

应用示例:
报表展现页面部分代码:
<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

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


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

 

 


版权声明:本文为guxinghan12345原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。