一个关于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 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
这个是接收那个Action当然还有很多类和方法都没有贴出来
要注意这里面最重要的是json数据的处理最好用到 Jackson这个框架这个框架里面有个ObjectMapper这个类能把各种形式的例如 javabean，list，map还有字符串等等封装成json数据，还有就是要看网站上面标准的代码的数据是怎样接收的。最好用浏览器或者是像httpwatch这样的工具来看一下到底发送的是怎样格式的json数据发送了几次然后再来做。
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
这里是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">
</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 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的元素添加行为.