`

一个关于jquery easyui crud demo 的一个例子

jqueryjsonibatisstruts框架 
阅读更多
注：这个程序jsp的源代码在这个http://www.jeasyui.com/demo/main/index.php网址的basic crud里面下载它用的是html + php 我们今天要把他改成 Java后台 struts + hibernate + ibatis

这里是jsp代码easyui.jsp 

<%@ 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%>">

		<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
		<link rel="stylesheet" type="text/css"
			href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css"
			href="http://www.jeasyui.com/easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css"
			href="http://www.jeasyui.com/easyui/demo/demo.css">
		<script type="text/javascript"
			src="http://code.jquery.com/jquery-1.6.min.js"></script>
		<script type="text/javascript"
			src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

	</head>

	<body>
		<h2>
			Basic CRUD Application
		</h2>
		<div class="demo-info" style="margin-bottom: 10px">
			<div class="demo-tip icon-tip">
				&nbsp;
			</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="personOption!queryPersons.action" toolbar="#toolbar"
			pagination="true" rownumbers="true" fitColumns="true"
			singleSelect="true">
			<thead>
				<tr>
					<th field="id" width="50">
						id
					</th>
					<th field="xm" width="50">
						xm
					</th>
					<th field="sfzh" width="50">
						sfzh
					</th>

				</tr>
			</thead>
		</table>
		<div id="toolbar">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				onclick=newUser();>New User</a>
			<a href="javascript:void(0)" class="easyui-linkbutton"
				onclick=editUser();>Edit User</a>
			<a href="javascript:void(0)" class="easyui-linkbutton"
				onclick=destroyUser();>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>
						id:
					</label>
					<input name="id" class="easyui-validatebox" required="true">
				</div>
				<div class="fitem">
					<label>
						xm:
					</label>
					<input name="xm" class="easyui-validatebox" required="true">
				</div>
				<div class="fitem">
					<label>
						sfzh:
					</label>
					<input name="sfzh">
				</div>
			</form>
		</div>
		<div id="dlg-buttons">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-ok" onclick=saveUser();>Save</a>
			<a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-cancel" onclick=javascript:$('#dlg').dialog('close');
>Cancel</a>
		</div>
		<script type="text/javascript">
	var url;
	function newUser() {
		$('#dlg').dialog('open').dialog('setTitle', 'New User');
		$('#fm').form('clear');
		url = 'personOption!savePerson.action';
	}
	function editUser() {
		var row = $('#dg').datagrid('getSelected');
		if (row) {
			$('#dlg').dialog('open').dialog('setTitle', 'Edit User');
			$('#fm').form('load', row);
			url = 'personOption!updatePerson.action';
		}
	}
	function saveUser() {
		$('#fm').form('submit', {
			url : url,
			onSubmit : function() {
				return $(this).form('validate');
			},
			success : function(result) {
				var result = eval('(' + result + ')');
				if (result.errorMsg) {
					$.messager.show( {
						title : 'Error',
						msg : result.errorMsg
					});
				} else {
						//alert("aaa");
			$('#dlg').dialog('close'); // close the dialog
			$('#dg').datagrid('reload'); // reload the user data
		}
	}
		});
	}
	function destroyUser() {
		var row = $('#dg').datagrid('getSelected');
		if (row) {
			$.messager.confirm('Confirm',
					'Are you sure you want to destroy this user?', function(r) {
						if (r) {
							$.post('personOption!deletePerson.action', {
								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.errorMsg
											});
								}
							}, 'json');
						}
					});
		}
	}
</script>
		<style type="text/css">
#fm {
	margin: 0;
	padding: 10px 30px;
}

.ftitle {
	font-size: 14px;
	font-weight: bold;
	padding: 5px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

.fitem {
	margin-bottom: 5px;
}

.fitem label {
	display: inline-block;
	width: 80px;
}
</style>
	</body>
</html>

这个是接收那个Action当然还有很多类和方法都没有贴出来 

import java.io.IOException;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.annotation.Resource;

import net.sf.json.JSONArray;

import org.codehaus.jackson.JsonGenerationException;
import org.codehaus.jackson.JsonGenerator;
import org.codehaus.jackson.map.JsonMappingException;
import org.codehaus.jackson.map.ObjectMapper;
import org.springframework.stereotype.Component;
import com.opensymphony.xwork2.ActionContext;


@Component("personOption")
@SuppressWarnings("serial")
public class PersonOptionAction extends BaseAction {
	
	public IPersonLogic personLogic;
	private String id;
	private String xm;
	private String sfzh;

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}


	public String getXm() {
		return xm;
	}

	public void setXm(String xm) {
		this.xm = xm;
	}

	public String getSfzh() {
		return sfzh;
	}

	public void setSfzh(String sfzh) {
		this.sfzh = sfzh;
	}

	public int queryPersonsCount(){
		return personLogic.queryPerson().size();
	}

	/**
	 * 查询所有人员信息
	 * @return
	 */
	public String queryPersons() throws IOException{
		ActionContext.getContext().getActionInvocation().getProxy().setExecuteResult(false);
		List<Person> list = personLogic.queryPerson();
		this.getRequest().setAttribute("list", list);
		
		
		
		JSONArray jsonArray  = JSONArray.fromObject(list);
		int count = this.queryPersonsCount();
		String str = "{\"total\":"+count+",\"rows\":"+jsonArray+"}";
		List list2 = new ArrayList();
		list2.add(jsonArray);
		Map<String,Object> map = new HashMap();
		map.put("total", count);
		map.put("rows", jsonArray);
		ObjectMapper objectMapper = new ObjectMapper();
		objectMapper.writeValue(this.getResponse().getOutputStream(), map );
		
		
		return "queryPersons";
	}
	
	/**
	 * 删除指定人员信息
	 * @return
	 */
	public String deletePerson() throws Exception {
		ObjectMapper objectMapper = new ObjectMapper();
		Map<String ,Object> map = new HashMap<String,Object>();
		boolean b = personLogic.deletePerson(id);
		if(b == true){
			map.put("success", true);
			objectMapper.writeValue(this.getResponse().getOutputStream(), map);
		}else{
			map.put("success", false);
		}
		return "deletePerson";
	}

	/**
	 * 保存人员信息
	 * @param person
	 * @return
	 */
	public String savePerson() throws Exception{
		//System.out.println(id + xm + sfzh);
		Person person = new Person();
		person.setId(id);
		Date rksj = new Date();
		person.setRksj(rksj);
		person.setSfzh(sfzh);
		person.setXm(xm);
		personLogic.savePerson(person);
		ObjectMapper objectMapper = new ObjectMapper();
		objectMapper.writeValue(this.getResponse().getOutputStream(), person);
	
		return "savePerson";
	}

	/**
	 * 更新人员信息
	 * @param person
	 * @return
	 */
	public String updatePerson() throws Exception {
		System.out.println("id=" + id + "xm="+xm + "sfzh="+sfzh);
		Person person = new Person();
		person.setId(id);
		Date rksj = new Date();
		person.setRksj(rksj);
		person.setSfzh(sfzh);
		person.setXm(xm);
		List<Person> list = personLogic.queryPerson();
		
		for(Person person2 : list){
			if(person2.getId().equals(person.getId())){
				personLogic.updatePerson(person);
				ObjectMapper objectMapper = new ObjectMapper();
				objectMapper.writeValue(this.getResponse().getOutputStream(), person);
			}
		}
		personLogic.queryPerson();
		return "updatePerson";
	}
	
	public String updatePersonjsp(){
		System.out.println(id);
		List<Person> list = personLogic.queryPerson();
		
		for(Person person : list){
			if(person.getId().equals(id)){
				this.getRequest().setAttribute("person", person);
			}
		}
		return "updatePersonjsp";
	}
	

	public IPersonLogic getPersonLogic() {
		return personLogic;
	}
	@Resource(name="personLogic")
	public void setPersonLogic(IPersonLogic personLogic) {
		this.personLogic = personLogic;
	}
	
	

}

要注意这里面最重要的是json数据的处理最好用到 Jackson这个框架这个框架里面有个ObjectMapper这个类能把各种形式的例如 javabean，list，map还有字符串等等封装成json数据，还有就是要看网站上面标准的代码的数据是怎样接收的。最好用浏览器或者是像httpwatch这样的工具来看一下到底发送的是怎样格式的json数据发送了几次然后再来做。
分享到：
| struts2文件上传
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    easyui-crud-demo

    总结，"easyui-crud-demo" 是一个实用的教程，它演示了如何利用jQuery EasyUI构建一个完整的CRUD应用，涵盖了前端与后端的交互、数据的展示和操作，对于学习EasyUI和PHP Web开发具有很高的参考价值。通过深入理解...

    基于SSH + jquery easyui 的一个通讯录Demo

    在这个基于SSH + jQuery EasyUI的通讯录Demo中，我们将深入探讨这两个技术如何协同工作，实现一个具有基本增删改查功能的通讯录应用。 **1. Struts2：MVC框架** Struts2作为MVC（Model-View-Controller）框架，负责...

    easyui简易demo

    EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列易于使用的组件，帮助开发者快速构建具有现代用户界面的 web 应用程序。这个“easyui简易demo”是一个示例项目，展示了如何在实际应用中使用 EasyUI，并且包含...

    基于jquery-easyui的用户管理系统实例

    【基于jQuery EasyUI的用户管理系统】是一个典型的Web应用程序实例，它利用了jQuery EasyUI这个强大的前端框架来构建用户友好的界面，并结合后端技术（如PHP）处理数据交互。EasyUI是一个基于jQuery的UI库，提供了...

    crud-demo_easyui增删查改_zip_

    【标题】"crud-demo_easyui增删查改_zip_" 指的是一个使用EasyUI框架实现的CRUD（Create, Read, Update, Delete）操作演示项目，被压缩为ZIP格式的文件。CRUD是数据库操作的基本功能，代表创建、读取、更新和删除...

    mvc4.0+easyui-CRUD

    **EasyUI**是一个基于jQuery的UI库，专门用于创建桌面级的Web应用界面。它提供了一系列预定义的CSS样式和JavaScript组件，如表格、对话框、下拉菜单等，可以帮助开发者快速构建美观、响应式的用户界面。EasyUI与MVC...

    easyui-crud-demo.zip

    EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列易于使用的组件，如对话框、表单、数据网格等，用于快速构建美观且响应式的 Web 应用程序。在 "easyui-crud-demo.zip" 这个压缩包中，我们可以看到一个使用 ...

    jquery-easyui-1.5.4.zip demo 源码

    jQuery EasyUI是一个基于jQuery的轻量级前端框架，它提供了丰富的UI组件，使得开发者能够快速构建功能完善的Web应用。这个“jquery-easyui-1.5.4.zip”压缩包包含了一个版本为1.5.4的jQuery EasyUI的源码示例，这将...

    EasyUI使用的demo

    这个名为"EasyUI使用的demo"的项目是为初学者准备的一个实例，它展示了EasyUI在实际应用中的基本用法，包括系统布局、数据操作以及窗口间通信等多个方面。 1. **整体布局**：EasyUI提供了多种布局模式，如`grid`、`...

    SSH和easyui整合Demo

    EasyUI则是一个基于jQuery的前端框架，主要用于构建用户界面。它提供了一系列预定义的CSS样式和JavaScript组件，如表格、表单、对话框、菜单等，使得开发者可以快速创建出美观且响应式的Web页面。EasyUI与Struts2...

    spring mvc+ibatis+mysql+easyui简单demo

    iBATIS是一个持久层框架，它允许开发者将SQL语句与Java代码直接绑定，简化了数据库操作。在Spring MVC应用中，iBATIS通常作为数据访问对象（DAO）层的实现。通过XML配置或注解，开发者可以定义SQL映射文件，将SQL...

    mvc easyui 项目 demo 增删改查

    标题“mvc easyui 项目 demo 增删改查”表明这是一个基于MVC（Model-View-Controller）框架和EasyUI库的Web应用示例，主要功能集中在基本的数据操作：增加、删除、修改和查询。这个项目可能是为了帮助初学者理解如何...

    SpringMVC+Spring Data JPA+Shiro+EasyUI 简单demo

    EasyUI是一个基于jQuery的UI库，主要用于创建美观的Web界面。它提供了丰富的组件，如表格、表单、窗口、菜单、对话框、按钮等，使得开发者可以快速搭建具有专业外观的Web应用。EasyUI遵循MVC原则，与SpringMVC的结合...

    jQuery EasyUI 1.3 API 中文教程

    创建一个课程表 创建简单的菜单 按钮与布局 创建Link Button 创建Menu Button 创建Split Button 创建border layout 在panel中创建复杂布局 创建折叠面板 创建Tabs标签 创建和动态添加tabs组件 ...

    easyui+三层+json增删改查DEMO

    【标题】"easyui+三层+json增删改查DEMO"是一个基于EasyUI前端框架，结合三层架构和JSON数据格式实现的Web应用程序示例，主要用于演示如何在实际项目中进行CRUD（创建、读取、更新、删除）操作。这个DEMO涵盖了...

    Maven+springmvc+mybatis+easyui+mysql DEMO

    【Maven+SpringMVC+MyBatis+EasyUI+MySQL DEMO】是一个典型的Java Web项目集成示例，它展示了如何将这些流行的技术框架整合在一起，以构建一个功能丰富的Web应用。下面将详细介绍这些技术及其在项目中的作用。 1. ...

    easyuidemo:easyui的demo，包括CRUD操作、级联、datagrid、echarts等。使用oracle、jdbc、servlet

    【easyuidemo】项目是一个基于EasyUI框架的演示应用，主要展示了如何在Java环境中集成和使用EasyUI进行数据展示和交互。EasyUI是一款基于jQuery的轻量级前端UI库，它提供了丰富的组件，如对话框、表格、表单、树形...

    Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo

    综上所述，这个项目是一个综合性的企业网站演示，利用了Spring.NET、NHibernate、ASP.NET MVC、jQuery 和 easyUI 这些技术栈，展示了如何将开源框架整合在一起，构建一个中英文双语的小型企业网站。通过学习这个项目...

    java后台+easyui框架实现的所有demo

    EasyUI是一个基于jQuery的UI库，提供了大量的预定义样式和组件，如表格、下拉菜单、树形结构、对话框等，使得开发者可以快速地搭建用户界面，节省开发时间。其设计原则是简洁、易用，使得即便是初级开发者也能轻松...

Magicbox
Global site tag (gtag.js) - Google Analytics