该实例基于EasyUI框架实现,使用EasyUI官方dwrload.js插件,通俗易懂、老少皆宜! --叨、校长
使用的插件、jar包:
1、dwr.jar
2、commons-logging.jar,commons-lang.jar
2、dwrloader.js
web.xml的配置
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet> <servlet-name>dwr-invoker</servlet-name> <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
dwr.xml配置:
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> <dwr> <allow> <convert match="com.master.bean.Joke" converter="bean"></convert> <convert match="com.master.bean.ListRange" converter="bean"></convert> <create creator="new" javascript="GAction"> <param name="class" value="com.master.action.GridAction" /> </create> </allow> </dwr>
后台应用:数据库操作类:
public class DataService { public ListRange getList(int start,int limit) throws SQLException{ JDBCUtil util=new JDBCUtil(); ListRange range=new ListRange(); Connection conn=util.getConnect(); Statement stmt=conn.createStatement(); String sql="select uuid,title,type,time from xiaohua limit "+start+","+limit; String sql2="select count(*) from xiaohua"; ResultSet set=stmt.executeQuery(sql); List<Joke> list=new ArrayList<Joke>(); while(set.next()){ Joke joke=new Joke(); joke.setUuid(set.getString(1)); joke.setTitle(set.getString(2)); joke.setType(set.getString(3)); joke.setTime(set.getString(4)); list.add(joke); } set=stmt.executeQuery(sql2); int total=0; while(set.next()){ total=set.getInt(1); } range.setRows(list.toArray()); range.setTotal(total); return range; } }
业务逻辑类:
public class GridAction { DataService service=new DataService(); public ListRange getGridData(Map map){ int start=Integer.parseInt(map.get("page").toString()); int limit=Integer.parseInt(map.get("rows").toString()); ListRange range=null; try { range=service.getList(start, limit); } catch (SQLException e) { e.printStackTrace(); } return range; } }
数据结构ListRange.java
package com.master.bean; public class ListRange { public int total; public Object[] rows; /** * @return the total */ public int getTotal() { return total; } /** * @param total the total to set */ public void setTotal(int total) { this.total = total; } /** * @return the rows */ public Object[] getRows() { return rows; } /** * @param rows the rows to set */ public void setRows(Object[] rows) { this.rows = rows; } }
数据对象实体:
Joke.java
package com.master.bean; public class Joke { private String uuid; private String title; private String type; private String time; /** * @return the uuid */ public String getUuid() { return uuid; } /** * @param uuid the uuid to set */ public void setUuid(String uuid) { this.uuid = uuid; } /** * @return the title */ public String getTitle() { return title; } /** * @param title the title to set */ public void setTitle(String title) { this.title = title; } /** * @return the type */ public String getType() { return type; } /** * @param type the type to set */ public void setType(String type) { this.type = type; } /** * @return the time */ public String getTime() { return time; } /** * @param time the time to set */ public void setTime(String time) { this.time = time; } }
界面代码:
<html> <head> <title>My JSP 'sgrid.jsp' starting page</title> <script type='text/javascript' src='/JUI/dwr/interface/GAction.js'></script> <script type='text/javascript' src='/JUI/dwr/engine.js'></script> <script type='text/javascript' src='/JUI/dwr/util.js'></script> <link rel="stylesheet" type="text/css" href="jquery/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery/themes/icon.css"> <script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery/jquery.easyui.min.js"></script> <script type="text/javascript" src="js/dwrloader.js"></script> <script type="text/javascript"> $(function(){ $('#dg').datagrid({ columns: [[ {field:"uuid",title:'ID',width:80}, {field:"title",title:'title',width:300}, {field:"type",title:'type',width:100}, {field:"time",title:'time',width:100} ]], singleSelect: true, autoRowHeight: false, width: 580, height: 400, pagination:true, url: GAction.getGridData }); }); </script> </head> <body> <table id="dg"></table> </body> </html>
运行项目就OK了!
相关推荐
SSM-EasyUi_SSM整合EasyUI实现后台管理模板(Spring+springmvc+mybatis+shiro.zip
spring mvc easyui grid 分页前后台操作,我把基础的js移除了,只剩下技术必须的,有什么问题可以留言讨论
struts2.3+hibernate4.1+spring3.2+EasyUI1.36整合实现的java后台管理系统
案例8:Spring整合Spring MVC与Hibernate + EasyUI实现电子商城后台订单管理.docx案例8:Spring整合Spring MVC与Hibernate + EasyUI实现电子商城后台订单管理.docx案例8:Spring整合Spring MVC与Hibernate + EasyUI...
案例8:Spring整合Spring MVC与Hibernate + EasyUI实现电子商城后台订单管理.pdf案例8:Spring整合Spring MVC与Hibernate + EasyUI实现电子商城后台订单管理.pdf案例8:Spring整合Spring MVC与Hibernate + EasyUI...
demo-easyui.rar此文件是将数据库中的表的数据提取到页面上,并用easyui将其实现分页。里面的table.jsp使用前端进行分页table2.jsp使用后台进行分页,当你转好tomcat后,运行tomcat服务器。可以通过...
一套EASYUI的经典后台管理模板easyui的后台管理实例运行环境浏览器项目技术(必填)easyui+jquery1.4.4
EasyUI做的漂亮的后台管理框架 基于easyui的后台ui,包括对easyui的扩展,及前台封装.此demo一直在完善中
公司项目分页处理,感觉不错,分享一下。easyui前端渲染,后台用page、basepage做分页处理,以及springmvc的应用。
NETMVC+Dapper+EasyUI实现增删改查和分页,使用VS2013+SQL2008
本文实例讲述了easyUI 实现的后台分页与前台显示功能。分享给大家供大家参考,具体如下: 之前我写过一篇文章,实现 easyui 前台分页,当时使用了分页过滤器,链接如下: https://www.jb51.net/article/187747.htm ...
基于ssm框架使用easyui简单表格实现分页案列 附带mysql数据库表
easyui中combobox后台交互实例
该文件包含源代码以及后台数据库,真实有效,还附带一份easyui的中文api文档,代码中有注释,适合新手
自己整理的ssm+easyUI整合案列(紫薯紫薯紫薯紫薯紫薯)
easyui漂亮的后台管理框架,共12套,花钱购买的,有橙色模版,黑色模版,红色模版,蓝色模版,绿色模版,浅蓝色模版,深灰模版,深蓝模版,office2016版,数字管理系统,信息考核系统,云平台以及PSD源图。
是用java和easyUI的一个分页例子 ,可以给刚刚接触easyUi的朋友们看看,高手请绕行
SSH整合EasyUI实现添加,删除,分页,里面有sql命令,ces凑字数凑字数凑字数凑字数凑字数凑字数凑字数
springmvc+mybatis+easyUI 实现前台页面分页的功能,,,