手把手教你如何玩转插件:分页插件(Pagehelper)

转自:https://blog.csdn.net/cs_hnu_scw/article/details/80718467#commentBox

情景引入:

小白:起床起床,,,快起床!!!

我:怎么怎么了,小白你到底又怎么了。。

小白:我发现在Web系统中,分页是一种很常见的功能,可是,我之前写的方法都比较麻烦,移植性不是很高,有没有什么好办法可以快速实现分页的呢?

我:确实是的,分页功能几乎在每个系统中都是存在的,它的实现也是有很多种方式的。

小白:对呀,有没有什么好方法呢?

我:这个嘛,对于分页来说的话,其实我们在复杂的系统中,有很多特别的处理,这些都是需要我们进行自定义的编写处理的。但是,如果你就想实现一种分页效果的话,我可以给你提提建议。

小白:好哟,赶紧说赶紧说!!

我:害我又没有懒觉睡,真是的。那接下来,我跟你说说用一种分页插件如何进行快速实现分页效果吧。

情景分析:

    我们在任何的系统中,分页功能是必不可少的。然而,对于这个功能如果有一种快速开发的实现方式,当然可以节省我们很多的时间了。接下来,我就给大家基于不同的环境来说说如何使用一个分页插件:pagehelper。。不过,大家可要记住了,对于不同的情况,都要认真分析场景,而不是只会套用哦。。当然,如果你想用最原始的方式实现,也是可以的,我也写了两种方法,会在讲解完后,贴到后面,如果有需要的就进行稍微查看即可(但是,不是非常理想,仅供参考)。

情景一:(SpringBoot 和 Mybatis环境)

