该实例基于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实现后台管理模板"涉及的主要知识点是Java Web开发中的SSM框架集成以及前端EasyUI的使用，主要用于构建后台管理系统。SSM框架指的是Spring、SpringMVC和MyBatis的组合，它们在Java...
本项目聚焦于如何在Spring MVC中集成EasyUI的Grid组件实现分页功能，这是一个常见的Web开发场景，对于提高用户体验和减轻服务器压力至关重要。 **Spring MVC** 是一个强大的MVC（Model-View-Controller）框架，它由...
标题“easyui-dwr”指的是一个使用EasyUI框架与DWR（Direct Web Remoting）集成的数据加载解决方案。EasyUI是一个基于jQuery的轻量级前端框架，用于构建用户界面，而DWR则是一种允许JavaScript在浏览器中直接调用...
EasyUI 是一个基于 jQuery 的前端框架，主要用于快速构建用户界面，尤其适用于后台管理系统。这个"easyUI例子_easyui1.4.4"压缩包提供了一套使用 EasyUI 1.4.4 版本的经典后台管理模板，适用于开发人员快速搭建功能...
3. **数据绑定和异步交互**：EasyUI与后端服务进行数据交换通常采用Ajax技术，实现了界面与数据的实时同步，增强了用户体验。 4. **主题定制**：EasyUI支持多种预设主题，同时也允许开发者自定义主题，以满足个性化...
在本项目中，"easyui datagrid 分页查询样例"是利用EasyUI Datagrid与后端SpringMVC框架集成，实现数据的后台分页查询功能。下面将详细阐述这一知识点。 首先，EasyUI Datagrid的核心在于其强大的数据绑定能力，它...
在IT行业中，分页是网页应用中不...综上所述，结合EasyUI的前端分页展示和SpringMVC的后台处理，我们可以构建出一个高效且用户体验良好的分页系统。通过不断优化和调整，可以适应各种复杂的需求，提高用户的使用体验。
EasyUI的日历组件设计精美，功能齐全，可以与后台数据无缝对接，实现灵活的日期选择和时间管理。 此外，模板还可能包含了权限管理、数据表单验证、表单提交等功能，这些都是公共安全管理平台不可或缺的部分。EasyUI...
demo-easyui.rar此文件是将数据库中的表的数据提取到页面上,并用easyui将其实现分页。里面的table.jsp使用前端进行分页table2.jsp使用后台进行分页,当你转好tomcat后,运行tomcat服务器。可以通过...
后台模板HTML+整套Easyui皮肤组件-后台管理系统模板后台模板HTML+整套Easyui皮肤组件-后台管理系统模板后台模板HTML+整套Easyui皮肤组件-后台管理系统模板后台模板HTML+整套Easyui皮肤组件-后台管理系统模板后台模板...
EasyUI皮肤组件UI设计 这套easyui皮肤，用了扁平化的设计风格，在easyui官方最新版jQuery EasyUI 1.4.5的基础上重新设计所有组件，与easyui默认皮肤一样，可以很方便的进行替换设置，并且也可以很方便的对本套皮肤...
通过学习和理解这个例子，你可以了解到如何将EasyUI的分页组件与Java后端相结合，实现高效的数据分页功能。 总结来说，"EasyUI分页的小例子"展示了如何利用EasyUI的分页组件和Java的Struts2框架协同工作，实现Web...
在这个分页实现中，MyBatis将用于编写SQL查询以获取分页数据，并且能方便地与SpringMVC整合。 EasyUI是一个基于jQuery的UI插件集合，主要用于构建桌面应用的用户界面。它提供了丰富的组件，如表格、对话框、下拉...
easyui漂亮的后台管理框架，共12套，花钱购买的，有橙色模版，黑色模版，红色模版，蓝色模版，绿色模版，浅蓝色模版，深灰模版，深蓝模版，office2016版，数字管理系统，信息考核系统，云平台以及PSD源图。
SSM+EasyUI整合案例是将Spring、SpringMVC和MyBatis这三大Java Web开发框架与EasyUI前端组件库结合使用的一个实践项目。这个整合案例可以帮助开发者更好地理解和掌握这四大技术的协同工作，提高开发效率，打造用户...
EasyUI的分页功能使得在大量数据展示时能有效提高用户体验，通过简单的配置即可实现分页效果。 4. EasyUI分页：在EasyUI中，表格组件提供了内置的分页功能。通过设置“pagination”属性为true，可以启用分页。同时...
在本文中，我们将深入探讨EasyUI中的Combobox组件以及如何实现与后台的交互。EasyUI是一个基于jQuery的轻量级前端框架，它提供了一系列易于使用的UI组件，包括Combobox，用于创建下拉列表框，同时支持后台数据加载，...
在这个“easyui简单表格实现分页案例”中，我们将探讨如何在SSM（Spring、SpringMVC、MyBatis）框架下利用EasyUI的表格组件实现分页功能，并结合MySQL数据库进行数据操作。 首先，我们需要了解SSM框架的基本概念。...
在IT行业中，SSH整合EasyUI实现添加、删除和分页是一项常见的前端与后端交互功能。这个主题涉及到几个关键的技术领域，包括Struts2（S）、Spring（S）和Hibernate（H），以及EasyUI和MySQL数据库。下面我们将深入...