SSH框架網(wǎng)上商城項目第8戰(zhàn)之查詢和刪除商品類別功能實現(xiàn)

更新時間：2016年05月31日 16:23:59 作者：eson_15

SSH框架網(wǎng)上商城項目第8戰(zhàn)之查詢和刪除商品類別功能實現(xiàn)，為項目增加功能，添加、更新、刪除和查詢操作，感興趣的小伙伴們可以參考一下

上一節(jié)我們完成了使用DataGrid顯示所有商品信息，這節(jié)我們開始添加幾個功能：添加、更新、刪除和查詢。首先我們實現(xiàn)下前臺的顯示，然后再做后臺獲取數(shù)據(jù)。
1. 添加、更新、刪除和查詢功能的前臺實現(xiàn)
DataGrid控件里有個toolbar屬性，是添加工具欄的，我們可以在toolbar屬性中添加這些按鈕來實現(xiàn)相應的功能。先看一下官方文檔對toolbar的定義：

我們使用數(shù)組的方式定義工具欄，在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, 
        //設置每頁顯示的記錄數(shù)，默認是10個 
        pageSize:5, 
        //設置可選的每頁記錄數(shù)，供用戶選擇，默認是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"); 
            //返回被選中的行，如果沒有任何行被選中，則返回空數(shù)組 
            if(rows.length == 0) { 
              //彈出提示信息 
              $.messager.show({ //語法類似于java中的靜態(tài)方法，直接對象調(diào)用 
                title:'錯誤提示', 
                msg:'至少要選擇一條記錄', 
                timeout:2000, 
                showType:'slide', 
              }); 
            } else { 
              //提示是否確認刪除，如果確認則執(zhí)行刪除的邏輯 
              $.messager.confirm('刪除的確認對話框', '您確定要刪除此項嗎？', function(r){ 
                if (r){ 
                // 退出操作; 
                  alert("--刪除操作--") 
                } 
              }); 
            }             
          } 
         },'-',{ //查詢按鈕不是LinkButton，它有語法，但是也支持解析HTML標簽 
           text:"<input id='ss' name='serach' />" 
         }], 
         
        //把普通的文本框轉(zhuǎn)化為查詢搜索文本框 
        $('#ss').searchbox({  
          //觸發(fā)查詢事件 
          searcher:function(value,name){ //value表示輸入的值 
                      //查詢操作 
          },  
          prompt:'請輸入搜索關鍵字' //默認的顯示 
        });  
        /*********************************************************************/ 
 
    }); 
  </script> 
 </head> 
  
 <body> 
  <table id="dg"></table> 
 </body> 
</html>

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

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

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

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

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

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

3. DataGrid類別刪除的實現(xiàn)
現(xiàn)在我們來實現(xiàn)刪除功能，從上面的jsp中可以看出，刪除前判斷用戶有沒有選中某條記錄，如果沒有則給用戶一個提示，如果有選中，則彈出窗口讓用戶確認，如果為真，則執(zhí)行刪除功能。有個細節(jié)要注意下，如果想要一次性刪除多條記錄，那么上面的singleSelect屬性要設置成false。
首先，我們把上面query.jsp中刪除部分的代碼補充完，見下面：

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

如果用戶選擇刪除，首先會彈出一個對話框，當用戶確定要刪除后，我們首先要獲取用戶所勾選的商品的id，將這些id拼接成一個字符串，然后向后臺發(fā)送ajax請求，$.post中的第一個參數(shù)是發(fā)送到那個action，第二個參數(shù)是發(fā)送的參數(shù)，第三個參數(shù)是回調(diào)函數(shù)，即刪除成功后執(zhí)行該函數(shù)里面的方法，該函數(shù)的參數(shù)result是從后臺傳過來的，第四個參數(shù)可有可無，是返回數(shù)據(jù)的類型。我們重點看看$.post中的內(nèi)容，當后臺返回一個"true"表示刪除成功了，那么我們調(diào)用DataGrid里面的reload方法重新刷新頁面，reload和前面查詢時用的load是一樣的，不同的地方在于reload刷新后停留在當前頁面，而load則顯示第一頁。
好了，前臺頁面部分寫好了，接下來完成后臺的相應方法，首先在categoryService中添加deleteByIds方法，并在其實現(xiàn)類categoryServceImpl中實現(xiàn)該方法：

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

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

@Controller("baseAction") 
@Scope("prototype") 
public class BaseAction<T> extends ActionSupport implements RequestAware,SessionAware,ApplicationAware,ModelDriven<T> { 
 
  //獲取要刪除的ids，要有get和set方法 
  //流是用來想前臺返回數(shù)據(jù)的，這個數(shù)據(jù)是讓struts獲取的，然后通過流的形式傳到前臺，所以實現(xiàn)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); 
    //如果刪除成功就會往下執(zhí)行，我們將"true"以流的形式傳給前臺 
    inputStream = new ByteArrayInputStream("true".getBytes()); //將"true"的字節(jié)存到流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中有要傳的數(shù)據(jù) --> 
       </result> 
    </action> 
     
    <action name="account_*" class="accountAction" method="{1}"> 
      <result name="index">/index.jsp</result> 
    </action> 
     
    <!-- 用來完成系統(tǒng) 請求轉(zhuǎn)發(fā)的action,所有的請求都交給execute--> 
    <action name="send_*_*" class="sendAction"> 
      <result name="send">/WEB-INF/{1}/{2}.jsp</result> 
    </action> 
  </package> 
 
</struts>

這樣我們就做好了刪除的操作了，看一下效果：