方法一:使用pagehelper-spring-boot-starter的形式(最简单和通用的方式

使用步骤:

(1)在pom.xml文件中引入依赖库


    
    
    
    
  1. com.github.pagehelper
  2. pagehelper-spring-boot-starter
  3. 1.2.3

(2)在application.properties中添加分页配置


    
    
    
    
  1. # 配置pageHelper分页插件的内容
  2. pagehelper.helper-dialect=mysql
  3. pagehelper.reasonable= true
  4. pagehelper.support-methods-arguments= true
  5. pagehelper.params=count=countSql

或者在application.yml文件中添加分页配置


    
    
    
    
  1. pagehelper:
  2. helperDialect: mysql
  3. reasonable: true
  4. supportMethodsArguments: true
  5. params: count=countSql

(3)进行使用。(可以在controller层或者service层使用即可)


    
    
    
    
  1. /**
  2. * 查询所有的person内容
  3. * @return
  4. */
  5. @RequestMapping(value = "/list")
  6. public String jumpJsp(Map result){
  7. PageHelper.startPage( 3 , 3);
  8. List personList = personService.findPerson();
  9. //得到分页的结果对象
  10. PageInfo personPageInfo = new PageInfo<>(personList);
  11. //得到分页中的person条目对象
  12. List pageList = personPageInfo.getList();
  13. //将结果存入map进行传送
  14. result.put( "pageInfo" , pageList);
  15. return "person_list";
  16. }

解析:

(1)PageHelper.startPage(pageNum , pageSize),这个方法就是类似我们数据库操作的limit start , count

(2)得到的对象PageInfo里面包含很多的字段信息,这个可以自己看源码,非常详细

(3)如果我们只想得到分页处理之后我们的实体对象的结果,那么就调用PageInfo对象的getList()方法即可。

(4)这种配置使用的方式是最通用的方式,也就是对于环境搭建不同方式都可以利用这种使用方法。

问题:如果运行时出现,org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'com.github.pagehelper.autoconfigure.PageHelperAutoConfiguration': 这个错误。

解决办法:这是由于分页插件pagehelper的版本和mybatis不兼容的原因,修改分页插件的版本即可。

方法二:使用最原始的形式(SpringBoot+Mybatis配置文件的形式,也就是整合环境还是利用xml的形式搭建的,但是都是通过@configuration注解开发类)

使用步骤:

(1)在pom.xml文件中,添加分页插件的依赖(注意和第一种方法的区别)


    
    
    
    
  1. com.github.pagehelper
  2. pagehelper
  3. 4.1.6

(2)在mybatis的配置文件中添加如下的插件


    
    
    
    
  1. "com.github.pagehelper.PageHelper">
  2. "dialect" value= "mysql"/>

(3)在controller或者service层进行使用插件


    
    
    
    
  1. /**
  2. * 查询所有的person内容
  3. * @return
  4. */
  5. @RequestMapping(value = "/list")
  6. public String jumpJsp(Map result){
  7. PageHelper.startPage( 1 , 5);
  8. List personList = personService.findPerson();
  9. //得到分页的结果对象
  10. PageInfo personPageInfo = new PageInfo<>(personList);
  11. //得到分页中的person条目对象
  12. List pageList = personPageInfo.getList();
  13. //将结果存入map进行传送
  14. result.put( "pageInfo" , pageList);
  15. return "person_list";
  16. }
分析:对于这种方法的话,适用于对整合环境还是通过mybatis.xml的形式,所以,这种是具有针对性的一种情况。

方法三:使用最原始的方式(SpringBoot+Mybatis搭建中,Mybatis是利用在application.properties进行设置,并且mapper文件的操作还是使用.xml形式编写的sql语句,而非mapper注解编写)

使用步骤:

(1)在pom.xml文件中添加分页插件的依赖


    
    
    
    
  1. com.github.pagehelper
  2. pagehelper
  3. 4.1.6

(2)添加下面一个类


    
    
    
    
  1. package com.hnu.scw.config;
  2. import com.github.pagehelper.PageHelper;
  3. import org.apache.ibatis.plugin.Interceptor;
  4. import org.mybatis.spring.SqlSessionFactoryBean;
  5. import org.springframework.context.annotation.Bean;
  6. import org.springframework.context.annotation.Configuration;
  7. import java.util.Properties;
  8. /**
  9. * @ Author :scw
  10. * @ Date :Created in 下午 2:48 2018/6/17 0017
  11. * @ Description:用于配置分页插件的使用
  12. * @ Modified By:
  13. * @Version: $version$
  14. */
  15. @Configuration
  16. public class PgeHeplerConfig {
  17. //将分页插件注入到容器中
  18. @Bean
  19. public PageHelper pageHelper() {
  20. //分页插件
  21. PageHelper pageHelper = new PageHelper();
  22. Properties properties = new Properties();
  23. properties.setProperty( "reasonable", "true");
  24. properties.setProperty( "supportMethodsArguments", "true");
  25. properties.setProperty( "returnPageInfo", "check");
  26. properties.setProperty( "params", "count=countSql");
  27. pageHelper.setProperties(properties);
  28. //添加插件
  29. new SqlSessionFactoryBean().setPlugins( new Interceptor[]{pageHelper});
  30. return pageHelper;
  31. }
  32. }

或者如下的代码:


    
    
    
    
  1. package com.hnu.scw.config;
  2. import com.github.pagehelper.PageHelper;
  3. import org.springframework.context.annotation.Bean;
  4. import org.springframework.context.annotation.Configuration;
  5. import java.util.Properties;
  6. /**
  7. * @ Author :scw
  8. * @ Date :Created in 下午 2:48 2018/6/17 0017
  9. * @ Description:用于配置分页插件的使用
  10. * @ Modified By:
  11. * @Version: $version$
  12. */
  13. @Configuration
  14. public class PgeHeplerConfig {
  15. //将分页插件注入到容器中
  16. @Bean
  17. public PageHelper pageHelper() {
  18. //分页插件
  19. PageHelper pageHelper = new PageHelper();
  20. Properties properties = new Properties();
  21. properties.setProperty( "reasonable", "true");
  22. properties.setProperty( "supportMethodsArguments", "true");
  23. properties.setProperty( "helperDialect", "mysql");
  24. properties.setProperty( "params", "count=countSql");
  25. pageHelper.setProperties(properties);
  26. return pageHelper;
  27. }
  28. }

还可以直接在springboot的启动类添加下面的代码即可。(其实都一样的道理,因为上面的类都是用了@Configuration注解配置了的,也就是添加到了容器中)


    
    
    
    
  1. //将分页插件注入到容器中
  2. @Bean
  3. public PageHelper pageHelper() {
  4. //分页插件
  5. PageHelper pageHelper = new PageHelper();
  6. Properties properties = new Properties();
  7. properties.setProperty( "reasonable", "true");
  8. properties.setProperty( "supportMethodsArguments", "true");
  9. properties.setProperty( "helperDialect", "mysql");
  10. properties.setProperty( "params", "count=countSql");
  11. pageHelper.setProperties(properties);
  12. return pageHelper;
  13. }

(3)直接使用


    
    
    
    
  1. /**
  2. * 查询所有的person内容
  3. * @return
  4. */
  5. @RequestMapping(value = "/list")
  6. public String jumpJsp(Map result){
  7. PageHelper.startPage( 1 , 5);
  8. List personList = personService.findPerson();
  9. //得到分页的结果对象
  10. PageInfo personPageInfo = new PageInfo<>(personList);
  11. //得到分页中的person条目对象
  12. List pageList = personPageInfo.getList();
  13. //将结果存入map进行传送
  14. result.put( "pageInfo" , pageList);
  15. return "person_list";
  16. }

情景二:Spring+SpringMVC+Mybatis+Maven环境

使用步骤:(其实这个就类似情景一种的方式二,换汤不换药)

(1)在pom.xml中添加分页插件的依赖


    
    
    
    
  1. com.github.pagehelper
  2. pagehelper
  3. 4.1.6

(2)在mybatis中的配置文件SqlMapConfig.xml(这个名字是你自己搭建环境所取的,就是配置一些关于Mybatis的配置文件)添加分页插件。


    
    
    
    
  1. "com.github.pagehelper.PageHelper">
  2. "dialect" value= "mysql"/>

(3)在controller层或者service实现层中使用分页。


    
    
    
    
  1. /**
  2. * 查询所有的person内容
  3. * @return
  4. */
  5. @RequestMapping(value = "/list")
  6. public String jumpJsp(Map result){
  7. PageHelper.startPage( 1 , 8);
  8. List personList = personService.findPerson();
  9. //得到分页的结果对象
  10. PageInfo personPageInfo = new PageInfo<>(personList);
  11. //得到分页中的person条目对象
  12. List pageList = personPageInfo.getList();
  13. //将结果存入map进行传送
  14. result.put( "pageInfo" , pageList);
  15. return "person_list";
  16. }

总结:

(1)pagehelper插件本身就是基于Mybatis这种框架进行开发的插件。所以,主要都是针对Mybatis数据操作的架构的。

(2)上面描述了多种情况的具体配置方式,都是自身经过实际开发编写的,而且对于不同的情景,各位要理解为什么要这样,这虽然只是讲解了分页插件的使用,当遇到其他插件的时候,都可以类似进行处理。

(3)如果是用到的SSH(Spring+SpringMVC+Hibernate)或者SpringBoot+Hibernate这样的架构的时候,这个插件是无法使用的,就需要自己通过hibernate的形式进行处理,比如可以用HQL语法或者Criteria进行处理即可。毕竟,Hibernate是一种全自动化的数据库操作框架。


下面的内容,是关于原始方式实现分页效果,仅供各位进行参考(其中是通过实例来帮助大家进行分析)

实现方法一:通过自定义分页标签(JSP)

分页,这个功能,我想在很多的系统中,都有用到过吧。这已经是非常非常普通的应用功能了,所以就需要将这个功能能自定义为一个jsp标签的话,那就肯定很方便了。所以下面就说一下,如果实现这个功能。

步骤:

(1)写两个Java类,其中Page,很简单就是一个分页对象,然后NavigationTag这个就是自定义标签的核心映射类了(如果对于这个自定义标签的流程不是很清楚的话,可以看看我之前写的J2EE的知识点中的内容,都很详细介绍了)。

Page:


    
    
    
    
  1. package com.hnuscw.common.utils;
  2. import java.util.List;
  3. public class Page <T> {
  4. private int total;
  5. private int page;
  6. private int size;
  7. private List <T> rows;
  8. public int getTotal() {
  9. return total;
  10. }
  11. public void setTotal(int total) {
  12. this.total = total;
  13. }
  14. public int getPage() {
  15. return page;
  16. }
  17. public void setPage(int page) {
  18. this.page = page;
  19. }
  20. public int getSize() {
  21. return size;
  22. }
  23. public void setSize(int size) {
  24. this.size = size;
  25. }
  26. public List <T> getRows() {
  27. return rows;
  28. }
  29. public void setRows(List <T> rows) {
  30. this.rows = rows;
  31. }
  32. }

Navigation:


    
    
    
    
  1. package com.hnuscw.common.utils;
  2. import java.io.IOException;
  3. import java.util.Map;
  4. import javax.servlet.http.HttpServletRequest;
  5. import javax.servlet.jsp.JspException;
  6. import javax.servlet.jsp.JspWriter;
  7. import javax.servlet.jsp.tagext.TagSupport;
  8. import org.apache.taglibs.standard.tag.common.core.UrlSupport;
  9. /**
  10. * 显示格式 上一页 1 2 3 4 5 下一页
  11. */
  12. public class NavigationTag extends TagSupport {
  13. static final long serialVersionUID = 2372405317744358833L;
  14. /**
  15. * request 中用于保存Page <E> 对象的变量名,默认为“page”
  16. */
  17. private String bean = "page";
  18. /**
  19. * 分页跳转的url地址,此属性必须
  20. */
  21. private String url = null;
  22. /**
  23. * 显示页码数量
  24. */
  25. private int number = 5;
  26. @Override
  27. public int doStartTag() throws JspException {
  28. JspWriter writer = pageContext.getOut();
  29. HttpServletRequest request = (HttpServletRequest) pageContext.getRequest();
  30. Page page = (Page)request.getAttribute(bean);
  31. if (page == null)
  32. return SKIP_BODY;
  33. url = resolveUrl(url, pageContext);
  34. try {
  35. //计算总页数
  36. int pageCount = page.getTotal() / page.getSize();
  37. if (page.getTotal() % page.getSize() > 0) {
  38. pageCount++;
  39. }
  40. writer.print(" <nav> <ul class=\"pagination\">");
  41. //显示“上一页”按钮
  42. if (page.getPage() > 1) {
  43. String preUrl = append(url, "page", page.getPage() - 1);
  44. preUrl = append(preUrl, "rows", page.getSize());
  45. writer.print(" <li> <a href=\"" + preUrl + "\">上一页 a> li>");
  46. } else {
  47. writer.print(" <li class=\"disabled\"> <a href=\"#\">上一页 a> li>");
  48. }
  49. //显示当前页码的前2页码和后两页码
  50. //若1 则 1 2 3 4 5, 若2 则 1 2 3 4 5, 若3 则1 2 3 4 5,
  51. //若4 则 2 3 4 5 6 ,若10 则 8 9 10 11 12
  52. int indexPage = (page.getPage() - 2 > 0)? page.getPage() - 2 : 1;
  53. for(int i=1; i <= number && indexPage <= pageCount; indexPage++, i++) {
  54. if( indexPage == page.getPage()) {
  55. writer.print( "< li class= \" active\"> <a href=\"#\">"+indexPage+" <span class=\"sr-only\">(current) span> a> li>");
  56. continue;
  57. }
  58. String pageUrl = append(url, "page", indexPage);
  59. pageUrl = append(pageUrl, "rows", page.getSize());
  60. writer.print(" <li> <a href=\"" + pageUrl + "\">"+ indexPage +" a> li>");
  61. }
  62. //显示“下一页”按钮
  63. if (page.getPage() < pageCount) {
  64. String nextUrl = append(url, " page", page.getPage() + 1);
  65. nextUrl = append(nextUrl, " rows", page.getSize());
  66. writer.print("< li> <a href=\"" + nextUrl + "\">下一页 a> li>");
  67. } else {
  68. writer.print(" <li class=\"disabled\"> <a href=\"#\">下一页 a> li>");
  69. }
  70. writer.print(" nav>");
  71. } catch (IOException e) {
  72. e.printStackTrace();
  73. }
  74. return SKIP_BODY;
  75. }
  76. private String append(String url, String key, int value) {
  77. return append(url, key, String.valueOf(value));
  78. }
  79. /**
  80. * 为url 参加参数对儿
  81. *
  82. * @param url
  83. * @param key
  84. * @param value
  85. * @return
  86. */
  87. private String append(String url, String key, String value) {
  88. if (url == null || url.trim().length() == 0) {
  89. return "";
  90. }
  91. if (url.indexOf("?") == -1) {
  92. url = url + "?" + key + "=" + value;
  93. } else {
  94. if(url.endsWith("?")) {
  95. url = url + key + "=" + value;
  96. } else {
  97. url = url + "&" + key + "=" + value;
  98. }
  99. }
  100. return url;
  101. }
  102. /**
  103. * 为url 添加翻页请求参数
  104. *
  105. * @param url
  106. * @param pageContext
  107. * @return
  108. * @throws javax.servlet.jsp.JspException
  109. */
  110. private String resolveUrl(String url, javax.servlet.jsp.PageContext pageContext) throws JspException{
  111. //UrlSupport.resolveUrl(url, context, pageContext)
  112. Map params = pageContext.getRequest().getParameterMap();
  113. for (Object key:params.keySet()) {
  114. if ("page".equals(key) || "rows".equals(key)) continue;
  115. Object value = params.get(key);
  116. if (value == null) continue;
  117. if (value.getClass().isArray()) {
  118. url = append(url, key.toString(), ((String[])value)[0]);
  119. } else if (value instanceof String) {
  120. url = append(url, key.toString(), value.toString());
  121. }
  122. }
  123. return url;
  124. }
  125. /**
  126. * @return the bean
  127. */
  128. public String getBean() {
  129. return bean;
  130. }
  131. /**
  132. * @param bean the bean to set
  133. */
  134. public void setBean(String bean) {
  135. this.bean = bean;
  136. }
  137. /**
  138. * @return the url
  139. */
  140. public String getUrl() {
  141. return url;
  142. }
  143. /**
  144. * @param url the url to set
  145. */
  146. public void setUrl(String url) {
  147. this.url = url;
  148. }
  149. public void setNumber(int number) {
  150. this.number = number;
  151. }
  152. }

(2)编写自定义标签的tld,命令为commons.tld,并且放在WEB-INF下面的tld文件下(这个文件自己创建就是了)


    
    
    
    
  1. xml version="1.0" encoding="UTF-8" ?>
  2. PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN"
  3. "http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">
  4. <taglib>
  5. <tlib-version>2.0 tlib-version>
  6. <jsp-version>1.2 jsp-version>
  7. <short-name>common short-name>
  8. <uri>http://hnuscw.com/common/ uri>
  9. <display-name>Common Tag display-name>
  10. <description>Common Tag library description>
  11. <tag>
  12. <name>page name>
  13. <tag-class>com.hnuscw.common.utils.NavigationTag tag-class>
  14. <body-content>JSP body-content>
  15. <description>create navigation for paging description>
  16. <attribute>
  17. <name>bean name>
  18. <rtexprvalue>true rtexprvalue>
  19. attribute>
  20. <attribute>
  21. <name>number name>
  22. <rtexprvalue>true rtexprvalue>
  23. attribute>
  24. <attribute>
  25. <name>url name>
  26. <required>true required>
  27. <rtexprvalue>true rtexprvalue>
  28. attribute>
  29. tag>
  30. taglib>

(3)在jsp页面中进行使用

引入标签:

<%@ taglib prefix="hnuscw" uri="http://hnuscw.com/common/"%>
    
    
    
    
使用标签:

    
    
    
    
  1. <div class="col-md-12 text-right">
  2. <hnuscw:page url="${pageContext.request.contextPath }/customer/list.action" />
  3. div>

测试实例:为了方便很多的使用,我这就还是用一个实际的例子还显示这个效果吧。

jsp页面:命名为:customer.jsp(当然可以不要这么多内容,自行更改即可,只是这个就相当于一个管理系统的了,所以以后只需要稍微修改就可以)


    
    
    
    
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding= "UTF-8"%>
  3. <%@ page trimDirectiveWhitespaces="true"%>
  4. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  5. <%@ taglib prefix="itcast" uri="http://itcast.cn/common/"%>
  6. <%
  7. String path = request.getContextPath();
  8. String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
  9. + path + "/";
  10. %>
  11. <html xmlns="http://www.w3.org/1999/xhtml">
  12. <head>
  13. <meta charset="utf-8">
  14. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  15. <meta name="viewport" content="width=device-width, initial-scale=1">
  16. <meta name="description" content="">
  17. <meta name="author" content="">
  18. <title>客户列表-BootCRM title>
  19. <link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet">
  20. <link href="<%=basePath%>css/metisMenu.min.css" rel="stylesheet">
  21. <link href="<%=basePath%>css/dataTables.bootstrap.css" rel="stylesheet">
  22. <link href="<%=basePath%>css/sb-admin-2.css" rel="stylesheet">
  23. <link href="<%=basePath%>css/font-awesome.min.css" rel="stylesheet"
  24. type= "text/css">
  25. <link href="<%=basePath%>css/boot-crm.css" rel="stylesheet"
  26. type= "text/css">
  27. head>
  28. <body>
  29. <div id="wrapper">
  30. <nav class="navbar navbar-default navbar-static-top" role="navigation"
  31. style= "margin-bottom: 0">
  32. <div class="navbar-header">
  33. <button type="button" class="navbar-toggle" data-toggle="collapse"
  34. data-target= ".navbar-collapse">
  35. <span class="sr-only">Toggle navigation span> <span
  36. class= "icon-bar"> span> <span class="icon-bar"> span> <span
  37. class= "icon-bar"> span>
  38. button>
  39. <a class="navbar-brand" href="index.html">BOOT客户管理系统 v2.0 a>
  40. div>
  41. <ul class="nav navbar-top-links navbar-right">
  42. <li class="dropdown"> <a class="dropdown-toggle"
  43. data-toggle= "dropdown" href= "#"> <i class="fa fa-envelope fa-fw"> i>
  44. <i class="fa fa-caret-down"> i>
  45. a>
  46. <ul class="dropdown-menu dropdown-messages">
  47. <li> <a href="#">
  48. <div>
  49. <strong>令狐冲 strong> <span class="pull-right text-muted">
  50. <em>昨天 em>
  51. span>
  52. div>
  53. <div>今天晚上向大哥找我吃饭,讨论一下去梅庄的事... div>
  54. a> li>
  55. <li class="divider"> li>
  56. <li> <a class="text-center" href="#"> <strong>查看全部消息 strong>
  57. <i class="fa fa-angle-right"> i>
  58. a> li>
  59. ul> li>
  60. <li class="dropdown"> <a class="dropdown-toggle"
  61. data-toggle= "dropdown" href= "#"> <i class="fa fa-tasks fa-fw"> i>
  62. <i class="fa fa-caret-down"> i>
  63. a>
  64. <ul class="dropdown-menu dropdown-tasks">
  65. <li> <a href="#">
  66. <div>
  67. <p>
  68. <strong>任务 1 strong> <span class="pull-right text-muted">完成40% span>
  69. p>
  70. <div class="progress progress-striped active">
  71. <div class="progress-bar progress-bar-success"
  72. role= "progressbar" aria-valuenow= "40" aria-valuemin= "0"
  73. aria-valuemax= "100" style= "width: 40%">
  74. <span class="sr-only">完成40% span>
  75. div>
  76. div>
  77. div>
  78. a> li>
  79. <li class="divider"> li>
  80. <li> <a href="#">
  81. <div>
  82. <p>
  83. <strong>任务 2 strong> <span class="pull-right text-muted">完成20% span>
  84. p>
  85. <div class="progress progress-striped active">
  86. <div class="progress-bar progress-bar-info" role="progressbar"
  87. aria-valuenow= "20" aria-valuemin= "0" aria-valuemax= "100"
  88. style= "width: 20%">
  89. <span class="sr-only">完成20% span>
  90. div>
  91. div>
  92. div>
  93. a> li>
  94. <li class="divider"> li>
  95. <li> <a class="text-center" href="#"> <strong>查看所有任务 strong>
  96. <i class="fa fa-angle-right"> i>
  97. a> li>
  98. ul> li>
  99. <li class="dropdown"> <a class="dropdown-toggle"
  100. data-toggle= "dropdown" href= "#"> <i class="fa fa-bell fa-fw"> i>
  101. <i class="fa fa-caret-down"> i>
  102. a>
  103. <ul class="dropdown-menu dropdown-alerts">
  104. <li> <a href="#">
  105. <div>
  106. <i class="fa fa-comment fa-fw"> i> 新回复 <span
  107. class= "pull-right text-muted small">4分钟之前 span>
  108. div>
  109. a> li>
  110. <li class="divider"> li>
  111. <li> <a href="#">
  112. <div>
  113. <i class="fa fa-envelope fa-fw"> i> 新消息 <span
  114. class= "pull-right text-muted small">4分钟之前 span>
  115. div>
  116. a> li>
  117. <li class="divider"> li>
  118. <li> <a href="#">
  119. <div>
  120. <i class="fa fa-tasks fa-fw"> i> 新任务 <span
  121. class= "pull-right text-muted small">4分钟之前 span>
  122. div>
  123. a> li>
  124. <li class="divider"> li>
  125. <li> <a href="#">
  126. <div>
  127. <i class="fa fa-upload fa-fw"> i> 服务器重启 <span
  128. class= "pull-right text-muted small">4分钟之前 span>
  129. div>
  130. a> li>
  131. <li class="divider"> li>
  132. <li> <a class="text-center" href="#"> <strong>查看所有提醒 strong>
  133. <i class="fa fa-angle-right"> i>
  134. a> li>
  135. ul> li>
  136. <li class="dropdown"> <a class="dropdown-toggle"
  137. data-toggle= "dropdown" href= "#"> <i class="fa fa-user fa-fw"> i>
  138. <i class="fa fa-caret-down"> i>
  139. a>
  140. <ul class="dropdown-menu dropdown-user">
  141. <li> <a href="#"> <i class="fa fa-user fa-fw"> i> 用户设置 a> li>
  142. <li> <a href="#"> <i class="fa fa-gear fa-fw"> i> 系统设置 a> li>
  143. <li class="divider"> li>
  144. <li> <a href="login.html"> <i class="fa fa-sign-out fa-fw"> i>
  145. 退出登录 a> li>
  146. ul> li>
  147. ul>
  148. <div class="navbar-default sidebar" role="navigation">
  149. <div class="sidebar-nav navbar-collapse">
  150. <ul class="nav" id="side-menu">
  151. <li class="sidebar-search">
  152. <div class="input-group custom-search-form">
  153. <input type="text" class="form-control" placeholder="查询内容...">
  154. <span class="input-group-btn">
  155. <button class="btn btn-default" type="button">
  156. <i class="fa fa-search" style="padding: 3px 0 3px 0;"> i>
  157. button>
  158. span>
  159. div>
  160. li>
  161. <li> <a href="customer.action" class="active"> <i
  162. class= "fa fa-edit fa-fw"> i> 客户管理 a> li>
  163. <li> <a href="salevisit.action"> <i
  164. class= "fa fa-dashboard fa-fw"> i> 客户拜访 a> li>
  165. ul>
  166. div>
  167. div>
  168. nav>
  169. <div id="page-wrapper">
  170. <div class="row">
  171. <div class="col-lg-12">
  172. <h1 class="page-header">客户管理 h1>
  173. div>
  174. div>
  175. <div class="panel panel-default">
  176. <div class="panel-body">
  177. <form class="form-inline" action="${pageContext.request.contextPath }/customer/list.action" method="get">
  178. <div class="form-group">
  179. <label for="customerName">客户名称 label>
  180. <input type="text" class="form-control" id="customerName" value="${custName }" name="custName">
  181. div>
  182. <div class="form-group">
  183. <label for="customerFrom">客户来源 label>
  184. <select class="form-control" id="customerFrom" placeholder="客户来源" name="custSource">
  185. <option value="">--请选择-- option>
  186. <c:forEach items="${fromType}" var="item">
  187. <option value="${item.dict_id}"<c:if test="${item.dict_id == custSource}"> selected c:if>>${item.dict_item_name } option>
  188. c:forEach>
  189. select>
  190. div>
  191. <div class="form-group">
  192. <label for="custIndustry">所属行业 label>
  193. <select class="form-control" id="custIndustry" name="custIndustry">
  194. <option value="">--请选择-- option>
  195. <c:forEach items="${industryType}" var="item">
  196. <option value="${item.dict_id}"<c:if test="${item.dict_id == custIndustry}"> selected c:if>>${item.dict_item_name } option>
  197. c:forEach>
  198. select>
  199. div>
  200. <div class="form-group">
  201. <label for="custLevel">客户级别 label>
  202. <select class="form-control" id="custLevel" name="custLevel">
  203. <option value="">--请选择-- option>
  204. <c:forEach items="${levelType}" var="item">
  205. <option value="${item.dict_id}"<c:if test="${item.dict_id == custLevel}"> selected c:if>>${item.dict_item_name } option>
  206. c:forEach>
  207. select>
  208. div>
  209. <button type="submit" class="btn btn-primary">查询 button>
  210. form>
  211. div>
  212. div>
  213. <div class="row">
  214. <div class="col-lg-12">
  215. <div class="panel panel-default">
  216. <div class="panel-heading">客户信息列表 div>
  217. <table class="table table-bordered table-striped">
  218. <thead>
  219. <tr>
  220. <th>ID th>
  221. <th>客户名称 th>
  222. <th>客户来源 th>
  223. <th>客户所属行业 th>
  224. <th>客户级别 th>
  225. <th>固定电话 th>
  226. <th>手机 th>
  227. <th>操作 th>
  228. tr>
  229. thead>
  230. <tbody>
  231. <c:forEach items="${page.rows}" var="row">
  232. <tr>
  233. <td>${row.cust_id} td>
  234. <td>${row.cust_name} td>
  235. <td>${row.cust_source} td>
  236. <td>${row.cust_industry} td>
  237. <td>${row.cust_level} td>
  238. <td>${row.cust_phone} td>
  239. <td>${row.cust_mobile} td>
  240. <td>
  241. <a href="#" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#customerEditDialog" onclick="editCustomer(${row.cust_id})">修改 a>
  242. <a href="#" class="btn btn-danger btn-xs" onclick="deleteCustomer(${row.cust_id})">删除 a>
  243. td>
  244. tr>
  245. c:forEach>
  246. tbody>
  247. table>
  248. <div class="col-md-12 text-right">
  249. <itcast:page url="${pageContext.request.contextPath }/customer/list.action" />
  250. div>
  251. div>
  252. div>
  253. div>
  254. div>
  255. div>
  256. <div class="modal fade" id="customerEditDialog" tabindex="-1" role="dialog"
  257. aria-labelledby= "myModalLabel">
  258. <div class="modal-dialog" role="document">
  259. <div class="modal-content">
  260. <div class="modal-header">
  261. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  262. <span aria-hidden="true">× span>
  263. button>
  264. <h4 class="modal-title" id="myModalLabel">修改客户信息 h4>
  265. div>
  266. <div class="modal-body">
  267. <form class="form-horizontal" id="edit_customer_form">
  268. <input type="hidden" id="edit_cust_id" name="cust_id"/>
  269. <div class="form-group">
  270. <label for="edit_customerName" class="col-sm-2 control-label">客户名称 label>
  271. <div class="col-sm-10">
  272. <input type="text" class="form-control" id="edit_customerName" placeholder="客户名称" name="cust_name">
  273. div>
  274. div>
  275. <div class="form-group">
  276. <label for="edit_customerFrom" style="float:left;padding:7px 15px 0 27px;">客户来源 label>
  277. <div class="col-sm-10">
  278. <select class="form-control" id="edit_customerFrom" placeholder="客户来源" name="cust_source">
  279. <option value="">--请选择-- option>
  280. <c:forEach items="${fromType}" var="item">
  281. <option value="${item.dict_id}"<c:if test="${item.dict_id == custSource}"> selected c:if>>${item.dict_item_name } option>
  282. c:forEach>
  283. select>
  284. div>
  285. div>
  286. <div class="form-group">
  287. <label for="edit_custIndustry" style="float:left;padding:7px 15px 0 27px;">所属行业 label>
  288. <div class="col-sm-10">
  289. <select class="form-control" id="edit_custIndustry" name="cust_industry">
  290. <option value="">--请选择-- option>
  291. <c:forEach items="${industryType}" var="item">
  292. <option value="${item.dict_id}"<c:if test="${item.dict_id == custIndustry}"> selected c:if>>${item.dict_item_name } option>
  293. c:forEach>
  294. select>
  295. div>
  296. div>
  297. <div class="form-group">
  298. <label for="edit_custLevel" style="float:left;padding:7px 15px 0 27px;">客户级别 label>
  299. <div class="col-sm-10">
  300. <select class="form-control" id="edit_custLevel" name="cust_level">
  301. <option value="">--请选择-- option>
  302. <c:forEach items="${levelType}" var="item">
  303. <option value="${item.dict_id}"<c:if test="${item.dict_id == custLevel}"> selected c:if>>${item.dict_item_name } option>
  304. c:forEach>
  305. select>
  306. div>
  307. div>
  308. <div class="form-group">
  309. <label for="edit_linkMan" class="col-sm-2 control-label">联系人 label>
  310. <div class="col-sm-10">
  311. <input type="text" class="form-control" id="edit_linkMan" placeholder="联系人" name="cust_linkman">
  312. div>
  313. div>
  314. <div class="form-group">
  315. <label for="edit_phone" class="col-sm-2 control-label">固定电话 label>
  316. <div class="col-sm-10">
  317. <input type="text" class="form-control" id="edit_phone" placeholder="固定电话" name="cust_phone">
  318. div>
  319. div>
  320. <div class="form-group">
  321. <label for="edit_mobile" class="col-sm-2 control-label">移动电话 label>
  322. <div class="col-sm-10">
  323. <input type="text" class="form-control" id="edit_mobile" placeholder="移动电话" name="cust_mobile">
  324. div>
  325. div>
  326. <div class="form-group">
  327. <label for="edit_zipcode" class="col-sm-2 control-label">邮政编码 label>
  328. <div class="col-sm-10">
  329. <input type="text" class="form-control" id="edit_zipcode" placeholder="邮政编码" name="cust_zipcode">
  330. div>
  331. div>
  332. <div class="form-group">
  333. <label for="edit_address" class="col-sm-2 control-label">联系地址 label>
  334. <div class="col-sm-10">
  335. <input type="text" class="form-control" id="edit_address" placeholder="联系地址" name="cust_address">
  336. div>
  337. div>
  338. form>
  339. div>
  340. <div class="modal-footer">
  341. <button type="button" class="btn btn-default" data-dismiss="modal">关闭 button>
  342. <button type="button" class="btn btn-primary" onclick="updateCustomer()">保存修改 button>
  343. div>
  344. div>
  345. div>
  346. div>
  347. <script src="<%=basePath%>js/jquery.min.js"> script>

你可能感兴趣的:(JavaWeb)