java：easyui（jQueryEasyUI，分页）

1.介绍：

　　jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

2.特点：

　　 1、基于jquery用户界面插件的集合

　　2、为一些当前用于交互的js应用提供必要的功能

　　3、EasyUI支持两种渲染方式分别为javascript方式（如：$('#p').panel({...})）和html标记方式（如：class="easyui-panel"）

　　4、支持HTML5（通过data-options属性）

　　5、开发产品时可节省时间和资源

　　6、简单，但很强大

　　7、支持扩展，可根据自己的需求扩展控件

　　8、目前各项不足正以版本递增的方式不断完善

 

3.ssm-easyui：

 

　　

 

 

 

 

 

 

　　applicationContext.xml：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:aop="http://www.springframework.org/schema/aop"
    xmlns:tx="http://www.springframework.org/schema/tx"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
        http://www.springframework.org/schema/aop
        http://www.springframework.org/schema/aop/spring-aop.xsd
        http://www.springframework.org/schema/tx
        http://www.springframework.org/schema/tx/spring-tx.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd">

    <!-- 1 扫描注解包 -->
    <context:component-scan base-package="cn.zzsxt.ssm"></context:component-scan>  

    <!-- 2.配置数据源DataSource -->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="driverClassName" value="com.mysql.jdbc.Driver"></property>
        <property name="url" value="jdbc:mysql://localhost:3306/test"></property>
        <property name="username" value="root"></property>
        <property name="password" value="root"></property>
    </bean>

    <!-- 3.配置sqlSessionFactory,并注入数据源 -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"></property>
          <!-- 加载cn/zzsxt/ssm/mapper/所有以 Mapper.xml结尾的映射文件 -->
         <property name="mapperLocations" value="classpath:cn/zzsxt/ssm/mapper/*Mapper.xml"></property>
    </bean>

    <!-- 4.配置MapperScannerConfigurer，用于扫描指定包下的Mapper接口，生成代理对象的id为Mapper接口名第一个字母小写 -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="cn.zzsxt.ssm.mapper"></property>
        <property name="sqlSessionFactory" ref="sqlSessionFactory"></property>
    </bean>

    <!-- 配置声明式事务 -->
    <!-- 配置事务管理器,并注入数据源 -->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"></property>
    </bean>

    <tx:advice id="txAdvice" transaction-manager="transactionManager">
        <tx:attributes>
            <tx:method name="add*" propagation="REQUIRED"/>
            <tx:method name="update*" propagation="REQUIRED"/>
            <tx:method name="delete*" propagation="REQUIRED"/>
            <tx:method name="*" propagation="SUPPORTS"/>
        </tx:attributes>
    </tx:advice>
    <aop:config>
        <aop:pointcut expression="execution(* cn.zzsxt.ssm.service.*.*(..))" id="serviceMethods"/>
        <aop:advisor advice-ref="txAdvice" pointcut-ref="serviceMethods"/>
    </aop:config>
</beans>        

　　log4j.properties：

log4j.rootLogger=DEBUG, Console

log4j.appender.Console=org.apache.log4j.ConsoleAppender
log4j.appender.Console.layout=org.apache.log4j.PatternLayout
log4j.appender.Console.layout.ConversionPattern=%-5p - %m%n

log4j.logger.org.mybatis.spring=ERROR
log4j.logger.org.apache.ibatis.logging.LogFactory=ERROR
log4j.logger.com.alibaba.druid.pool.DruidDataSource=ERROR

　　springmvc.xml：

　　

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
      http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
      http://www.springframework.org/schema/mvc
      http://www.springframework.org/schema/mvc/spring-mvc.xsd
      http://www.springframework.org/schema/context
      http://www.springframework.org/schema/context/spring-context.xsd">
     <!-- 注解扫描!!!-->
      <context:component-scan base-package="cn.zzsxt.ssm"></context:component-scan>
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"></property>
        <property name="prefix" value="/WEB-INF/jsp/"></property>
        <property name="suffix" value=".jsp"></property>
    </bean>
    <mvc:annotation-driven></mvc:annotation-driven>
    <mvc:default-servlet-handler/>
