最近两天因为项目需要,接触了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的更多相关文章

  1. Easyui的datagrid结合hibernate实现数据分页

    最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1.先来看看效果,二话不说,上图直观! 2.easyui的data ...

  2. SSh结合Easyui实现Datagrid的分页显示

    近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...

  3. schemaeasyui实例：SSh结合Easyui实现Datagrid的分页显示

    查了好多资料,发现还是不全,干脆自己整理吧,最少保证在我的做法正确的,以免误导读者,也是给自己做个记载吧! 克日学习Easyui,发现非常好用,界面很雅观.将学习的心得在此写下,这篇博客写SSh结合E ...

  4. 实例：SSH结合Easyui实现Datagrid的批量删除功能

    在我先前的基础上面添加批量删除功能.实现的效果如下 删除成功 通常情况下删除不应该真正删除,而是应该有一个标志flag,但flag=true表示状态可见,但flag=false表示状态不可见,为删除状 ...

  5. 实例：SSH结合Easyui实现Datagrid的新增功能和Validatebox的验证功能

    在我前面一篇分页的基础上,新增了添加功能和添加过程中的Ajax与Validate的验证功能.其他的功能在后面的博客写来,如果对您有帮助,敬请关注. 先看一下实现的效果: (1)点击添加学生信息按键后跳 ...

  6. 实例：SSh结合Easyui实现Datagrid的分页显示

    近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...

  7. jQueryEasyUI应用 – datagrid之CRUD应用

    本文 jQueryEasyUI + SpringBoot + Mybatis整合Datagrid的CRUD应用 一.前言准备 1.我们将使用下面的插件: datagrid:向用户展示列表数据. dia ...

  8. easyUI 中datagrid 返回列隐藏方法

    easyui的datagrid方法返回的列,有的值不需要显示可以使用hidden(属性进行隐藏) columns : [ [{ field : 'bailClass', title : '类别', w ...

  9. EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

    EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...

随机推荐

  1. android Spinner控件详解

    Spinner提供了从一个数据集合中快速选择一项值的办法.默认情况下Spinner显示的是当前选择的值,点击Spinner会弹出一个包含所有可选值的dropdown菜单,从该菜单中可以为Spinner ...

  2. 一起聊聊什么是P问题、NP问题、NPC问题

    概念 P问题:如果一个问题可以找到一个能在多项式的时间里解决它的算法,那么这个问题就属于P问题.通常NOI和NOIP不属于P类问题,我们常见到的一些信息奥赛的题目都是P问题. NP问题:可以在多项式的 ...

  3. Appium移动自动化框架初探

    作者:cryanimal QQ:164166060 本文简要介绍了appnium自动化框架的架构.加载流程.支持语言.相关配置,以及元素定位工具等. 官方网站: http://appium.io Ap ...

  4. Dynamics CRM 通过Odata创建及更新记录各类型字段的赋值方式

    CRM中通过Odata方式去创建或者更新记录时,各种类型的字段的赋值方式各不相同,这里转载一篇博文很详细的列出了各类型字段赋值方式,以供后期如有遗忘再次查询使用. http://luoyong0201 ...

  5. java的断言(assert)

    概述 在C和C++语言中都有assert关键,表示断言.在Java中,同样也有assert关键字,表示断言,用法和含义都差不多.在Java中,assert关键字是从JAVA SE 1.4 引入的,为了 ...

  6. 你知道RxJava也可以实现AsyncTask吗?

    使用RxJava实现异步操作(AsyncTask) 常见的异步操作我们可以联想到AsyncTask或者handler,其实google创造出的目的也就是为了让代码更加清晰明了,让代码更加简洁. 而Rx ...

  7. cocos2d-js（一）引擎的工作原理和文件的调用顺序

    Cocos2d-js可以实现在网页上运行高性能的2D游戏,实现原理是通过HTML5的canvas标签,该引擎采用Javascript编写,并且有自己的一些语法,因为没有成熟的IDE,一般建立工程是通过 ...

  8. Caffe框架,训练model并测试数据

    1. 训练model #!/usr/bin/env sh ./build/tools/caffe train --solver=examples/focal_length/focal_solver.p ...

  9. SVM 使用朗格朗日乘子得到权重向量

    紧跟前一篇SVM博文,下面我们用数学推导来导出权重的计算方法.

  10. 自己动手写hibernate

    这篇文章 可作为北京尚学堂 hibernate的学习笔记 再学习hibernate之前 得有一点反射的基础知识 package com.bjsxt.hibernate; public class St ...