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

标签: jquery easyui crud | 发表时间:2014-02-13 22:11 | 作者:rlox
出处:http://www.iteye.com
注:这个程序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数据发送了几次然后再来做。

已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [jquery easyui crud] 推荐:

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

- - Web前端 - ITeye博客
注:这个程序jsp的源代码在这个http://www.jeasyui.com/demo/main/index.php网址的basic crud里面下载它用的是html + php 我们今天要把他改成 Java后台 struts + hibernate + ibatis. 这里是jsp代码easyui.jsp.

jQuery EasyUI 1.3.5 发布

- - 开源中国社区最新新闻
jQuery EasyUI 1.3.5 发布,此版本修复了bugs和增加了一些改进. 下载: jquery-easyui-1.3.5.zip.

Jquery easyui 下loaing效果

- - CSDN博客推荐文章
beforeSend:ajaxLoading,\\发送请求前打开进度条. ajaxLoadEnd();\\任务执行成功,关闭进度条. 作者:songhfu 发表于2013-8-10 17:24:30 原文链接. 阅读:15 评论:0 查看评论.

JQuery EasyUi之界面设计——前言与界面效果(一)

- - 博客园_首页
如果冯巩的开场白是“观众朋友们,我想死你们了”,那么我的开场白是“最近一直很忙,很久没有发文了”. 前面说过了EXT.NET,这里顺便再说说JQuery EasyUI. 为啥我会选择JQuery EasyUI呢. 基本的组件都用,即“麻雀虽小五脏俱全”. 使用简洁方便,比如支持html+js. 世上没有完美的产品,而且其对IE6的兼容性还存在一些问题,但相比extjs,其还是很方便阅读和修改的.

基于jquery-easyui的仓库管理系统

- - CSDN博客Web前端推荐文章
使用jQuery EasyUI创建的仓库管理系统包括系统管理、数据维护、业务单据管理等,有兴趣可以对其进行修改扩展. 数据库采用MYSQL, 帐号/密码:root/root,演示登录帐号/密码:admin/admin. 数据库配置信息可以修改配置文件:/WEB-INF/classes/activerecord.properties.

浅析jQuery EasyUI响应式布局的实现方案

- - WebUI框架使用参考
首先解释一下本篇文章标题中提到的“jQuery EasyUI响应式布局”,这里是指EasyUI里布局类组件的fit属性,也就是实现自适应的属性. 到了1.4版本,新增了一个宽度百分比的概念,既可以用在布局类组件上,也可用在表单类组件上,但是其实现方案跟fit是类似的. 也就是说,jQuery EasyUI的自适应布局包含两块内容:.

MongoDB对图片进行CRUD操作——与JAVA结合

- - CSDN博客推荐文章
        上几篇博客简单对MongoDB进行了简单介绍和如何安装,以及在dos下是如何操作MongoDB和在安装MongoDB中,出现了什么错误,是如何解决的. 当然这些都还不够,我们还要用到实际当中去. 我用MyEclipse+JDK1.7做了一个简单的demo,来展示下MongoDB怎么运用到实际中去.

吐槽一次MVC与Jq EasyUI的经历

- - 博客园_首页
MVC在Web开发中的优势(在TDD方面、逻辑与UI的彻底分离)已无需多言,除此之外个人感觉在给UI提供JSON各式的数据也更加方便. 但是总体上说,在公司的这次MVC经历最后的感觉还是比较失败. 个人记录下来在此做个反思,同时希望和大家一起交流,向大家学习. 首先从以上截图中, 个人就犯错了. 从整体架构上来说,项目中的授权部分(Accredit )之前是希望通过AOP的方式进行的,最后和在基础加上的AOP部分就发生了剧烈的冲突.

easyui datagrid 大数据加载效率慢,优化解决方法

- - Web前端 - ITeye博客
在使用easyui datagrid途中发现加载数据的效率真的不是一般的差. 经测试IE8加载300条数据就感觉明显的慢了,加载2000条数据就另人崩溃用时差不多60 秒,就算在google浏览器测试结果也快不了几秒. 平时听闻easyui datagrid效率底下,自己测试才发现真是使人无法忍受.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥,因为它并没有将网页内容和行为分离,所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.