</beans>

　　web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">

  <!-- ContextLoaderListener解析spring的配置文件 -->
  <listener>
      <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  <context-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath*:applicationContext.xml</param-value>
  </context-param>

  <!-- 解决post提交乱码问题 -->
  <filter>
      <filter-name>encodingFilter</filter-name>
      <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
      <init-param>
          <param-name>encoding</param-name>
          <param-value>UTF-8</param-value>
      </init-param>
  </filter>
  <filter-mapping>
      <filter-name>encodingFilter</filter-name>
      <url-pattern>/*</url-pattern>
  </filter-mapping>

  <!-- spring mvc的前端控制器,类似struts2的核心过滤器 -->
  <servlet>
      <servlet-name>springmvc</servlet-name>
      <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

     <!-- 通过contextConfigLocation参数指定配置文件的位置，默认在WEB-INF/查找名称为 [servlet-name]-servlet.xml -->
      <init-param>
          <param-name>contextConfigLocation</param-name>
          <param-value>classpath:springmvc.xml</param-value>
      </init-param>

      <!-- servlet随web容器而启动 -->
      <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
      <servlet-name>springmvc</servlet-name>
      <url-pattern>/</url-pattern>
  </servlet-mapping>
</web-app>

　　pom.xml:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>cn.zzsxt</groupId>
    <artifactId>ssm-easyui</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>
    <build>
        <plugins>
              <!-- compiler插件 -->
              <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                  <source>1.8</source>
                  <target>1.8</target>
                </configuration>
              </plugin>
        </plugins>
    </build>
    <dependencies>
        <!-- junit start-->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>
        <!-- junit end-->
        <!--spring start-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>4.3.4.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aspects</artifactId>
            <version>4.3.4.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>4.3.4.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>4.3.4.RELEASE</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>4.3.4.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>4.3.4.RELEASE</version>
        </dependency>
        <!--spring-json����-->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.8.1</version>
        </dependency>

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.8.1</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.8.1</version>
        </dependency>
        <!-- Servlet -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.0.1</version>
            <scope>provided</scope>
        </dependency>
        <!-- JSP -->
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
            <scope>provided</scope>
        </dependency>
        <!-- JSTL -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>joda-time</groupId>
            <artifactId>joda-time</artifactId>
            <version>2.9.4</version>
        </dependency>

        <!--spring end-->
        <!-- database begin -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.40</version>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.0.26</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.3.0</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>1.2.3</version>
        </dependency>
        <!-- database end -->
        <!-- loging begin-->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-log4j12</artifactId>
            <version>1.7.7</version>
        </dependency>
        <!-- loging end -->
        <!-- Mybatis Generator -->
        <dependency>
            <groupId>org.mybatis.generator</groupId>
            <artifactId>mybatis-generator-core</artifactId>
            <version>1.3.5</version>
            <scope>compile</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>tk.mybatis</groupId>
            <artifactId>mapper</artifactId>
            <version>3.3.9</version>
        </dependency>
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>4.1.6</version>
        </dependency>

        <!--文件上传-->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.17</version>
        </dependency>

        <dependency>
            <groupId>redis.clients</groupId>
            <artifactId>jedis</artifactId>
            <version>2.9.0</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.data</groupId>
            <artifactId>spring-data-redis</artifactId>
            <version>1.7.2.RELEASE</version>
        </dependency>
    </dependencies>
</project>

　　UserinfoController.java:

package cn.zzsxt.ssm.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import cn.zzsxt.ssm.service.UserinfoService;
import cn.zzsxt.ssm.vo.QueryPagerVo;
import cn.zzsxt.ssm.vo.ResultPagerVo;

@Controller
@RequestMapping("/user")
public class UserinfoController {

    @Autowired
    private UserinfoService userinfoService;
    /**
     * 查询用户列表并分页
     * rows:分页单位
     * page:当前页
     * @return
     */
    @ResponseBody
    @RequestMapping("/list")
    public ResultPagerVo list(int page,int rows){
//        System.out.println(page+"---"+rows);
        //将用户信息封装成QueryPagerVo对象
        QueryPagerVo queryParam = new QueryPagerVo();
        queryParam.setCurPage(page);
        queryParam.setPageSize(rows);
        ResultPagerVo resultPagerVo = userinfoService.findAllUsers(queryParam);
        return resultPagerVo;
    }

}

