使用和制作分和表格.docx

使用PHP和jQuery制作分页和表格如果您已经下载了本站提供的baseProject项目源码，后台中列表页面均可作为示例，其中文章列表页面的功能最为丰富。如果您没有下载该源码，相关的js文件可以从/scripts/basic.js获得，示例页面为/feedback页面。以下是后台文章列表页面的截图。分页和表格功能实例截图分页功能详解分页功能用于当目标数据过多时，为提高页面展示速度采用的一种手段。本文中的分页功能借用了Zend Framework中的Zend_Paginator对象，分页适配器为Zend_Paginator_Adapter_Null。该适配器也是最简单易用的一个。工作原理在PHP端，分页功能的基本参数为记录总数($countRows)、每页显示的记录数($rowsPerPage)、当前页码($page 默认值为1)，页码数量($items 指每次在页面上显示多少个页码，建议为单数)。其他参数可以通过计算得到：1. 页码合计($countPages)取不小于$countRows/$rowsPerPage的整数；2. 起始页码和结束页码的计算方式太长不写了；3. 页码列表：从起始页码到结束页码的页码组成的数组，如array(4, 5, 6, 7, 8)在HTML端，必要的参数为PHP端计算得出的数据，同时需要指定一个用于显示分页信息的html元素。然后使用jQuery根据参数动态生成html并将其插入到指定的html元素中就行了。PHP示例代码详解1. public function articlesAction() 2. $pageNumber = $this-getRequest()-getParam(page, 1);/获取当前页码，如果未指定则设为13. $sortBy = $this-getRequest()-getParam(sortby);/获取sortby设置4. if (empty($sortBy) | ! preg_match(/a-z0-9_-+ (asc|desc)$/i, $sortBy) 5. /如果sortBy为空或者不符合格式要求则使用以下的排序方式6. /注意：一定要进行格式检查，防止sql注入7. $sortBy = Project_Table:getFullyColumnName(article, id) . desc;8. 9. $mArticle = new Model_Article();10. /* 这部分是处理where子句的，和本文关系不大，略过 */11. $whereArray = array(12. article.article_category_id = $this-getRequest()-getParam(Project_Table:getFullyColumnName(article, article_category_id),13. article.article_status_id = $this-getRequest()-getParam(Project_Table:getFullyColumnName(article, article_status_id),14. );15. $whereString = ;16. foreach ($whereArray as $key = $value) 17. if (! empty($value) 18. if ($key = article.article_category_id & $value = -1) 19. $whereString .= AND $key IS NULL;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 ($articles as $key = $article) 41. $articles$keyProject_Table:getFullyColumnName(article, modified) = $pDate-getUserTimeFromTime($articleProject_Table:getFullyColumnName(article, modified), 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-view-pages = $pages;48. /以下处理是为了页面中的下拉选单提供选项数据，和本文关系不大49. if (! $this-getRequest()-isPost() 50. $mpArticle = new Mapper_Article();51. $this-view-elementArticleStatusId = $mpArticle-getElement(article_status_id, array(Project_Mapper:OPTIONS_NULLABLE = true, Project_Mapper:OPTIONS_DEFAULT = );52. $_categories = $mArticle-getAllowAppendArticleArticleCategories(null, null, null, null, true);53. $categories = array(54. $this-view-translate(Model_Article:NO_CATEGORY) = -1,55. );56. foreach ($_categories as $key = $row) 57. $categories$rowProject_Table:getFullyColumnName(article_category, name) = $rowProject_Table:getFullyColumnName(article_category, id);58. 59. $mpArticle = new Mapper_Article();60. $this-view-elementArticleCategories = $mpArticle-getElement(article_category_id, array(Project_Mapper:OPTIONS_IN_ARRAY = $categories, Project_Mapper:OPTIONS_NULLABLE = true);61. 62. $pages中的内容我打印了一下，这样更直观。如下。63. stdClass Object64. (65. pageCount = 366. itemCountPerPage = 1067. first = 168. current = 269. last = 370. previous = 171. next = 372. pagesInRange = Array73. (74. 1 = 175. 2 = 276. 3 = 377. )78.79. firstPageInRange = 180. lastPageInRange = 381. currentItemCount = 1082. totalItemCount = 2183. firstItemNumber = 1184. lastItemNumber = 2085. )Zend Framework的开发人员确实很认真，返回的参数非常充分，不需要任何的补充。顺便提一下以上代码中未体现的细节，当使用post方式访问该页面时会得到json数据而不是html。这个细节写在init()方法中，代码如下：1. public function init() 2. if ($this-getRequest()-isPost() 3. $this-_helper4. -contextSwitch()5. -addActionContext(articles, json) /就是这里咯6. -addActionContext(trashcategory, json)7. -addActionContext(trasharticle, json)8. -addActionContext(movecategory, json)9. -initContext(json);10. 11. HTML示例代码详解这次只贴出关键的内容哦。1. form method=POST action=url()? onsubmit=2. try3. return pBase.submitForm(this, true, null, loadArticlesGrid); /使用ajax提交表单，回调函数为loadArticlesGrid4. catch(e) 5. alert(e.message);6. return false;7. ;8. 9. 10. 11. pagination($this-pages-current, articles)?12. 13. 14. 15. search_select($this-elementArticleStatusId, array(onchange = pBase.paginator(div.paginationname=articles, goto, 1););?16. search_select($this-elementArticleCategories, array(onchange = pBase.paginator(div.paginationname=articles, goto, 1););?17. iconButton(add, $this-actionTitle(createarticle), window.open($this-url(array(action = editarticle), ! Project_Session:getInstance()-isAllow(editarticle)?18. 19. 20. 21. 22. 23. 24. 25. pagination($this-pages-current, articles, false)?26. 27. 28. 29. 30. $(document).ready(function()31. /这句话就是调用js绘制分页的，第一个参数是目标容器，第二个参数是相关参数组成的json对象（就是json_encode($pages)啦）32. pBase.paginator(div.paginationname=articles, $jsonPages);33. );34. function loadArticlesGrid(response) 35. /ajax回调，此时重绘分页36. pBase.paginator(div.paginationname=articles, response.pages);37. 38. 里面用到了一个helper，因为这样可以避免反复去写类似的html内容。带有两个参数，第一个是当前的页码，第二个用于控制是否输出表单元素（默认为true，输出）。当第二个参数为默认值true时，其输出如下：1. 为false时其输出为：1. 对于参数为true的输出，您可能会问为什么sortby没有初始值？确实没想过，我也不希望用户在url中手动添加sortby 参数。Javascript代码说明具体的代码很长，就不贴出来了，可以自行查看，仅列举配置信息和例子。1. var _configs = 2. boxClass: pagination,/分页的总体样式名称3. firstClass: first,/首页所使用的样式名称4. firstText: false,/首页使用的文本，false表示使用数字5. lastClass: last,/尾页所使用的样式名称6. lastText: false,/尾页使用的文本，false表示使用数字7. previousClass: previous,/上一页使用的样式名称8. previousText: ,/下一页所使用的文本11. pageClass: page,/每个页面元素所使用的样式名称12. currentPageClass: current,/当前页所使用的样式名称13. pagesElementClass: pages,/所有页码的公共父节点使用的样式名称14. infoElementClass: info,/信息节点的公共父节点使用的样式名称15. infoElementCountPageClass: countPage,/总页数信息的样式名称16. infoElementCurrentPageClass: current,/当前页信息的样式名称17. infoElementCountItemsClass: countItems,/总条目数量信息的样式名称18. infoElementPageItemsClass: pageItems,/页内条目数量信息的样式名称19. infoElementFirstItemClass: first,/本页内第一个条目的序号信息的样式名称20. infoElementLastItemClass: last,/本页内最后一个条目的序号信息的样式名称21. ajaxBoxClass: ajaxBox,/ajax读取状态容器的样式名称22. ajaxLoader: function() 23. return $();24. ,/获取一个ajax读取中的html25. pageCount: 0,/总页数26. itemCountPerPage: 0,/页内最大条目数27. totalItemCount: 0,/总条目数28. pagesInRange: ,/页码列表29. firstPageInRange: false,/页码列表中的第一个页码30. lastPageInRange: false,/页码列表中的最后一个页码31. currentItemCount: 0,/本页条目数32. firstItemNumber: 1,/第一条的序号33. lastItemNumber: 1,/最后一条的序号34. previous: false,/上一页的页码35. first: false,/第一页的页码36. last: false,/最后一页的页码37. current: 1,/当前页的页码38. next: false,/下一页的页码39. referenceForm: form:first,/引用的表单40. referencePageItem: page/表单中表示页码的表单元素名称41. ;功能原型：pBase. paginator(string|HtmlElement selector, jsonObject|string configs, number)参数说明：selector: 选择器，分页的Html内容将注入到该选择器指定的元素。configs: 配置信息，如果是对象，那么利用该对象声明的参数重绘分页（此时忽略第三个参数number），如果是字符串，字符串应为removeItem, addItem或者goto之一。number: 在configs为字符串时需要该参数。说明如下：configs 为 removeItem: number表示当前页内有多少行已经删除；configs 为 addItem: number表示当前页内新增了多少行；configs 为 goto: number表示目标页码；分别示例如下。1. pBase. paginator(#pager, ); /在$(#pager)内显示分页信息2. pBase. paginator(#pager, removeItem, 1); /页内条目数及总条目数-13. pBase. paginator(#pager, addItem, 1); /页内条目数及总条目数+14. pBase. paginator(#pager, goto, 5); /跳转到第5页表格功能详解其实就是Grid这个东西咯，设计目标是使用表格的方式展示数据，同时支持动态更新、插入和删除行。表格部分的完整功能截图如下，该截图来自baseProject项目后台的地理信息管理部分（文章管理部分的编辑功能没有使用表格自带的编辑逻辑）。表格实例截图（行内编辑窗口已弹出）设计思路数据源应该是json格式的二维数组。表格分为thead和tbody两部分。我的想法就是在thead中的首行使用属性的方式描述对应的列中的数据的显示逻辑和样式信息，从而实现基于jQuery自动填充表格数据。HTML源码示例1. 2. 3. tr row_id= row_name=4. th class=desc column= td_class=alignRightcolumn_name(article, id)?5. th column=getRowDataOfLanguage sortby=column_name(article, language)?6. th column=column_name(article, title)?7. column_name(article_category, name)?8. th column=column_name(article, create_by_user_id)?9. th column=getRowDataOfArticleStatus sortby= td_class=alignCentercolumn_name(article, article_status_id)?10. th column= td_class=alignCentercolumn_name(article, modified)?11. 12. 13. 14. 15. 16. 在tr中，使用了自定义属性row_id和row_name，row_id是用于标识行内数据的主键的值，row_name则是标识行内数据的友好名称，通常用于删除前的确认时能够弹出更友好的信息，如“您是否确认删除文档 欢迎光临本站 ?”对于每一个th，自定义属性包括column， sortby 和 td_class。column属性用于指明如何显示该列的数据，sortby属性用于指明当用户要求对该字段排序时使用哪个字段排序（可选），td_class用于指明改列使用的样式class名称。th本身的class可以是desc（标识当前列降序），asc（标识当前列为升序），sortable（标识当前列可以被排序，当标识为可排序时，如果column属性的值是字段名，那么可以省略sortby属性，否则sortby属性是必需的）或unsortable（标识当前列不能被排序，如不能排序则会忽视sortby属性的检查）tr的row_name属性和th的column属性的值可以是字段名，也可以是javascript函数名。当为函数名时，其值为该函数的返回值。调用该函数时传入的参数为当前的数据行。例如json数据为var jsonData = name: Nick;，column指定为column=”getNameColumnString”，那么程序会尝试调用1. for(var i = 0; i tr声明每行的主键信息时使用的属性名称3. attributeRowName: row_name,/theadtr声明每行的名称的使用的属性名称4. rowDataColumn: column, /theadtrtd声明字段数据使用的属性名称5. rowDataSortByColumn: sortby, /theadtrtd声明排序字段使用的属性名称6. rowColumnClass: td_class, /theadtrtd声明数据列样式类使用的属性名称7. rowColumnDescClass: desc, /theadtrtd声明数据列降序排序时的样式类8. rowColumnAscClass: asc, /theadtrtd声明数据列升序排序时的样式类9. rowColumnSortableClass: sortable, /theadtrtd声明数据列未排序时的样式类10. rowColumnDisableSortableClass: unsortable, /theadtrtd声明数据列不能排序时的样式类11. rowAction: false, /tbodytr被点击时触发的行为12. autoDisableEventBubbling: true, /自动阻止tbodytrtd中的鼠标事件冒泡13. defaultRowClass: false, /默认的tbodytr样式类14. evenRowClass: even, /tbody中的偶数行的样式类15. referenceForm: form:first, /排序时触发提交的表单16. referenceSortbyItem: sortby, /保存排序参数的表单元素名称17. referencePageItem: page, /保存页码参数的表单元素名称18. sortable: false, /允许排序19. paginatorSelector: false, /关联的分页器的元素选择器20. dialogOverflowY: hidden/当弹出编辑对话框时，如果内容超出对话框高度如何处理21. ;应用原型说明：pBase.grid(jQuery选择器(建议为id) table, JSON|HtmlElement data, jsonObject|string configs, string url)table为jQuery选择器，指明目标表格；data为json数据，可能是格式或格式的json数据、HtmlElement元素或null，视configs的值而定；configs为格式的json数据或字符串，字符串取值范围为trash, edit, remove, update, reset, even之一；url：当configs取值为trash或edit时需要指定该参数，值为url地址，当请求该地址时会自动追加参数id/当前行的id，请注意不要冲突。Configs为trash时会发送POST请求，否则会发送GET请求；应用示例说明：1. pBase.grid(#results, id:1, name:nick, sortable: true); /初始化，并将数据显示到表格#results2. pBase.grid(#results, id:1, name:nick, reset); /使用指定的数据重绘tbody区域3. pBase.grid(#results, $(#results tbody tr:first td:last button:first), edit, edit.php); /第二个参数表示行中的一个操作按钮，程序会尝试获取该元素的父级中的第一个tr并取得行的编号，然后发送给指定的地址，并将返回的内容显示在对话框中4. pBase.grid(#results, $(#results tbody tr:first td:last button:eq(1), trash, trash.php);/第二个参数表示行中的一个操作按钮，程序会尝试获取该元素的父级中的第一个tr并取得行的编号，然后发送给指定的地址，并自动调用pBase.grid(#results, ajaxResp