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>
