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里面有那么多参数的原因。
最后看看整体的效果图
struts2 easyui实现datagrid的crud的更多相关文章
- Easyui的datagrid结合hibernate实现数据分页
最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1.先来看看效果,二话不说,上图直观! 2.easyui的data ...
- SSh结合Easyui实现Datagrid的分页显示
近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...
- schemaeasyui实例:SSh结合Easyui实现Datagrid的分页显示
查了好多资料,发现还是不全,干脆自己整理吧,最少保证在我的做法正确的,以免误导读者,也是给自己做个记载吧! 克日学习Easyui,发现非常好用,界面很雅观.将学习的心得在此写下,这篇博客写SSh结合E ...
- 实例:SSH结合Easyui实现Datagrid的批量删除功能
在我先前的基础上面添加批量删除功能.实现的效果如下 删除成功 通常情况下删除不应该真正删除,而是应该有一个标志flag,但flag=true表示状态可见,但flag=false表示状态不可见,为删除状 ...
- 实例:SSH结合Easyui实现Datagrid的新增功能和Validatebox的验证功能
在我前面一篇分页的基础上,新增了添加功能和添加过程中的Ajax与Validate的验证功能.其他的功能在后面的博客写来,如果对您有帮助,敬请关注. 先看一下实现的效果: (1)点击添加学生信息按键后跳 ...
- 实例:SSh结合Easyui实现Datagrid的分页显示
近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...
- jQueryEasyUI应用 – datagrid之CRUD应用
本文 jQueryEasyUI + SpringBoot + Mybatis整合Datagrid的CRUD应用 一.前言准备 1.我们将使用下面的插件: datagrid:向用户展示列表数据. dia ...
- easyUI 中datagrid 返回列隐藏方法
easyui的datagrid方法返回的列,有的值不需要显示可以使用hidden(属性进行隐藏) columns : [ [{ field : 'bailClass', title : '类别', w ...
- EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性
EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...
随机推荐
- Eclipse的Debug调试技巧
作为开发人员,掌握开发环境下的调试技巧十分有必要.我们在编写java程序的过程中,经常会遇到各种莫名其妙的问题,为了检测程序是哪里出现问题,经常需要增加日志,看变量的值,这样调试很麻烦.假设我每天花费 ...
- Appium移动自动化测试(三)--安装Android模拟器(建议直接连手机,跳过此步)
转自虫师,亲测有效,留备后用. 本文中如果直接安装时不出现错误,则可以忽略(一.二.三.四.五),我安装的是5.1.1,直接成功,就是有点慢,要有耐心. 如果到最后一步,启动不起来,报错: emula ...
- 23 服务的启动Demo2
MainActivity.java package com.qf.day23_service_demo2; import android.app.Activity; import android.co ...
- 2apt-get命令,deb包安装,源码安装
1 安装卸载软件 更新源服务器列表 sudovi /etc/apt/sources.list 更新完服务器列表后需要更新下源 sudoapt-get update 更新源 sudoapt-get in ...
- Android插件化的思考——仿QQ一键换肤,思考比实现更重要!
Android插件化的思考--仿QQ一键换肤,思考比实现更重要! 今天群友希望写一个关于插件的Blog,思来想去,插件也不是很懂,只是用大致的思路看看能不能模拟一个,思路还是比较重要的,如果你有兴趣的 ...
- EJB通过ANT提高EJB应用的开发效率、开发具有本地接口的无状态bean、开发有状态bean
把jboss集成进eclipse 关闭Jboss控制台按Ctrl+c,在MyEclipse→Servers→Jboss里面可以配置JBoss. 通过ANT提高EJB应用的开发效率 在HelloWorl ...
- 指令汇B新闻客户端开发(四) 自动轮播条
在这个新闻客户端,我们可以看到有一个轮播页面,在这个项目中,用Handler和一个定时器来做更容易一些, 我们定义一个Handler: private Handler mHandler; 定时器的代码 ...
- 一个ExtJS实例
聊聊ExtJS 这几天接触了一个项目 前台用的是extjs 发现这个东西还是有点意思的 就把前台的部分 剥离了下来 有兴趣的朋友可以当做模板学习 不多说先上效果图 这篇文章 可以看作是ext知识的一 ...
- 开源项目——小Q聊天机器人V1.4
小Q聊天机器人V1.0 http://blog.csdn.net/baiyuliang2013/article/details/51386281 小Q聊天机器人V1.1 http://blog.csd ...
- Maven2插件开发入门
一.创建Maven项目 首先创建一个Maven插件项目,可以手动或使用mvn archetype:create从原型创建.pom.xml配置如下: 1 2 3 4 5 6 7 8 9 10 11 12 ...