　　Userinfo.java:

package cn.zzsxt.ssm.entity;

import java.io.Serializable;

public class Userinfo implements Serializable {
    private int userId;
    private String userName;
    private String userPass;
    private int userType;
    public int getUserId() {
        return userId;
    }
    public void setUserId(int userId) {
        this.userId = userId;
    }
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    public String getUserPass() {
        return userPass;
    }
    public void setUserPass(String userPass) {
        this.userPass = userPass;
    }
    public int getUserType() {
        return userType;
    }
    public void setUserType(int userType) {
        this.userType = userType;
    }
    @Override
    public String toString() {
        return "Userinfo [userId=" + userId + ", userName=" + userName + ", userPass=" + userPass + ", userType="
                + userType + "]";
    }

}

　　UserinfoMapper.java:

package cn.zzsxt.ssm.mapper;

import java.util.List;

import cn.zzsxt.ssm.entity.Userinfo;
import cn.zzsxt.ssm.vo.QueryPagerVo;

public interface UserinfoMapper {
    /**
     * 查询用户信息
     * @return
     */
    List<Userinfo> findAllUsers(QueryPagerVo queryParam);
    /**
     * 查询总记录数
     * @return
     */
    long getTotalRows();
    /**
     * 新增用户
     * @param user
     * @return
     */
    int addUser(Userinfo user);
}

　　UserinfoMapper.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.zzsxt.ssm.mapper.UserinfoMapper">

    <select id="findAllUsers" resultType="cn.zzsxt.ssm.entity.Userinfo" parameterType="cn.zzsxt.ssm.vo.QueryPagerVo">
        select * from userinfo limit #{start},#{pageSize}
    </select>
    <select id="getTotalRows" resultType="java.lang.Long">
        select count(*) from userinfo
    </select>
    <insert id="addUser" parameterType="cn.zzsxt.ssm.entity.Userinfo">
        insert into userinfo(userName,userPass,userType) values(#{userName},#{userPass},#{userType})
    </insert>
</mapper>        

　　UserinfoService.java:

package cn.zzsxt.ssm.service;

import cn.zzsxt.ssm.entity.Userinfo;
import cn.zzsxt.ssm.vo.QueryPagerVo;
import cn.zzsxt.ssm.vo.ResultPagerVo;

public interface UserinfoService {
    /**
     * 查询用户信息
     * @return
     */
    ResultPagerVo findAllUsers(QueryPagerVo queryParam);
    /**
     * 新增用户
     * @param user
     * @return
     */
    int addUser(Userinfo user);
}

　　UserinfoServiceImpl.java:

package cn.zzsxt.ssm.service.impl;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import cn.zzsxt.ssm.entity.Userinfo;
import cn.zzsxt.ssm.mapper.UserinfoMapper;
import cn.zzsxt.ssm.service.UserinfoService;
import cn.zzsxt.ssm.vo.QueryPagerVo;
import cn.zzsxt.ssm.vo.ResultPagerVo;
//<bean id="userinfoService" class="cn.zzsxt.ssm.service.impl.UserinfoServiceImpl"></bean>
@Service
public class UserinfoServiceImpl implements UserinfoService {

    @Autowired
    private UserinfoMapper userinfoMapper;

    @Override
    public ResultPagerVo findAllUsers(QueryPagerVo queryParam) {
        //按照当前页和分页单位查询用户信息
        List<Userinfo> list = userinfoMapper.findAllUsers(queryParam);
        //查询总记录数
        long totalRows = userinfoMapper.getTotalRows();
        //将用户信息和总记录数封装成ResultPagerVo对象
        ResultPagerVo resultPagerVo = new ResultPagerVo();
        resultPagerVo.setRows(list);
        resultPagerVo.setTotal(totalRows);
        return resultPagerVo;
    }

    @Override
    public int addUser(Userinfo user) {
        return userinfoMapper.addUser(user);
    }

}

　　QueryPagerVo.java:

package cn.zzsxt.ssm.vo;

public class QueryPagerVo {
    private int curPage;//当前页
    private int pageSize;//分页单位
    private int start;//起始位置:(当前页-1)*分页单位

    public int getCurPage() {
        return curPage;
    }
    public void setCurPage(int curPage) {
        this.curPage = curPage;
    }
    public int getPageSize() {
        return pageSize;
    }
    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }
    public int getStart() {
        start=(curPage-1)*pageSize;
        return start;
    }
    public void setStart(int start) {
        this.start = start;
    }

}

