基于SSH框架的EasyUI的前端DataGrid实现

最新推荐文章于 2023-04-25 23:52:50 发布

c20061924

最新推荐文章于 2023-04-25 23:52:50 发布

阅读量2k

点赞数 1

分类专栏： EasyUI学习文章标签： easyui ssh 前端框架 datagrid

本文链接：https://blog.csdn.net/c20061924/article/details/50902060

版权

EasyUI学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这几天研究了一下EasyUI，它的后台代码都是php写的，我的工作就是后台用SSH框架写好，在前端显示。

1.先加好数据，在10条数据以上

2.写Web端，web的写法可以直接copy EasyUI的源码，只需要修改一下URL,和field属性。如下

<%@ 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%>">
        
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    --%>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<title>jQuery EasyUI CRUD Demo</title>
	
    <!-- 在官网下载相关的包，把js和css，加上相关的图片放入，可以下载我的源码包 -->
	<link rel="stylesheet" type="text/css" href="easyui/easyui.css">
	<link rel="stylesheet" type="text/css" href="easyui/icon.css">
	<link rel="stylesheet" type="text/css" href="easyui/demo.css">
	<script type="text/javascript" src="easyui/jquery-1.7.js"></script>
	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	<style type="text/css">
		#fm{
			margin:0;
			padding:10px 30px;
		}
		.ftitle{
			font-size:14px;
			font-weight:bold;
			color:#666;
			padding:5px 0;
			margin-bottom:10px;
			border-bottom:1px solid #ccc;
		}
		.fitem{
			margin-bottom:5px;
		}
		.fitem label{
			display:inline-block;
			width:80px;
		}
	</style>
	
	<!--   此处把JavaScript注释掉，没有使用 -->
	<!-- <script type="text/javascript">
		var url;
		function newUser(){
			$('#dlg').dialog('open').dialog('setTitle','New User');
			$('#fm').form('clear');
			url = 'save_user.php';
		}
		function editUser(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$('#dlg').dialog('open').dialog('setTitle','Edit User');
				$('#fm').form('load',row);
				url = 'update_user.php?id='+row.id;
			}
		}
		function saveUser(){
			$('#fm').form('submit',{
				url: url,
				onSubmit: function(){
					return $(this).form('validate');
				},
				success: function(result){
					var result = eval('('+result+')');
					if (result.success){
						$('#dlg').dialog('close');		// close the dialog
						$('#dg').datagrid('reload');	// reload the user data
					} else {
						$.messager.show({
							title: 'Error',
							msg: result.msg
						});
					}
				}
			});
		}
		function removeUser(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){
					if (r){
						$.post('remove_user.php',{id:row.id},function(result){
							if (result.success){
								$('#dg').datagrid('reload');	// reload the user data
							} else {
								$.messager.show({	// show error message
									title: 'Error',
									msg: result.msg
								});
							}
						},'json');
					}
				});
			}
		}
	</script> -->
</head>
<body>
	<h2>Basic CRUD Application</h2>
	<div class="demo-info" style="margin-bottom:10px">
		<div class="demo-tip icon-tip"> </div>
		<div>Click the buttons on datagrid toolbar to do crud actions.</div>
	</div>
	
	<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
			url="IncidentDataProcessAction!getIncidentData.action"
			toolbar="#toolbar" pagination="true"
			rownumbers="true" fitColumns="true" singleSelect="true">
		<thead>
			<tr>
				<th field="id" width="50">First Name</th>   <!-- 此处对应后台实体类中的元素 field属性-->
				<th field="stationUnit" width="50">Last Name</th>
				<th field="categoryCode" width="50">Phone</th>
				<th field="curTrafficFlow" width="50">Email</th>
			</tr>
		</thead>
	</table>
	<div id="toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="newUser()">New User</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">Edit User</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="removeUser()">Remove User</a>
	</div>
	
	<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
			closed="true" buttons="#dlg-buttons">
		<div class="ftitle">User Information</div>
		<form id="fm" method="post" novalidate>
			<div class="fitem">
				<label>First Name:</label>
				<input name="firstname" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>Last Name:</label>
				<input name="lastname" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>Phone:</label>
				<input name="phone">
			</div>
			<div class="fitem">
				<label>Email:</label>
				<input name="email" class="easyui-validatebox" validType="email">
			</div>
		</form>
	</div> 
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" οnclick="saveUser()">Save</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" οnclick="javascript:$('#dlg').dialog('close')">Cancel</a>
	</div> 
