struts2 easyui實現datagrid的crud

阿新 • • 發佈：2019-02-04

最近兩天因為專案需要,接觸了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

問題

程式碼

struts2 easyui實現datagrid的crud

使用Struts2和jQuery EasyUI實現簡單CRUD系統（五）——jsp,json,EasyUI的結合

使用Struts2和jQuery EasyUI實現簡單CRUD系統（八）——Struts與EasyUI使用JSON進行互動

Easyui 實現智能模糊查詢（智能檢索）

在EasyUI實現點擊有子節點的文字時展開但不選中，點擊最終子節點才選中的功能

Struts2如何實現MVC，與Spring MVC有什麽不同？

Struts+JQuery EasyUI實現查詢

easyui實現日曆

Struts2 + MySQL 實現分頁

struts2的實現原理

easyui實現datagrid多行刪除功能

easyui實現crud例項

SQL server + ASP.NET MVP + Jquery EasyUI實現樹形節點的增刪改查

Struts2+Jquery實現ajax並返回json型別資料

PageHelper分頁外掛和easyUI實現分頁

easyui實現輸入格式校驗功能

easyUI 實現非同步tree

SSM+Easyui實現——企業銷售管理系統

Mybatis學習（4）：Mybatis及PageHelper外掛和easyUI實現分頁

Springboot+easyui實現資料庫前臺資訊分頁顯示

struts2 easyui實現datagrid的crud

問題

程式碼

相關推薦