struts2 easyui实现datagrid的crud

来源：互联网发布：金庸最差的小说知乎编辑：程序博客网时间：2024/05/17 01:16

最近两天因为项目需要,接触了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里面有那么多参数的原因。

最后看看整体的效果图

0 0