SSH框架網上商城項目第9戰之添加和更新商品種別功效完成。本站提示廣大學習愛好者：（SSH框架網上商城項目第9戰之添加和更新商品種別功效完成）文章只能為提供參考，不一定能成為您想要的結果。以下是SSH框架網上商城項目第9戰之添加和更新商品種別功效完成正文
上一節我們做完了查詢和刪除商品的功效，這一節我們做一下添加和更新商品的功效。
1. 添加商品種別
1.1 添加種別的UI設計
我們先說一下思緒：起首當用戶點擊“添加商品”時，我們應當彈出一個“添加商品”的UI窗口（留意這裡不是跳轉到新的jsp，EasyUI只要一個頁面），彈出這個“添加商品”的窗口後，應當鎖住它父類的一切窗口（即點擊其他處所有效，只能操作添加商品的窗口），等用戶填好了信息後，在新彈出來的窗口上點擊“添加”後，將要求發送給struts2，然後struts2拿到要求你參數，從數據庫中履行添加舉措，如許後台操作完成，同時前台那裡要刷新一下以後頁面，從新顯示一切商品。
我們檢查EasyUI的文檔，發明新建一個窗口有兩種辦法，要末應用標簽創立，要末應用js創立，我們這裡應用js創立，然則須要一個<div>盒子，以下：
別的，我們創立的新的窗口不須要最小化，最年夜化，然則要鎖屏。所以這些屬性都在div中設置好，這裡要留意的就是鎖屏的功效，由於<div>放的處所分歧，鎖住的屏幕規模也分歧，我們要鎖住全屏，所以要把<div>放到aindex.jsp中，應為aindex.jsp中發生了query.jsp的內容（包含添加按鈕），query.jsp中發生了save.jsp的內容（就是我們要顯示的添加窗口UI），所以彈出窗口後，我們要把aindex.jsp的規模都鎖住，所以<div>應當放到aindex.jsp中，詳細完成以下：
在aindex.jsp的<body>中新添加一個<div>
<div id="win" data-options="collapsible:false,minimizable:false,maximizable:false,modal:true"></div>
然後我們完美query.jsp中添加種別的部門：
{
iconCls: 'icon-add',
text:'添加種別',
handler: function(){
parent.$("#win").window({ //由於<div>放在了aindex.jsp中，所以這裡創立窗口要先挪用parent
title:"添加種別",
width:350,
height:150,
content:'<iframe src="send_category_save.action" frameborder="0" width="100%" height="100%"/>'
});
}
}
從下面的添加種別代碼中可以看出，添加後的UI，我們引入WEB-INF/category目次下的save.jsp文件中的內容，接上去我們完成save.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">
form div {
margin:5px;
}
</style>
<script type="text/javascript">
$(function(){
$("input[name=type]").validatebox({ //這裡是“種別稱號”的驗證功效，假如用戶沒填好就提交的話，會有提醒
required:true,
missingMessage:'請輸出種別稱號' //提醒的內容
});
//對治理員的下拉列表框停止長途加載
$("#cc").combobox({
//將要求發送給accountAction中的query辦法處置，這裡須要將處置好的數據前往到這邊來顯示了 ，所今後台須要將數據打包成json格局發過去
url:'account_query.action',
valueField:'id',
textField:'login', //我們下拉列表中顯示的是治理員的登錄名
panelHeight:'auto', //自順應高度
panelWidth:120,//下拉列表是兩個組件構成的
width:120, //要同時設置兩個寬度才行
editable:false //下拉框不許可編纂
});
//窗體彈出默許是禁用驗證，由於剛彈出的窗口，用戶還沒填就顯示的話，太丑
$("#ff").form("disableValidation");
//注冊button的事宜。即當用戶點擊“添加”的時刻做的事
$("#btn").click(function(){
//開啟驗證
$("#ff").form("enableValidation");
//假如驗證勝利，則提交數據
if($("#ff").form("validate")) {
//挪用submit辦法提交數據
$("#ff").form('submit', {
url: 'category_save.action', //將要求提交給categoryAction中的save辦法處置
success: function(){ //勝利後
//假如勝利了，封閉以後窗口
parent.$("#win").window("close");
//刷新頁面，方才添加的就顯示出來了。
//獲得aindex-->iframe-->datagrid
parent.$("iframe[title='種別治理']").get(0).contentWindow.$("#dg").datagrid("reload");
}
});
}
});
});
</script>
</head>
<body>
<form id="ff" method="post">
<div>
<label for="name">商品稱號:</label> <input type="text" name="type" />
</div>
<div>
<label>所屬治理員：</label>
<input id="cc" name="account.id"/>
</div>
<div>
<label for="hot">熱門:</label>
是<input type="radio" name="hot" value="true" />
否 <input type="radio" name="hot" value="true" />
</div>
<div>
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
</div>
</form>
</body>
</html>
前台的顯示和發送要求都做完了，接上去就是做後台的法式了。
1.2 添加種別的邏輯完成
前台會把數據發送給categoryAction中的save辦法去履行，所以我們去寫Action就好了，由於後台只須要將種別添加進數據庫，不須要向前台前往數據，所以比擬簡略，直接寫好action就好了：
@Controller("categoryAction")
@Scope("prototype")
public class CategoryAction extends BaseAction<Category> {
//省略其他代碼……
public void save() {
System.out.println(model);
categoryService.save(model);
}
}
如許數據就存入數據庫了，完了後，前台那裡刷新顯示，就可以將新添加的商品種別顯示出來了，我們看一下
添加商品種別這一塊我們就做完了。上面做更新商品種別那塊。
2. 更新商品種別
2.1 更新種別的UI設計
更新商品種別的思緒和下面的添加的根本雷同，起首也是彈出一個UI窗口，然後用戶填好數據發送給後台，後台更新數據庫，前台再刷新顯示。我們依然采取下面的辦法創立一個UI窗口。<div>盒子不消修改甚麼，我們須要做的就是在query.jsp中完美更“更新種別”部門的代碼：
{
iconCls: 'icon-edit',
text:'更新種別',
handler: function(){
//斷定能否有選中行記載，應用getSelections獲得選中的一切行
var rows = $("#dg").datagrid("getSelections");
if(rows.length == 0) {
//彈出提醒信息
$.messager.show({ //語法相似於java中的靜態辦法，直接對象挪用
title:'毛病提醒',
msg:'至多要選擇一筆記錄',
timeout:2000,
showType:'slide',
});
}else if(rows.length != 1) {
//彈出提醒信息
$.messager.show({ //語法相似於java中的靜態辦法，直接對象挪用
title:'毛病提醒',
msg:'每次只能更新一筆記錄',
timeout:2000,
showType:'slide',
});
} else{
//1. 彈出更新的頁面
parent.$("#win").window({
title:"添加種別",
width:350,
height:250,
content:'<iframe src="send_category_update.action" frameborder="0" width="100%" height="100%"/>'
});
//2.
}
}
}
我們剖析一下下面的js代碼：起首獲得用戶勾選要更新的行，假如沒有選中則提醒用戶至多須要選中一項記載去更新，假如選中的不止一條記載，也得提醒用戶每次只能更新一條記載。當這些斷定都停止後，包管了用戶勾選了一條記載，那末我們開端創立新的UI窗口了，這裡照樣跟下面一樣，引入WEB-INF/category目次下的update.jsp頁面的內容，我們來看下update.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">
form div {
margin:5px;
}
</style>
<script type="text/javascript">
$(function(){
//iframe中的datagrid對象
var dg = parent.$("iframe[title='種別治理']").get(0).contentWindow.$("#dg");
//對治理員的下拉列表框停止長途加載
$("#cc").combobox({
//將要求發送給accountAction中的query辦法處置，這裡須要將處置好的數據前往到這邊來顯示了 ，所今後台須要將數據打包成json格局發過去
url:'account_query.action',
valueField:'id',
textField:'login', //我們下拉列表中顯示的是治理員的登錄名
panelHeight:'auto', //自順應高度
panelWidth:120,//下拉列表是兩個組件構成的
width:120, //要同時設置兩個寬度才行
editable:false //下拉框不許可編纂
});
// 完成數據的回顯，更新時，用戶確定先選擇了要更新的那一行，起首我們得拿到那一行
var rows = dg.datagrid("getSelections");
//將拿到的那一行對應的數據字段加載到表單裡，完成回顯
$("#ff").form('load',{
id:rows[0].id,
type:rows[0].type,
hot:rows[0].hot,
'account.id':rows[0].account.id //EasyUI不支撐account.id這類點操作，所以要加個引號
});
//回顯完了數據後，設置一下驗證功效
$("input[name=type]").validatebox({
required:true,
missingMessage:'請輸出種別稱號'
});
//窗體彈出默許時禁用驗證
$("#ff").form("disableValidation");
//注冊button的事宜
$("#btn").click(function(){
//開啟驗證
$("#ff").form("enableValidation");
//假如驗證勝利，則提交數據
if($("#ff").form("validate")) {
//挪用submit辦法提交數據
$("#ff").form('submit', {
url: 'category_update.action', //提交時將要求傳給categoryAction的update辦法履行
success: function(){
//假如勝利了，封閉以後窗口，並刷新頁面
parent.$("#win").window("close");
dg.datagrid("reload");
}
});
}
});
});
</script>
</head>
<body>
<form id="ff" method="post">
<div>
<label for="name">種別稱號:</label> <input type="text" name="type" />
</div>
<div>
<label for="hot">熱門:</label>
是<input type="radio" name="hot" value="true" />
否<input type="radio" name="hot" value="false" />
</div>
<div>
<label for="account">所屬治理員:</label>
<!-- 下拉列表我們采取長途加載的辦法加載治理員數據 -->
<input id="cc" name="account.id" />
</div>
<div>
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">更新</a>
<input type="hidden" name="id" />
</div> `
</form>
</body>
</html>
更新與添加分歧的處所在於，起首得數據回顯，然後還有個下拉列表顯示治理員數據，由於所屬治理員也要更新。我們看看下面的代碼，起首應用長途加載的辦法加載治理員數據，先向後台發送一個要求，後台accountAction的query辦法處置完後，治理員數據打包成json格局前往回來，如許就可以拿到治理員數據了，拿到後，便可以停止數據的回顯了。我們看一下後台的法式：
2.2 更新種別的邏輯完成
@Controller("baseAction")
@Scope("prototype")
public class BaseAction<T> extends ActionSupport implements RequestAware,SessionAware,ApplicationAware,ModelDriven<T> {
//用來裝有將要被打包成json格局前往給前台的數據，上面要完成get辦法
protected List<T> jsonList = null;
//省略其他辦法……
}
//AccountAction
@Controller("accountAction")
@Scope("prototype")
public class AccountAction extends BaseAction<Account> {
public String query() {
jsonList = accountService.query();
return "jsonList";
}
}
接上去我們設置裝備擺設一下struts.xml文件：
<action name="account_*" class="accountAction" method="{1}">
<result name="jsonList" type="json">
<param name="root">jsonList</param>
<param name="excludeProperties">
<!-- [0].pass, [1].pass -->
<!-- 正則表達式顯示有bug，我上面截個圖 -->
</param>
</result>
</action>
完成回顯後，就是更新操作了，固然也有驗證的功效，和添加一樣的，更新操作將要求傳給categoryAction的update辦法履行，比擬簡略：
@Controller("categoryAction")
@Scope("prototype")
public class CategoryAction extends BaseAction<Category> {
//省略其他辦法……
public void update() {
System.out.println(model);
categoryService.update(model);
}
}
到此，我們完成了商品種別的添加和更新操作。
原文地址：http://blog.csdn.net/eson_15/article/details/51347734
以上就是本文的全體內容，願望對年夜家的進修有所贊助，也願望年夜家多多支撐。
