【叨、校长】EasyUI Grid与DWR整合实现后台分页

最新推荐文章于 2019-05-08 14:51:45 发布

wbdaodao

最新推荐文章于 2019-05-08 14:51:45 发布

阅读量149

点赞数

分类专栏： Jquery 文章标签： jquery dwr web javascript ViewUI

Jquery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用EasyUI框架结合dwrloader.js插件，实现数据的网格化展示，包括web.xml、dwr.xml配置，后台数据库操作类、业务逻辑类、数据结构、数据对象实体以及界面代码的详细步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

该实例基于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了！