您的位置:首页 > Web前端 > JavaScript

自己写的一个JS表格分页代码第一版

2011-07-05 10:53 369 查看
自己写了一个JS的分写代码工具,一般如果提到JS分页,我首先想到的是EXT的分页,但是为了使用一个分写就把EXT引入进来似乎有点杀鸡用牛刀的感觉,而且也懒得去网上找别人的代码,就自己根据自己的需求写了个,也可以说是EXT表格分页代码的一个简单版。

/**
* JS 表格分页工具
*
* 作者:ben 时间:2011-5-13
*
* 功能有限,仅限于对table进行分页,只支持后台json格式传递过来的值
*
* 使用案例:
* //定义头部的二维数组如下格式:
* var header = new Array();
* header[0]=["头部1","对应数据名或者索引0","td宽度0","最大字符数"];
* header[1]=["头部1","对应数据名或者索引1","td宽度1","最大字符数"];
* header[2]=["头部2","对应数据名或者索引2","td宽度2","最大字符数"];
* ......
* header
=["头部n","对应数据名或者索引n","td宽度3","最大字符数"];
*
* //其中对应数据名或者索引名可以自己构造输出的格式对象,比如我要输出一个超链接,这个超链接里面有个动态的参数是需要从JSON数据里面解析的,就可以使用
* //类似以下数据方式使用:<a class='hs' href='${base}/service/def/left.html?wt_esb_service_defDomain.id=%{service_def_id}%'>%{service_def_id}%</a>
* //其中%{对应数据名或者索引n}%直接会替换掉JSON里面的数据然后替换到上面的字符格式去。
*
* //定义对象,将对象设置为window的一个属性,便与在换页展示的时候回调自己.
* //参数说明
* //start:从数据的第几个索引开始,默认为0
* //limit:每一页展示的数据数量,默认为10
* //cellStep:没一行展示的数据条数,默认为1
* //tableId:需要分页的表格ID编号,必须传
* //headTrClassName:头部样式名,可为空
* //trClassName:普通行的样式名,可为空
* //header:头部定义的二唯数组,不能为空.
* window.pagging = new table_pagging({limit:2,tableId:'testTable',header:header,headTrClassName:'lmheadbg2',trClassName:'bgbg2'});
* //最后一步就是分页输出
* pagging.pagging(JSON的数据);
*/
1. 这里有几个地方要说明下,第一版本只支持JSON的数据格式,但是有需要通过更改pagging这个方法解析数据的方式即可,在第一版暂时不实现,因为我也不清楚实际中使用那些格式较多,希望有人能给出好的建议,我去扩充,可以在下个版本实现。
2.使用window.pagging的原因是因为我需要获取当前对象的名称,这个实现方案有两种,一种是自己设置对象名,还有就是现在这种方式,将对象设置成window对象的一个属性,然后再对象内去遍历window的属性是否与自己相等来获取对象名称,对象名称主要在页面上用于构建多个分页表格,我在创建表格分页哪一行的时候内嵌了一个表格(见createPageTr方法),这个表格的名字是根据objectName+"assrotCurrentIndexTable"来生成的(不过后面我考虑其实也可以使用需要分页的表格名字来代替对象名也是一样的,当初脑子秀逗了下使用了这种方式).
3.header[0]=["头部1","对应数据名或者索引0","td宽度0","最大字符数"];的第二个数据也就是"对应数据名或者索引0"可以自定义数据显示名称,比如<a href="">%{对应数据名或者索引}%</a>,%{}%是替代模板符.
PS:让我写代码可以,让我来描述功能有时候就描述不清楚,具体见本文附件的示例test.html,资源文件在http://download.csdn.net/source/3418810可以下载到,资源分是0分,欢迎拍砖。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