快捷導(dǎo)航

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

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

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

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

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

<%@ 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地址改為請(qǐng)求categoryAction 
        url:'category_queryJoinAccount.action', 
 
        singleSelect:false, //如果為真，只允許單行顯示，全選功能失效 
        //設(shè)置分頁(yè) 
        pagination:true, 
        //設(shè)置每頁(yè)顯示的記錄數(shù)，默認(rèn)是10個(gè) 
        pageSize:5, 
        //設(shè)置可選的每頁(yè)記錄數(shù)，供用戶選擇，默認(rèn)是10,20,30,40... 
        pageList:[5,10,15,20], 
        idField:'id',//指定id為標(biāo)識(shí)字段，在刪除，更新的時(shí)候有用，如果配置此字段，在翻頁(yè)時(shí)，換頁(yè)不會(huì)影響選中的項(xiàng) 
 
           /*********************添加的代碼***********************/ 
        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"); 
            //返回被選中的行，如果沒(méi)有任何行被選中，則返回空數(shù)組 
            if(rows.length == 0) { 
              //彈出提示信息 
              $.messager.show({ //語(yǔ)法類似于java中的靜態(tài)方法，直接對(duì)象調(diào)用 
                title:'錯(cuò)誤提示', 
                msg:'至少要選擇一條記錄', 
                timeout:2000, 
                showType:'slide', 
              }); 
            } else { 
              //提示是否確認(rèn)刪除，如果確認(rèn)則執(zhí)行刪除的邏輯 
              $.messager.confirm('刪除的確認(rèn)對(duì)話框', '您確定要?jiǎng)h除此項(xiàng)嗎？', function(r){ 
                if (r){ 
                // 退出操作; 
                  alert("--刪除操作--") 
                } 
              }); 
            }             
          } 
         },'-',{ //查詢按鈕不是LinkButton，它有語(yǔ)法，但是也支持解析HTML標(biāo)簽 
           text:"<input id='ss' name='serach' />" 
         }], 
         
        //把普通的文本框轉(zhuǎn)化為查詢搜索文本框 
        $('#ss').searchbox({  
          //觸發(fā)查詢事件 
          searcher:function(value,name){ //value表示輸入的值 
                      //查詢操作 
          },  
          prompt:'請(qǐng)輸入搜索關(guān)鍵字' //默認(rèn)的顯示 
        });  
        /*********************************************************************/ 
 
    }); 
  </script> 
 </head> 
  
 <body> 
  <table id="dg"></table> 
 </body> 
</html>

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

接下來(lái)我們逐個(gè)來(lái)完成相應(yīng)的功能。

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

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

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

這樣我便完成了搜索的功能了，比較簡(jiǎn)單。

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

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

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

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

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

@Controller("baseAction") 
@Scope("prototype") 
public class BaseAction<T> extends ActionSupport implements RequestAware,SessionAware,ApplicationAware,ModelDriven<T> { 
 
  //獲取要?jiǎng)h除的ids，要有g(shù)et和set方法 
  //流是用來(lái)想前臺(tái)返回?cái)?shù)據(jù)的，這個(gè)數(shù)據(jù)是讓struts獲取的，然后通過(guò)流的形式傳到前臺(tái)，所以實(shí)現(xiàn)get方法即可 
  protected String ids; 
  protected InputStream inputStream; 
     
    //下面省略…… 
}

對(duì)應(yīng)的CategoryAction中的方法如下：

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

接下來(lái)看struts.xml中相應(yīng)的配置：

<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對(duì)應(yīng)的是Spring中配置該Action的id值，因?yàn)橐唤oSpring管理 --> 
    <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> 
     
    <!-- 用來(lái)完成系統(tǒng) 請(qǐng)求轉(zhuǎn)發(fā)的action,所有的請(qǐng)求都交給execute--> 
    <action name="send_*_*" class="sendAction"> 
      <result name="send">/WEB-INF/{1}/{2}.jsp</result> 
    </action> 
  </package> 
 
</struts>

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