使用PHP和jQuery制作分页和表格Word文档格式.docx
《使用PHP和jQuery制作分页和表格Word文档格式.docx》由会员分享，可在线阅读，更多相关《使用PHP和jQuery制作分页和表格Word文档格式.docx（13页珍藏版）》请在冰豆网上搜索。
10./*这部分是处理where子句的，和本文关系不大，略过*/
11.$whereArray=array（
12.'
`article`.`article_category_id`'
=>
$this->
getParam（Project_Table:
article_category_id'
））,
13.'
`article`.`article_status_id`'
article_status_id'
14.）;
15.$whereString='
'
16.foreach（$whereArrayas$key=>
$value）{
17.if（!
empty（$value））{
18.if（$key=='
&
&
$value=='
-1'
）{
19.$whereString.="
AND{$key}ISNULL"
20.}else{
21.$whereString.="
AND{$key}='
{$value}'
"
22.}
23.}
24.}
25.if（!
empty（$whereString））{
26.$whereString=substr（$whereString,strlen（'
AND'
））;
27.}else{
28.$whereString=null;
29.}
30./*以上是处理where子句的*/
31.$maxGetRows=Project_Config:
PAGINATOR_ITEM_COUNT_PER_PAGE;
//设置每页显示的记录数量
32.$articles=$mArticle->
getArticles（$whereString,$sortBy,$maxGetRows,（$pageNumber-1）*$maxGetRows）;
//从数据库中读取数据
33.$countArticles=Project_Table:
getLastFoundRows（）;
//获得符合条件的数据总数
34.if（empty（$articles）&
!
empty（$countArticles））{
35.//如果没有取到任何记录，而且记录总数不为空，说明当前页码超出范围了，所以处理一下
36.$articles=$mArticle->
getArticles（$whereString,$sortBy,$maxGetRows,null）;
37.$pageNumber=1;
38.}
39.$pDate=Project_Datetime:
getInstance（）;
//时间处理工具，和本文无关
40.foreach（$articlesas$key=>
$article）{
41.$articles[$key][Project_Table:
modified'
）]=$pDate->
getUserTimeFromTime（$article[Project_Table:
）],true）;
//把时间戳转换为用户的当地时间，和本文无关
42.}
43.$paginator=Zend_Paginator:
factory（$countArticles,'
Null'
//调用Zend提供的分页适配器，参数1是总记录数，参数2是适配器的名字
44.$paginator->
setCurrentPageNumber（$pageNumber）;
//告诉分页器当前页码
45.$pages=$paginator->
getPages（）;
//得到了前面提到的所有参数，后面我会打印它，这样你会直观的看到其内容
46.$this->
view->
articles=$articles;
47.$this->
pages=$pages;
48.//以下处理是为了页面中的下拉选单提供选项数据，和本文关系不大
49.if（!
$this->
isPost（））{
50.$mpArticle=newMapper_Article（）;
51.$this->
elementArticleStatusId=$mpArticle->
getElement（'
array（Project_Mapper:
OPTIONS_NULLABLE=>
true,Project_Mapper:
OPTIONS_DEFAULT=>
52.$_categories=$mArticle->
getAllowAppendArticleArticleCategories（null,null,null,null,true）;
53.$categories=array（
54.$this->
translate（Model_Article:
NO_CATEGORY）=>
55.）;
56.foreach（$_categoriesas$key=>
$row）{
57.$categories[$row[Project_Table:
article_category'
name'
）]]=$row[Project_Table:
）];
58.}
59.$mpArticle=newMapper_Article（）;
60.$this->
elementArticleCategories=$mpArticle->
OPTIONS_IN_ARRAY=>
$categories,Project_Mapper:
true））;
61.}
62.}
$pages中的内容我打印了一下，这样更直观。
如下。
63.stdClassObject
64.（
65.[pageCount]=>
3
66.[itemCountPerPage]=>
10
67.[first]=>
1
68.[current]=>
2
69.[last]=>
70.[previous]=>
71.[next]=>
72.[pagesInRange]=>
Array
73.（
74.[1]=>
75.[2]=>
76.[3]=>
77.）
78.
79.[firstPageInRange]=>
80.[lastPageInRange]=>
81.[currentItemCount]=>
82.[totalItemCount]=>
21
83.[firstItemNumber]=>
11
84.[lastItemNumber]=>
20
85.）
ZendFramework的开发人员确实很认真，返回的参数非常充分，不需要任何的补充。
顺便提一下以上代码中未体现的细节，当使用post方式访问该页面时会得到json数据而不是html。
这个细节写在init（）方法中，代码如下：
86.publicfunctioninit（）{
87.if（$this->
88.$this->
_helper
89.->
contextSwitch（）
90.->
addActionContext（'
articles'
json'
）//就是这里咯
91.->
trashcategory'
）
92.->
trasharticle'
93.->
movecategory'
94.->
initContext（'
95.}
96.}
HTML示例代码详解
这次只贴出关键的内容哦。
97.<
formmethod="
POST"
action="
<
?
phpecho$this->
url（）?
>
onsubmit="
98.try{
99.returnpBase.submitForm（this,true,null,loadArticlesGrid）;
//使用ajax提交表单，回调函数为loadArticlesGrid
100.}catch（e）{
101.alert（e.message）;
102.returnfalse;
103.};
104.<
divclass="
beforeGridclearFloat"
105.<
floatLeft"
106.<
!
--Pagination是我写的helper，关于这个东西后面解释-->
107.<
pagination（$this->
pages->
current,'
）?
108.<
/div>
109.<
--截图中右侧的文档选择器-->
110.<
floatRight"
111.<
search_select（$this->
elementArticleStatusId,array（'
onchange'
pBase.paginator（'
div.pagination[name=articles]'
goto'
112.<
elementArticleCategories,array（'
113.<
iconButton（'
add'
$this->
actionTitle（'
createarticle'
）,"
window.open（'
{$this->
url（array（'
action'
editarticle'
））}'
）"
!
Project_Session:
getInstance（）->
isAllow（'
））?
114.<
115.<
116.<
--这是表格部分，先不说它-->
117.<
tableid="
articleGridTable"
class="
gridTable"
…<
/table>
118.<
--底部的分页栏-->
119.<
afterGridclearFloat"
120.<
121.<
false）?
122.<
123.<
124.<
/form>
125.<
scripttype="
text/javascript"
126.$（document）.ready（function（）{
127.//这句话就是调用js绘制分页的，第一个参数是目标容器，第二个参数是相关参数组成的json对象（就是$pages）啦）
128.pBase.paginator（'
{$jsonPages}）;
129.}）;
130.functionloadArticlesGrid（response）{
131.//ajax回调，此时重绘分页
132.pBase.paginator（'
response.pages）;
133.}
134.<
/script>
里面用到了一个helper，因为这样可以避免反复去写类似的html内容。
带有两个参数，第一个是当前的页码，第二个用于控制是否输出表单元素（默认为true，输出）。
当第二个参数为默认值true时，其输出如下：
135.<
inputtype="
hidden"
name="
page"
value="
2"
/>
sortby"
divclass="
paginationclearFloat"
articles"
为false时其输出为：
136.<
对于参数为true的输出，您可能会问为什么sortby没有初始值？
确实没想过，我也不希望用户在url中手动添加sortby参数。
Javascript代码说明
具体的代码很长，就不贴出来了，可以自行查看，仅列举配置信息和例子。
137.var_configs={
138.boxClass:
'
pagination'
//分页的总体样式名称
139.firstClass:
first'
//首页所使用的样式名称
140.firstText:
false,//首页使用的文本，false表示使用数字
141.lastClass:
last'
//尾页所使用的样式名称
142.lastText:
false,//尾页使用的文本，false表示使用数字
143.previousClass:
previous'
//上一页使用的样式名称
144.previousText:
//上一页所使用的文本
145.nextClass:
next'
//下一页所使用的样式名称
146.nextText:
//下一页所使用的文本
147.pageClass:
//每个页面元素所使用的样式名称
148.currentPageClass:
current'
//当前页所使用的样式名称
149.pagesElementClass:
pages'
//所有页码的公共父节点使用的样式名称
150.infoElementClass:
info'
//信息节点的公共父节点使用的样式名称
151.infoElementCountPageClass:
countPage'
//总页数信息的样式名称
152.infoElementCurrentPageClass:
//当前页信息的样式名称
153.infoElementCountItemsClass:
countItems'
//总条目数量信息的样式名称
154.infoElementPageItemsClass:
pageItems'
//页内条目数量信息的样式名称
155.infoElementFirstItemClass:
//本页内第一个条目的序号信息的样式名称
156.infoElementLastItemClass:
//本页内最后一个条目的序号信息的样式名称
157.ajaxBoxClass:
ajaxBox'
//ajax读取状态容器的样式名称
158.ajaxLoader:
function（）{
159.return$（'
ajaxLoader16"
160.},//获取一个ajax读取中的html
161.pageCount:
0,//总页数
162.itemCountPerPage:
0,//页内最大条目数
163.totalItemCount:
0,//总条目数
164.pagesInRange:
[],//页码列表
165.firstPageInRange:
false,//页码列表中的第一个页码
166.lastPageInRange:
false,//页码列表中的最后一个页码
167.currentItemCount:
0,//本页条目数
168.firstItemNumber:
1,//第一条的序号
169.lastItemNumber:
1,//最后一条的序号
170.previous:
false,//上一页的页码
171.first:
false,//第一页的页码
172.last:
false,//最后一页的页码
173.current:
1,//当前页的页码
174.next:
false,//下一页的页码
175.referenceForm:
form:
//引用的表单
176.referencePageItem:
//表单中表示页码的表单元素名称
177.};
功能原型：
pBase.paginator（string|HtmlElementselector,jsonObject|stringconfigs[,number]）
参数说明：
selector:
选择器，分页的Html内容将注入到该选择器指定的元素。
configs:
配置信息，如果是对象，那么利用该对象声明的参数重绘分页（此时忽略第三个参数number），如果是字符串，字符串应为removeItem,addItem或者goto之一。
number:
在configs为字符串时需要该参数。
说明如下：
configs为removeItem:
number表示当前页内有多少行已经删除；
configs为addItem:
number表示当前页内新增了多少行；
configs为goto:
number表示目标页码；
分别示例如下。
178.pBase.paginator（‘#pager’,{}）;
//在$（‘#pager’）内显示分页信息
179.pBase.paginator（‘#pager’,‘removeItem’,1）;
//页内条目数及总条目数-1
180.pBase.paginator（‘#pager’,‘addItem’,1）;
//页内条目数及总条目数+1
181.pBase.paginator（‘#pager’,‘goto’,5）;
//跳转到第5页
表格功能详解
其实就是Grid这个东西咯，设计目标是使用表格的方式展示数据，同时支持动态更新、插入和删除行。
表格部分的完整功能截图如下，该截图来自baseProject项目后台的地理信息管理部分（文章管理部分的编辑功能没有使用表格自带的编辑逻辑）。
表格实例截图（行内编辑窗口已弹出）
设计思路
数据源应该是json格式的二维数组。
表格分为
升级会员 