1. 添加、更新、刪除和查詢功能的前臺實現

DataGrid控件里有個toolbar屬性，是添加工具欄的，我們可以在toolbar屬性中添加這些按鈕來實現相應的功能。先看一下官方文檔對toolbar的定義：

我們使用數組的方式定義工具欄，在query.jsp頁面中新添加如下代碼：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <%@ include file="/public/head.jspf" %>  
    <style type="text/css">  
        body {  
            margin: 1px;  
        }  
                .searchbox {  
                        margin: -3;  
                }  
    </style>  
    <script type="text/javascript">  
        $(function(){  
            $('#dg').datagrid({     
                //url地址改為請求categoryAction  
                url:'category_queryJoinAccount.action',  
  
                singleSelect:false, //如果為真，只允許單行顯示，全選功能失效  
                //設置分頁  
                pagination:true,  
                //設置每頁顯示的記錄數，默認是10個  
                pageSize:5,  
                //設置可選的每頁記錄數，供用戶選擇，默認是10,20,30,40...  
                pageList:[5,10,15,20],  
                idField:'id',//指定id為標識字段，在刪除，更新的時候有用，如果配置此字段，在翻頁時，換頁不會影響選中的項  
  
                     /*********************添加的代碼***********************/  
                toolbar: [{  
                    iconCls: 'icon-add',  
                    text:'添加類別',  
                    handler: function(){  
                        alert('--加添類別--');  
                    }  
                },'-',{  
                    iconCls: 'icon-edit',  
                    text:'更新類別',  
                    handler: function(){  
                        alert('--更新類別--');  
                    }  
                },'-',{  
                    iconCls: 'icon-remove',  
                    text:'刪除類別',  
                    handler: function(){  
                        //判斷是否有選中行記錄，使用getSelections獲取選中的所有行  
                        var rows = $("#dg").datagrid("getSelections");  
                        //返回被選中的行，如果沒有任何行被選中，則返回空數組  
                        if(rows.length == 0) {  
                            //彈出提示信息  
                            $.messager.show({ //語法類似于java中的靜態方法，直接對象調用  
                                title:'錯誤提示',  
                                msg:'至少要選擇一條記錄',  
                                timeout:2000,  
                                showType:'slide',  
                            });  
                        } else {  
                            //提示是否確認刪除，如果確認則執行刪除的邏輯  
                            $.messager.confirm('刪除的確認對話框', '您確定要刪除此項嗎？', function(r){  
                                if (r){  
                                // 退出操作;  
                                    alert("--刪除操作--")  
                                }  
                            });  
                        }                         
                    }  
                 },'-',{ //查詢按鈕不是LinkButton，它有語法，但是也支持解析HTML標簽  
                     text:"<input id='ss' name='serach' />"  
                 }],  
                 
                //把普通的文本框轉化為查詢搜索文本框  
                $('#ss').searchbox({   
                    //觸發查詢事件  
                    searcher:function(value,name){ //value表示輸入的值  
                                           //查詢操作  
                    },   
                    prompt:'請輸入搜索關鍵字' //默認的顯示  
                });   
               /*********************************************************************/  
  
        });  
    </script>  
  </head>  
    
  <body>  
    <table id="dg"></table>  
  </body>  
</html>

這樣我們就搭好了添加、更新、刪除和查詢的前臺框架了，現在可以在前臺顯示了，后臺沒有數據過來，只是彈出個提示框，不過顯示功能已經完成，看一下效果：

接下來我們逐個來完成相應的功能。

2. DataGrid類別查詢的實現

查詢的實現是最簡單的，在搜素框中輸入關鍵字，然后將關鍵字作為參數傳給action，然后Service從數據庫中拿出數據，打包成json格式傳到前臺來顯示即可，這個過程跟前面顯示所有商品信息是一樣的，我們只需要在上面jsp中添加搜索部分的代碼即可，其他不用改變，添加的代碼如下：

//把普通的文本框轉化為查詢搜索文本框  
$('#ss').searchbox({   
    //觸發查詢事件  
    searcher:function(value,name){ //value表示輸入的值  
        //alert(value + "," + name)  
        //獲取當前查詢的關鍵字，通過DataGrid加載相應的信息，使用load加載和顯示第一頁的所有行。  
        //如果指定了參數，它將取代'queryParams'屬性。通常可以通過傳遞一些參數執行一次查詢，通過調用這個方法會向上面url指定的action去發送請求，從服務器加載新數據。  
        $('#dg').datagrid('load',{  
            type: value  
        });  
  
    },   
    prompt:'請輸入搜索關鍵字'   
});

load方法可以加載顯示第一頁的所有行，它有個參數，如果指定了，就會去帶上么的queryParams，否則默認傳遞上面的queryParams指定的參數，我們在這里將type設置成value的值，即用戶輸入的查詢關鍵字，然后傳到action，后臺根據用戶輸入的value在數據庫中查找，并返回給前臺。執行結果如下：

這樣我便完成了搜索的功能了，比較簡單。

3. DataGrid類別刪除的實現

現在我們來實現刪除功能，從上面的jsp中可以看出，刪除前判斷用戶有沒有選中某條記錄，如果沒有則給用戶一個提示，如果有選中，則彈出窗口讓用戶確認，如果為真，則執行刪除功能。有個細節要注意下，如果想要一次性刪除多條記錄，那么上面的singleSelect屬性要設置成false。

首先，我們把上面query.jsp中刪除部分的代碼補充完，見下面：

{  
    iconCls: 'icon-remove',  
    text:'刪除類別',  
    handler: function(){  
        //判斷是否有選中行記錄，使用getSelections獲取選中的所有行  
        var rows = $("#dg").datagrid("getSelections");  
        //返回被選中的行，如果沒有任何行被選中，則返回空數組  
        if(rows.length == 0) {  
            //彈出提示信息  
            $.messager.show({ //語法類似于java中的靜態方法，直接對象調用  
                title:'錯誤提示',  
                msg:'至少要選擇一條記錄',  
                timeout:2000,  
                showType:'slide',  
            });  
        } else {  
            //提示是否確認刪除，如果確認則執行刪除的邏輯  
            $.messager.confirm('刪除的確認對話框', '您確定要刪除此項嗎？', function(r){  
                if (r){  
                    //1. 從獲取的記錄中獲取相應的的id,拼接id的值，然后發送后臺1,2,3,4  
                    var ids = "";  
                    for(var i = 0; i < rows.length; i ++) {  
                        ids += rows[i].id + ",";  
                    }  
                    ids = ids.substr(0, ids.lastIndexOf(","));  
                    //2. 發送ajax請求  
                    $.post("category_deleteByIds.action",{ids:ids},function(result){  
                        if(result == "true") {  
                                                //將剛剛選中的記錄刪除，要不然會影響后面更新的操作  
                                                $("#dg").datagrid("uncheckAll");  
                            //刷新當前頁，查詢的時候我們用的是load，刷新第一頁，reload是刷新當前頁  
                            $("#dg").datagrid("reload");//不帶參數默認為上面的queryParams  
                        } else {  
                            $.messager.show({   
                                title:'刪除異常',  
                                msg:'刪除失敗，請檢查操作',  
                                timeout:2000,  
                                showType:'slide',  
                            });  
                        }  
                    },"text");  
                }  
            });  
        }                         
    }  
}

如果用戶選擇刪除，首先會彈出一個對話框，當用戶確定要刪除后，我們首先要獲取用戶所勾選的商品的id，將這些id拼接成一個字符串，然后向后臺發送ajax請求，$.post中的第一個參數是發送到那個action，第二個參數是發送的參數，第三個參數是回調函數，即刪除成功后執行該函數里面的方法，該函數的參數result是從后臺傳過來的，第四個參數可有可無，是返回數據的類型。我們重點看看$.post中的內容，當后臺返回一個"true"表示刪除成功了，那么我們調用DataGrid里面的reload方法重新刷新頁面，reload和前面查詢時用的load是一樣的，不同的地方在于reload刷新后停留在當前頁面，而load則顯示第一頁。

好了，前臺頁面部分寫好了，接下來完成后臺的相應方法，首先在categoryService中添加deleteByIds方法，并在其實現類categoryServceImpl中實現該方法：

//categoryService接口  
public interface CategoryService extends BaseService<Category> {  
    //查詢類別信息，級聯管理員  
    public List<Category> queryJoinAccount(String type, int page, int size); //使用類別的名稱查詢  
    //根據關鍵字查詢總記錄數  
    public Long getCount(String type);  
    //根據ids刪除多條記錄  
    public void deleteByIds(String ids);  
}  
  
//categoryServiceImpl實現類  
@SuppressWarnings("unchecked")  
@Service("categoryService")  
public class CategoryServiceImpl extends BaseServiceImpl<Category> implements CategoryService {  
  
    //其他方法省略不寫了……可以參照前面的相應章節內容  
  
    @Override  
    public void deleteByIds(String ids) {  
        String hql = "delete from Category c where c.id in (" + ids + ")";  
        getSession().createQuery(hql).executeUpdate();  
    }  
}

寫好了Service部分，接下來開始寫Action部分了。因為我們要獲取前臺傳進來的ids數據，所以在action中得有一個實現了get和set方法的變量來接收這個數據，另外，我們要將結果傳給前臺，前面章節中我們做級聯查詢的時候，使用的方法是struts把查詢的結果數據打包成json格式傳給前臺，所以需要一個Map，然后將通過配置文件中的配置，將Map轉換成json格式。這里我們傳到前臺的數據比較簡單，入股刪除成功我們傳一個"true"即可，所以不用打包成json格式，我們通過流的方法去傳送，道理和前面的一樣，首相我們得有一個流的對象去保存這個"true"的字節，然后通過配置，將這個對象通過流傳到前臺。這兩個對象我們還是寫在BaseAction中，如下：

@Controller("baseAction")  
@Scope("prototype")  
public class BaseAction<T> extends ActionSupport implements RequestAware,SessionAware,ApplicationAware,ModelDriven<T> {  
  
    //獲取要刪除的ids，要有get和set方法  
    //流是用來想前臺返回數據的，這個數據是讓struts獲取的，然后通過流的形式傳到前臺，所以實現get方法即可  
    protected String ids;  
    protected InputStream inputStream;  
          
        //下面省略……  
//記得按照上面注釋 getter setter
}

對應的CategoryAction中的方法如下：

@Controller("categoryAction")  
@Scope("prototype")  
public class CategoryAction extends BaseAction<Category> {  
      
    public String queryJoinAccount() {  
                //略……  
    }  
      
    public String deleteByIds() {  
        System.out.println(ids);  
        categoryService.deleteByIds(ids);  
        //如果刪除成功就會往下執行，我們將"true"以流的形式傳給前臺  
        inputStream = new ByteArrayInputStream("true".getBytes()); //將"true"的字節存到流inputStream中  
        return "stream";  
    }  
}

接下來看struts.xml中相應的配置：

<struts>  
      
    <constant name="struts.devMode" value="true" />  
      
    <package name="shop" extends="json-default"><!-- jason-default繼承了struts-default -->  
      
        <global-results>  
            <result name="aindex">/WEB-INF/main/aindex.jsp</result>  
        </global-results>  
  
        <!-- class對應的是Spring中配置該Action的id值，因為要交給Spring管理 -->  
        <action name="category_*" class="categoryAction" method="{1}">  
            <result name="jsonMap" type="json">  
                <!-- 略 -->  
            </result>  
            <result name="stream" type="stream"> <!-- 以stream的形式，type為stream -->  
                <param name="inputName">inputStream</param> <!-- imputStream中有要傳的數據 -->  
             </result>  
        </action>  
          
        <action name="account_*" class="accountAction" method="{1}">  
            <result name="index">/index.jsp</result>  
        </action>  
          
        <!-- 用來完成系統 請求轉發的action,所有的請求都交給execute-->  
        <action name="send_*_*" class="sendAction">  
            <result name="send">/WEB-INF/{1}/{2}.jsp</result>  
        </action>  
    </package>  
  
</struts>