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>

巴特西

java：easyui（jQueryEasyUI，分页）

最新文章

热门文章