上一節我們完成了使用DataGrid顯示所有商品信息，這節我們開始添加幾個功能：添加、更新、刪除和查詢。首先我們實現下前台的顯示，然後再做後台獲取數據。
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; //下面省略…… }對應的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_*" 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_*" method="{1}"> <result name="index">/index.jsp</result> </action> <!-- 用來完成系統請求轉發的action,所有的請求都交給execute--> <action name="send_*_*"> <result name="send">/WEB-INF/{1}/{2}.jsp</result> </action> </package> </struts>這樣我們就做好了刪除的操作了，看一下效果：
測試成功，我們也可以一次性選擇多項去刪除，至此，刪除功能做完了。
原文地址：http://blog.csdn.net/eson_15/article/details/51338991
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。