prophetceo吧 关注:2贴子:45
  • 0回复贴,共1
今天由于业务需要,要在客户端对一个报表进行排序,所以就想到了jquery插件,下面简单介绍一下配置步骤,备忘:
1、下载jquery-latest.js和jquery.tablesorter.js包,如果想让报表更美观,也可以下载官方推荐的几款布局文件。
2、将1下载的包放到报表页面项目某一目录下,我是在页面当前目录下新建了一个js目录,将jquery-latest.js和jquery.tablesorter.js放到里面,另外新建了一个自己的custom.js用来写客户端代码,同时我也建了一个css目录用来为报表页面更换皮肤,里面放了blue、green等不同的皮肤。
3、报表页面引入资源文件
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<link rel="stylesheet" type="text/css" href="css/blue/style.css">
4、表格加上class="tablesorter",另外比较重要的就是要加上thead和tbody标签,thead标签里的tr标签要加上class="header"才能控制显示皮肤图片,切忌。
5、在custom.js中编写对报表的基本要求,比如每一列按照什么数据类型排序,哪几列初始化时升序或者降序排列等等,注意列的索引是从0开始的,简单贴一点代码以明义:
$(document).ready(function(){
$("#mytable").tablesorter({ //mytable是报表table的id
1: {sorter:"integer"}, //表格的第二列按照integer数据类型进行排序
2: {sorter:"integer"},
3: {sorter:"double"},
sortList: [[1,1],[2,0],[3,1]] //初始化表格时第二列按照降序排序,第三列按照升序排列,第四列按照降序排列
});
} );


1楼2013-10-17 17:43回复