51338991

上一節我們完成了使用DataGrid顯示所有商品信息，這節我們開始添加幾個功能：添加、更新、刪除和查詢。首先我們實現下前臺的顯示，然後再做後臺獲取數據。

1. 添加、更新、刪除和查詢功能的前臺實現

DataGrid控件裏有個toolbar屬性，是添加工具欄的，我們可以在toolbar屬性中添加這些按鈕來實現相應的功能。先看一下官方文檔對toolbar的定義：

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

[javascript] view plain copy

print?

<%@ 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>

<%@ 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中添加搜索部分的代碼即可，其他不用改變，添加的代碼如下：

[javascript] view plain copy

print?

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

//把普通的文本框轉化爲查詢搜索文本框
$('#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中刪除部分的代碼補充完，見下面：

[javascript] view plain copy

print?

{
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");
}
});
}
}
}

{
	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中實現該方法：

[java] view plain copy

print?

//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();
}
}

//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中，如下：

[java] view plain copy

print?

@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;
//下面省略……
}

@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中的方法如下：

[java] view plain copy

print?

@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";
}
}

@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中相應的配置：

[html] view plain copy

print?

<struts>
<constant name="struts.devMode" value="true" />
<package name="shop" extends="json-default">
<global-results>
<result name="aindex">/WEB-INF/main/aindex.jsp</result>
</global-results>
<action name="category_*" class="categoryAction" method="{1}">
<result name="jsonMap" type="json">
</result>
<result name="stream" type="stream">
<param name="inputName">inputStream</param>
</result>
</action>
<action name="account_*" class="accountAction" method="{1}">
<result name="index">/index.jsp</result>
</action>
<action name="send_*_*" class="sendAction">
<result name="send">/WEB-INF/{1}/{2}.jsp</result>
</action>
</package>
</struts>

<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/51479994

【SSH網上商城項目實戰08】查詢和刪除商品類別功能的實現

轉自：http://blog.csdn.net/eson_15/article/details/51338991

上一節我們完成了使用DataGrid顯示所有商品信息，這節我們開始添加幾個功能：添加、更新、刪除和查詢。首先我們實現下前臺的顯示，然後再做後臺獲取數據。

1. 添加、更新、刪除和查詢功能的前臺實現

2. DataGrid類別查詢的實現

3. DataGrid類別刪除的實現

【面試準備】又一次失敗的面試經歷，題目離譜～資深軟件測試工程師

dotnet 8 版本與銀河麒麟V10和UOS系統的 glibc 兼容性

【SSH網上商城項目實戰06】基於DataGrid的數據顯示

【SSH網上商城項目實戰07】Struts2和Json的整合

【SSH網上商城項目實戰03】使用EasyUI搭建後臺頁面框架

基於docker容器的Mysql主從同步實戰

如何在java中調用exe

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結