Quantcast
Channel: IT社区推荐资讯 - ITIndex.net
Viewing all articles
Browse latest Browse all 15843

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

$
0
0
注:这个程序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推荐




Viewing all articles
Browse latest Browse all 15843

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>