</body>
</html>

2.Action，必须返回的是json数组给前端，而且返回的数据必须是一个"total"（总条目数）和"rows"（所有显示的后台数据），我的代码中把所有的数据封装在HashMap(result)中，代码如下：

package com.data;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.data.service.IncidentDataProcessService;
import com.tianmen.entity.Emergencylncident;

import net.sf.json.JSONObject;

public class IncidentDataProcessAction {

	private Map<String, Object> result = new HashMap<String, Object>(); // result变量用于传送Json变量的返回值
	private String page;
	private String rows;

	public String getPage() {
		return page;
	}

	public void setPage(String page) {
		this.page = page;
	}

	public String getRows() {
		return rows;
	}

	public void setRows(String rows) {
		this.rows = rows;
	}

	private IncidentDataProcessService incidentDataProcessService;

	public IncidentDataProcessService getIncidentDataProcessService() {
		return incidentDataProcessService;
	}

	public void setIncidentDataProcessService(
			IncidentDataProcessService incidentDataProcessService) {
		this.incidentDataProcessService = incidentDataProcessService;
	}     	

	public Map<String, Object> getResult() {
		return result;
	}

	public void setResult(Map<String, Object> result) {
		this.result = result;
	}

	public String getIncidentData() {
		int intPage = Integer.parseInt((page == null || page == "0") ? "1":page); 
		int intRows =Integer.parseInt((rows == null || rows == "0") ? "1":rows); 
		
		int total=incidentDataProcessService.getTotal();
		List<Emergencylncident> list = incidentDataProcessService.getIncidentData(intPage, intRows);				

        result.put("total", total);//total键 存放总记录数，必须的  
        result.put("rows", list);//rows键 存放每页记录 list  

		return "JSONRESULT";
	}

}

3.Action层调用的是Service里面的方法，Service再调用Dao层里的方法，这里只展示DAO层的实现类，如下：

public List getIncidentData(int page,int rows) {
		// TODO Auto-generated method stub
		Session session = sessionFactory.openSession();
		session.beginTransaction();
		List list=new ArrayList();
		
		try {
			String hql="from Emergencylncident";
			
			Query query = session.createQuery(hql);			
			//hibernate的分页就依靠这两个set方法，详情请查看API文档。 	
			//这是Hibernate的方法，它会自动的转化成对应数据库的操作，基本数据库都试用
	        //query.setFirstResult(page);   //此处为数据查询的起始点	 
	        //query.setMaxResults(rows);    //此处为结束点，这是Hibernate的方法，它会自动的转化成对应数据库的操作
			 query.setFirstResult((page - 1) * rows);      
                         query.setMaxResults(rows); 

                        
                        list=query.list();
			System.out.println(list);
			session.getTransaction().commit();
			System.out.println(list.size());
			
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			session.close();
		}		
		return list;
	}
	
	public int getTotal(){
		Session session = sessionFactory.openSession();
		session.beginTransaction();
		int total = 0;
		try {
			String hql=" from Emergencylncident";
			Query query = session.createQuery(hql);
			total=query.list().size();
			session.getTransaction().commit();
			
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			session.close();
		}			
		
		return total;
	}

4.展示一下struts.xml的配置,如下

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
	"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
	  <!-- /***********************进站模块相关action配置**********************************/ -->
	  <package name="Report" namespace="/" extends="struts-default,json-default">    			
	  		<action name="IncidentManagementAction" class="IncidentManagementAction">
	  			<result name="JSONRESULT" type="json">
	  				<param name="root">result</param>
	  			</result>	  			
	  		</action>  			  			  		  		  		
	  </package>
	
</struts>

目前就做了显示功能，以后的数据处理功能再添加。有什么问题，可以留言，我有时间会回答。

http://download.csdn.net/detail/c20061924/9465966 我的代码打包