轉自：https://blog.csdn.net/eson_15/article/details/51338991javascript
上一節咱們完成了使用DataGrid顯示全部商品信息，這節咱們開始添加幾個功能：添加、更新、刪除和查詢。首先咱們實現下前臺的顯示，而後再作後臺獲取數據。css
1. 添加、更新、刪除和查詢功能的前臺實現
DataGrid控件裏有個toolbar屬性，是添加工具欄的，咱們能夠在toolbar屬性中添加這些按鈕來實現相應的功能。先看一下官方文檔對toolbar的定義：
html
咱們使用數組的方式定義工具欄，在query.jsp頁面中新添加以下代碼：java
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3 <html>
4 <head>
5 <%@ include file="/public/head.jspf" %>
6 <style type="text/css">
7 body {
8 margin: 1px;
9 }
10 .searchbox {
11 margin: -3;
12 }
13 </style>
14 <script type="text/javascript">
15 $(function(){
16 $('#dg').datagrid({
17 //url地址改成請求categoryAction
18 url:'category_queryJoinAccount.action',
19
20 singleSelect:false, //若是爲真，只容許單行顯示，全選功能失效
21 //設置分頁
22 pagination:true,
23 //設置每頁顯示的記錄數，默認是10個
24 pageSize:5,
25 //設置可選的每頁記錄數，供用戶選擇，默認是10,20,30,40...
26 pageList:[5,10,15,20],
27 idField:'id',//指定id爲標識字段，在刪除，更新的時候有用，若是配置此字段，在翻頁時，換頁不會影響選中的項
28
29 /*********************添加的代碼***********************/
30 toolbar: [{
31 iconCls: 'icon-add',
32 text:'添加類別',
33 handler: function(){
34 alert('--加添類別--');
35 }
36 },'-',{
37 iconCls: 'icon-edit',
38 text:'更新類別',
39 handler: function(){
40 alert('--更新類別--');
41 }
42 },'-',{
43 iconCls: 'icon-remove',
44 text:'刪除類別',
45 handler: function(){
46 //判斷是否有選中行記錄，使用getSelections獲取選中的全部行
47 var rows = $("#dg").datagrid("getSelections");
48 //返回被選中的行，若是沒有任何行被選中，則返回空數組
49 if(rows.length == 0) {
50 //彈出提示信息
51 $.messager.show({ //語法相似於java中的靜態方法，直接對象調用
52 title:'錯誤提示',
53 msg:'至少要選擇一條記錄',
54 timeout:2000,
55 showType:'slide',
56 });
57 } else {
58 //提示是否確認刪除，若是確認則執行刪除的邏輯
59 $.messager.confirm('刪除的確認對話框', '您肯定要刪除此項嗎？', function(r){
60 if (r){
61 // 退出操做;
62 alert("--刪除操做--")
63 }
64 });
65 }
66 }
67 },'-',{ //查詢按鈕不是LinkButton，它有語法，可是也支持解析HTML標籤
68 text:"<input id='ss' name='serach' />"
69 }],
70
71 //把普通的文本框轉化爲查詢搜索文本框
72 $('#ss').searchbox({
73 //觸發查詢事件
74 searcher:function(value,name){ //value表示輸入的值
75 //查詢操做
76 },
77 prompt:'請輸入搜索關鍵字' //默認的顯示
78 });
79 /*********************************************************************/
80
81 });
82 </script>
83 </head>
84
85 <body>
86 <table id="dg"></table>
87 </body>
88 </html>
這樣咱們就搭好了添加、更新、刪除和查詢的前臺框架了，如今能夠在前臺顯示了，後臺沒有數據過來，只是彈出個提示框，不過顯示功能已經完成，看一下效果：ajax
接下來咱們逐個來完成相應的功能。數據庫
2. DataGrid類別查詢的實現
查詢的實現是最簡單的，在搜素框中輸入關鍵字，而後將關鍵字做爲參數傳給action，而後Service從數據庫中拿出數據，打包成json格式傳到前臺來顯示便可，這個過程跟前面顯示全部商品信息是同樣的，咱們只須要在上面jsp中添加搜索部分的代碼便可，其餘不用改變，添加的代碼以下：json
1 //把普通的文本框轉化爲查詢搜索文本框
2 $('#ss').searchbox({
3 //觸發查詢事件
4 searcher:function(value,name){ //value表示輸入的值
5 //alert(value + "," + name)
6 //獲取當前查詢的關鍵字，經過DataGrid加載相應的信息，使用load加載和顯示第一頁的全部行。
7 //若是指定了參數，它將取代'queryParams'屬性。一般能夠經過傳遞一些參數執行一次查詢，經過調用這個方法會向上面url指定的action去發送請求，從服務器加載新數據。
8 $('#dg').datagrid('load',{
9 type: value
10 });
11
12 },
13 prompt:'請輸入搜索關鍵字'
14 });
load方法能夠加載顯示第一頁的全部行，它有個參數，若是指定了，就會去帶上麼的queryParams，不然默認傳遞上面的queryParams指定的參數，咱們在這裏將type設置成value的值，即用戶輸入的查詢關鍵字，而後傳到action，後臺根據用戶輸入的value在數據庫中查找，並返回給前臺。執行結果以下：數組
這樣我便完成了搜索的功能了，比較簡單。服務器
3. DataGrid類別刪除的實現
如今咱們來實現刪除功能，從上面的jsp中能夠看出，刪除前判斷用戶有沒有選中某條記錄，若是沒有則給用戶一個提示，若是有選中，則彈出窗口讓用戶確認，若是爲真，則執行刪除功能。有個細節要注意下，若是想要一次性刪除多條記錄，那麼上面的singleSelect屬性要設置成false。框架
首先，咱們把上面query.jsp中刪除部分的代碼補充完，見下面：
1 {
2 iconCls: 'icon-remove',
3 text:'刪除類別',
4 handler: function(){
5 //判斷是否有選中行記錄，使用getSelections獲取選中的全部行
6 var rows = $("#dg").datagrid("getSelections");
7 //返回被選中的行，若是沒有任何行被選中，則返回空數組
8 if(rows.length == 0) {
9 //彈出提示信息
10 $.messager.show({ //語法相似於java中的靜態方法，直接對象調用
11 title:'錯誤提示',
12 msg:'至少要選擇一條記錄',
13 timeout:2000,
14 showType:'slide',
15 });
16 } else {
17 //提示是否確認刪除，若是確認則執行刪除的邏輯
18 $.messager.confirm('刪除的確認對話框', '您肯定要刪除此項嗎？', function(r){
19 if (r){
20 //1. 從獲取的記錄中獲取相應的的id,拼接id的值，而後發送後臺1,2,3,4
21 var ids = "";
22 for(var i = 0; i < rows.length; i ++) {
23 ids += rows[i].id + ",";
24 }
25 ids = ids.substr(0, ids.lastIndexOf(","));
26 //2. 發送ajax請求
27 $.post("category_deleteByIds.action",{ids:ids},function(result){
28 if(result == "true") {
29 //將剛剛選中的記錄刪除，要否則會影響後面更新的操做
30 $("#dg").datagrid("uncheckAll");
31 //刷新當前頁，查詢的時候咱們用的是load，刷新第一頁，reload是刷新當前頁
32 $("#dg").datagrid("reload");//不帶參數默認爲上面的queryParams
33 } else {
34 $.messager.show({
35 title:'刪除異常',
36 msg:'刪除失敗，請檢查操做',
37 timeout:2000,
38 showType:'slide',
39 });
40 }
41 },"text");
42 }
43 });
44 }
45 }
46 }
若是用戶選擇刪除，首先會彈出一個對話框，當用戶肯定要刪除後，咱們首先要獲取用戶所勾選的商品的id，將這些id拼接成一個字符串，而後向後臺發送ajax請求，$.post中的第一個參數是發送到那個action，第二個參數是發送的參數，第三個參數是回調函數，即刪除成功後執行該函數裏面的方法，該函數的參數result是從後臺傳過來的，第四個參數無關緊要，是返回數據的類型。咱們重點看看$.post中的內容，當後臺返回一個"true"表示刪除成功了，那麼咱們調用DataGrid裏面的reload方法從新刷新頁面，reload和前面查詢時用的load是同樣的，不一樣的地方在於reload刷新後停留在當前頁面，而load則顯示第一頁。
好了，前臺頁面部分寫好了，接下來完成後臺的相應方法，首先在categoryService中添加deleteByIds方法，並在其實現類categoryServceImpl中實現該方法：
1 //categoryService接口
2 public interface CategoryService extends BaseService<Category> {
3 //查詢類別信息，級聯管理員
4 public List<Category> queryJoinAccount(String type, int page, int size); //使用類別的名稱查詢
5 //根據關鍵字查詢總記錄數
6 public Long getCount(String type);
7 //根據ids刪除多條記錄
8 public void deleteByIds(String ids);
9 }
10
11 //categoryServiceImpl實現類
12 @SuppressWarnings("unchecked")
13 @Service("categoryService")
14 public class CategoryServiceImpl extends BaseServiceImpl<Category> implements CategoryService {
15
16 //其餘方法省略不寫了……能夠參照前面的相應章節內容
17
18 @Override
19 public void deleteByIds(String ids) {
20 String hql = "delete from Category c where c.id in (" + ids + ")";
21 getSession().createQuery(hql).executeUpdate();
22 }
23 }
寫好了Service部分，接下來開始寫Action部分了。由於咱們要獲取前臺傳進來的ids數據，因此在action中得有一個實現了get和set方法的變量來接收這個數據，另外，咱們要將結果傳給前臺，前面章節中咱們作級聯查詢的時候，使用的方法是struts把查詢的結果數據打包成json格式傳給前臺，因此須要一個Map，而後將經過配置文件中的配置，將Map轉換成json格式。這裏咱們傳到前臺的數據比較簡單，入股刪除成功咱們傳一個"true"便可，因此不用打包成json格式，咱們經過流的方法去傳送，道理和前面的同樣，首相咱們得有一個流的對象去保存這個"true"的字節，而後經過配置，將這個對象經過流傳到前臺。這兩個對象咱們仍是寫在BaseAction中，以下：
1 @Controller("baseAction")
2 @Scope("prototype")
3 public class BaseAction<T> extends ActionSupport implements RequestAware,SessionAware,ApplicationAware,ModelDriven<T> {
4
5 //獲取要刪除的ids，要有get和set方法
6 //流是用來想前臺返回數據的，這個數據是讓struts獲取的，而後經過流的形式傳到前臺，因此實現get方法便可
7 protected String ids;
8 protected InputStream inputStream;
9
10 //下面省略……
11 }
對應的CategoryAction中的方法以下：
1 @Controller("categoryAction")
2 @Scope("prototype")
3 public class CategoryAction extends BaseAction<Category> {
4
5 public String queryJoinAccount() {
6 //略……
7 }
8
9 public String deleteByIds() {
10 System.out.println(ids);
11 categoryService.deleteByIds(ids);
12 //若是刪除成功就會往下執行，咱們將"true"以流的形式傳給前臺
13 inputStream = new ByteArrayInputStream("true".getBytes()); //將"true"的字節存到流inputStream中
14 return "stream";
15 }
16 }
接下來看struts.xml中相應的配置：
1 <struts>
2
3 <constant name="struts.devMode" value="true" />
4
5 <package name="shop" extends="json-default"><!-- jason-default繼承了struts-default -->
6
7 <global-results>
8 <result name="aindex">/WEB-INF/main/aindex.jsp</result>
9 </global-results>
10
11 <!-- class對應的是Spring中配置該Action的id值，由於要交給Spring管理 -->
12 <action name="category_*" class="categoryAction" method="{1}">
13 <result name="jsonMap" type="json">
14 <!-- 略 -->
15 </result>
16 <result name="stream" type="stream"> <!-- 以stream的形式，type爲stream -->
17 <param name="inputName">inputStream</param> <!-- imputStream中有要傳的數據 -->
18 </result>
19 </action>
20
21 <action name="account_*" class="accountAction" method="{1}">
22 <result name="index">/index.jsp</result>
23 </action>
24
25 <!-- 用來完成系統 請求轉發的action,全部的請求都交給execute-->
26 <action name="send_*_*" class="sendAction">
27 <result name="send">/WEB-INF/{1}/{2}.jsp</result>
28 </action>
29 </package>
30
31 </struts>
這樣咱們就作好了刪除的操做了，看一下效果：
測試成功，咱們也能夠一次性選擇多項去刪除，至此，刪除功能作完了。