　　ResultPagerVo.java:

package cn.zzsxt.ssm.vo;

import java.util.List;

/**
 * 封装查询结果
 * @author Think
 *
 */
public class ResultPagerVo {
    private long total;
    private List<?> rows;

    public long getTotal() {
        return total;
    }
    public void setTotal(long total) {
        this.total = total;
    }
    public List<?> getRows() {
        return rows;
    }
    public void setRows(List<?> rows) {
        this.rows = rows;
    }

}

　　index.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>主页</title>

    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript">
        $(function(){
            tab_option = $('#tt').tabs('getTab',"用户列表").panel('options').tab;
            tab_option.hide();
        })

         function addTabs(title){
            if ($('#tt').tabs('exists', title)){
                $('#tt').tabs('select', title);
            } else {
                $("#tt").tabs('add',{
                        title:title,
                        closable:true
                });
            }
            tab_option = $('#tt').tabs('getTab',"用户列表").panel('options').tab;
            tab_option.show();
         }
    </script>
  </head>

  <body>
       <div id="cc" class="easyui-layout" style="width:100%;height:700px">
        <div data-options="region:'north',split:true" style="height:100px;">
            <h1 align="center">权限管理系统</h1>
        </div>
        <div data-options="region:'west',title:'系统菜单',split:true" style="width:200px;">
                <div id="aa" class="easyui-accordion" style="width:192px;height:200px;">
                    <div title="用户管理" style="overflow:auto;padding:10px;">
                        <ul>
                            <li><span id="listUser" onclick="addTabs('用户列表')">用户列表</span></li>
                        </ul>
                    </div>
                    <div title="角色管理"  style="padding:10px;">
                        content2
                    </div>
                    <div title="权限管理">
                        content3
                    </div>
                </div>
        </div>
        <div data-options="region:'center'" id="tt" class="easyui-tabs" style="padding:5px;background:#eee;">
                    <div title="欢迎" style="padding:20px;display:none;">
                        欢迎使用!
                    </div>
                    <div title="用户列表" style="padding:20px;display:none;" data-options="closable:true">
                            <table class="easyui-datagrid" style="width:100%;height:250px"
                                    data-options="url:'user/list',fitColumns:true,singleSelect:true,pagination:true">
                                <thead>
                                    <tr>
                                        <th data-options="field:'userId',width:100">用户编号</th>
                                        <th data-options="field:'userName',width:100">用户名称</th>
                                        <th data-options="field:'userType',width:100">用户类型</th>
                                    </tr>
                                </thead>
                            </table>
                    </div>
        </div>

    </div>
  </body>
</html>