上一節我們完成了使用DataGrid顯示所有商品信息，這節我們開始添加幾個功能：添加、更新、刪除和查詢。首先我們實現下前臺的顯示，然后再做后臺獲取數據。
1. 添加、更新、刪除和查詢功能的前臺實現
DataGrid控件里有個toolbar屬性，是添加工具欄的，我們可以在toolbar屬性中添加這些按鈕來實現相應的功能。先看一下官方文檔對toolbar的定義：
我們使用數組的方式定義工具欄，在query.jsp頁面中新添加如下代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<%@ 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中添加搜索部分的代碼即可，其他不用改變，添加的代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//把普通的文本框轉化為查詢搜索文本框 $('#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中刪除部分的代碼補充完，見下面：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
{ 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中實現該方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
//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中，如下：
|
1
2
3
4
5
6
7
8
9
10
11
|
@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中的方法如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
@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中相應的配置：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<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> |
這樣我們就做好了刪除的操作了，看一下效果：
測試成功，我們也可以一次性選擇多項去刪除，至此，刪除功能做完了。
原文地址：http://blog.csdn.net/eson_15/article/details/51338991
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
