正文
struts2 easyui实现datagrid的crud
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
最近两天因为项目需要,接触了easyui,要用它的datagrid实现crud。第一次做,花了一天时间才完成所有功能,昨天做另外一个模块,同样的功能只用了两个小时。 现在把第一次做datagrid时遇到的问题记录下来,帮助自己记忆。同时也帮助其他第一次接触easyui的朋友。
问题
json到底有多少种?
当时项目里json的jar包是我直接从别的项目里拷过来的。结果在下面的语句里报错
resultObj = JSONObject.fromObject(json);
也就是我的json包里JSONObject里没有forObject这个方法。
那咋办?换jar包呗。
我换成了
json-lib-2.3-jdk15.jar
然后更奇葩的问题出现了。程序到了那一步不动了。就是不执行了,停到那里了。
网上说还是jar的问题,最后我加入了以下的几个包才解决问题。
为什么会有两个common-lang?
因为上面的问题需要的是common-lang2,而struts2.3.16需要的是common-lang3。
代码
好,我们现在看代码
这是前台的jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="../../easyui/demo/demo.css">
<script type="text/javascript" src="../../easyui/jquery.min.js"></script>
<script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="userAdmin.js"></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;
}
.fitem input {
width: 160px;
}
</style>
</head>
<body>
<table id="tt" >
<thead>
<tr>
<th field="userId" width="100" align="center">ID</th>
<th field="passWord" width="100" align="center">密码</th>
<th field="userName" width="100" align="center">用户名</th>
<th field="status" width="100" align="center">状态</th>
<th field="role" width="100" align="center">级别</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" 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="userId" class="easyui-textbox" readonly="true" />
</div>
<div class="fitem">
<label>用户名</label>
<input name="userName" class="easyui-textbox" required="true" />
</div>
<div class="fitem">
<label>密码</label>
<input name="passWord" class="easyui-textbox" required="true" />
</div>
<div class="fitem">
<label>状态</label>
<select name="status" >
<option value="good" selected="selected" >正常</option>
<option value="locked">冻结</option>
</select>
</div>
<div class="fitem">
<label>级别</label>
<select name="role" >
<option value="一级管理员" selected="selected" >一级管理员</option>
<option value="二级管理员">二级管理员</option>
<option value="三级管理员">三级管理员</option>
</select>
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
</div>
</body>
</html>
jsp里面引入了
userAdmin.js
好我们看看
$(function(){
$('#tt').datagrid({
title:'用户管理',
iconCls:'icon-edit',//图标
width: 530,
height: 300,
nowrap: false,
striped: true,
border: true,
toolbar:'#toolbar' , //你试试没有这行 看看什么效果
// fit: true,//自动大小
url:'userFindAll',
//sortName: 'code',
//sortOrder: 'desc',
remoteSort:false,
idField:'id',
singleSelect:true,//是否单选
rownumbers:true//行号
});
});
var url;
function newUser() {
$('#dlg').dialog('open').dialog('setTitle', 'New User');
$('#fm').form('clear');
url='addUser';
// $('#dlg').dialog('close')
}
function editUser() {
var row = $('#tt').datagrid('getSelected');
if (row) {
$('#dlg').dialog('open').dialog('setTitle', 'Edit User');
$('#fm').form('load', row);
url = 'editUser';
}
}
function saveUser() {
$('#fm').form('submit', {
url: url,
onSubmit: function() {
return $(this).form('validate');
},
success: function(result) {
var result = eval('(' + result + ')');
if (result.errorMsg) { //保存的时候 检查json里有没有errorMsg
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#tt').datagrid('reload'); // reload the user data
}
}
});
}
function destroyUser() {
var row = $('#tt').datagrid('getSelected'); //得到我选择的那一行
if (row) {
$.messager.confirm('Confirm', 'Are you sure you want to destroy this user?',
function(r) {
if (r) {
$.post('deleteUser', {
id: row.userId //这个userid就是 jsp里面的那个 field="userId"
},
function(result) {
if (result.success) { //删除的时候 检查json里有没有success这个域
$('#tt').datagrid('reload'); // reload the user data
} else {
$.messager.show({ // show error message
title: 'Error',
msg: result.errorMsg
});
}
},
'json');
}
});
}
}
我们看看struts.xml里面的配置
<package name="user" namespace="/module/user" extends="json-default" >
<action name="userFindAll" class="userAction" method="findAll">
<result type="json">
<param name="root">resultObj</param>
</result>
</action>
</package>
关键有两点 其一是resultObj 其二就是json-default
好我们看看userAction
package com.module.user;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
import net.sf.json.JSONObject;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;
import com.core.BaseAction;
import com.core.dao.UtilDAO;
import com.core.model.User;
@Component
@Scope("prototype")
public class UserAction extends BaseAction{
/**
*
*/
private static final long serialVersionUID = -4070056523032278260L;
private JSONObject resultObj ;
private List<User> userList;
private User user;
private int userId;
private String role;
private String status;
private String passWord;
private String userName;
private int id;
@Resource
private UtilDAO utilDAO;
public String update(){
user=getMyUser();
utilDAO.update(user);
Map<String, Object> json = new HashMap<String, Object>();
// json.put("errorMsg", "错误444");
resultObj = JSONObject.fromObject(json);// 格式化result一定要是JSONObject
return SUCCESS;
}
public User getMyUser(){
User user=new User();
user.setPassWord(passWord);
user.setRole(role);
user.setStatus(status);
user.setUserId(userId);
user.setUserName(userName);
return user;
}
@SuppressWarnings("unchecked")
public String findAll(){
userList=(List<User>) utilDAO.findAllList("User");
ArrayList< Map<String, Object>> al = new ArrayList< Map<String, Object>>();
for (User u:userList) {
Map<String, Object> m = new HashMap<String, Object>();
m.put("userId", u.getUserId());
m.put("userName", u.getUserName());
m.put("passWord", u.getPassWord());
m.put("status",u.getStatus());
m.put("role", u.getRole());
al.add(m);
}
Map<String, Object> json = new HashMap<String, Object>();
json.put("total", 88);//total键 存放总记录数，必须的
json.put("page", 4); //当前第四页
json.put("rows", al); // rows键 存放每页记录 list
resultObj = JSONObject.fromObject(json);// 格式化result一定要是JSONObject
return SUCCESS;
}
public String add(){
user=getMyUser();
user.setStatus("good");
utilDAO.save(user);
Map<String, Object> json = new HashMap<String, Object>();
resultObj = JSONObject.fromObject(json);// 格式化result一定要是JSONObject
return SUCCESS;
}
@SuppressWarnings("unchecked")
public String delete(){
userList=(List<User>) utilDAO.findListByProperty("User","userId",id, "");
user=userList.get(0);
utilDAO.delete(user);
Map<String, Object> json = new HashMap<String, Object>();
json.put("success", "success!!!");
resultObj = JSONObject.fromObject(json);// 格式化result一定要是JSONObject
return SUCCESS;
}
}
看到这里大家一定会想,getMyUser到底是干什么的?
还有
private int userId;
private String role;
private String status;
private String passWord;
private String userName;
这就是User那个类里面的参数。 为什么要多写一遍呢?
哎...学习struts的我们都知道 给user里的id传参数的时候 前端form里input的name写成user.id就OK。
可问题就在这里呀。
大家看js里面的destroyUser方法
里面有一句
id: row.userId
row.userId 就是获得我选中的那一行的userId字段。
你删除一个实体,总得知道这个实体的标识是吧。
function editUser() {
var row = $('#tt').datagrid('getSelected');
if (row) {
$('#dlg').dialog('open').dialog('setTitle', 'Edit User');
$('#fm').form('load', row); //把row这一行的数据 传给edit窗口
url = 'editUser';
}
}
如果我edit窗口里面的input name为user.id。那么根据edit统一传递的特点,table的字段也得是user.id这种形式。
但是大家会想destory的时候,要获得选中的那一行的id
怎么写?
row.user.userId?
所以 我只能麻烦的采用单个传值的方法。 这也是我action里面有那么多参数的原因。
最后看看整体的效果图
