基于SSH框架的EasyUI的前端DataGrid实现
2016-03-16 09:10
597 查看
这几天研究了一下EasyUI，它的后台代码都是php写的，我的工作就是后台用SSH框架写好，在前端显示。
1.先加好数据，在10条数据以上
2.写Web端，web的写法可以直接copy EasyUI的源码，只需要修改一下URL,和field属性。如下
2.Action，必须返回的是json数组给前端，而且返回的数据必须是一个"total"（总条目数）和"rows"（所有显示的后台数据），我的代码中把所有的数据封装在HashMap(result)中，代码如下：
http://download.csdn.net/detail/c20061924/9465966 我的代码打包
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="In
4000
cidentDataProcessAction!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" onclick="newUser()">New User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="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" onclick="saveUser()">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="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 我的代码打包
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- LeetCode-63-Unique Paths II(动规)-Medium
- php关联数组通过key获取value
- UESTC 758 P酱的冒险旅途
- 如何得到Ubuntu UI Toolkit的版本
- POJ 3061 Subsequence （尺取）
- IOS NSOperation&NSOperationQueue
- 如何获取网页验证码图片并保存到本地（Java实现） [问题点数：40分，结帖人lanxuezaipiao]
- UGUI动态改变Grid大小
- UVA 11538Chess Queen
- 深度学习方法（七）：最新SqueezeNet 模型详解，CNN模型参数降低50倍，压缩461倍！
- 深度学习方法（七）：最新SqueezeNet 模型详解，CNN模型参数降低50倍，压缩461倍！
- 深度学习方法（七）：最新SqueezeNet 模型详解，CNN模型参数降低50倍，压缩461倍！
- iOS开发笔记12:iOS7上UITextField限制字数输入导致崩溃问题
- Leetcode Longest Consecutive Sequence
- UIWindow的研究
- UIGraphicsBeginImageContext
- UITableView性能优化
- caffe代码阅读3：data_reader、internalthread以及blocking_queue的实现细节-2016.3.15
- iOS-UIDynamic物理仿真-推力-UIPushBehavior
- com/opensymphonyork2/inject/ContainerBuilder.java:132:-1