这几天研究了一下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 我的代码打包