SSH电子商务新项目实战演练之九：加上和升级产
摘要： 上一节大家做了了查寻和删掉产品的作用，这一节大家做一下加上和升级产品的作用。 1. 加上产品类型 1.1 加上类型的UI设计方案 大家先说一下构思：最先当客户点一下 加上产品 时，...
上一节大家做了了查寻和删掉产品的作用，这一节大家做一下加上和升级产品的作用。
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
XML/HTML编码 div id= win data-options= collapsible:false,minimizable:false,maximizable:false,modal:true /div随后大家健全query.jsp中加上类型的一部分：
JavaScript编码 { 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-文档中的內容，接下去大家进行save.jsp：
XML/HTML编码 %@ page language= java import= java.util.* pageEncoding= UTF-8 % !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN html head %@ include file= /f % style type= text/css form div { margin:5px; } /style script type= text/javascript $(function(){ $( input[name=type] ).validatebox({ //这儿是 类型名字 的认证作用，假如客户没填好就递交得话，会出现提醒 required:true, missingMessage:'请键入类型名字' //提醒的內容 }); //对管理方法员的往下拉目录框开展远程控制载入 $( #cc ).combobox({ //ountAction中的query方式解决，这儿必须将解决好的数据信息回到到这里来显示信息了 ，因此后台管理必须将数据信息装包成json文件格式发回来 url:'account_query.action', valueField:'id', textField:'login', //大家往下拉目录中显示信息的是管理方法员的登陆名 panelHeight:'auto', //响应式高宽比 panelWidth:120,//往下拉目录是2个部件构成的 width:120, //要同时设定2个总宽才行 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方式解决 &ess: 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= # 'icon-add' 加上 /a /div /form /body /html前台接待的显示信息及其推送恳求都做了了，接下去便是做后台管理的程序了。
1.2 加上类型的逻辑性完成
前台接待会把数据信息推送给categoryAction中的save方式去实行，因此大家去写Action就可以了了，由于后台管理只必须将类型加上进数据信息库，不用往前台回到数据信息，因此较为简易，立即写好action就可以了了：
Java编码 @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中健全更 升级类型 一部分的编码：
JavaScript编码 { 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-网页页面的內容，大家看来下update.jsp网页页面內容：
XML/HTML编码 %@ page language= java import= java.util.* pageEncoding= UTF-8 % !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN html head %@ include file= /f % 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({ //ountAction中的query方式解决，这儿必须将解决好的数据信息回到到这里来显示信息了 ，因此后台管理必须将数据信息装包成json文件格式发回来 url:'account_query.action', valueField:'id', textField:'login', //大家往下拉目录中显示信息的是管理方法员的登陆名 panelHeight:'auto', //响应式高宽比 panelWidth:120,//往下拉目录是2个部件构成的 width:120, //要同时设定2个总宽才行 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 //ount.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方式实行 &ess: 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= # 'icon-edit' 升级 /a input type= hidden name= id / /div ` /form /body /html升级与加上不一样的地区取决于，最先得数据信息回显，随后也有个往下拉目录显示信息管理方法员数据信息，由于隶属管理方法员还要升级。大家看一下上边的编码，最先应用远程控制载入的方式载入管理方法员数据信息，ountAction的query方式解决完后，管理方法员数据信息装包成json文件格式回到回家，那样就可以取得管理方法员数据信息了，取得后，便可以开展数据信息的回显了。大家看一下后台管理的程序：
2.2 升级类型的逻辑性完成
Java编码 @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文档：
XML/HTML编码 action name= account_* >
进行回显后，便是升级实际操作了，自然也是有认证的作用，和加上一样的，升级实际操作将恳求发送给categoryAction的update方式实行，较为简易：
Java编码 @Controller( categoryAction ) @Scope( prototype ) public class CategoryAction extends BaseAction Category { //省去别的方式 public void update() { System.out.println(model); categoryService.update(model); } }到此，大家进行了产品类型的加上和升级实际操作。
SSH电子商务新项目实战演练之八：查寻和删掉产品类型作用的完成 (:20)
SSH电子商务新项目实战演练之七：Struts2和Json的融合 (:47)
SSH电子商务新项目实战演练之六：根据DataGrid的数据信息显示信息 (:19)
SSH电子商务新项目实战演练之五：进行数据信息库的联级查寻和分页查询 (:38)
SSH电子商务新项目实战演练之四：EasyUI莱单的完成 (:59)
SSH电子商务新项目实战演练之三：应用EasyUI构建后台管理网页页面架构 (:9)
SSH电子商务新项目实战演练之二：基本删改查改、Service和Action的提取及其应用注释更换xml (:14)
SSH电子商务新项目实战演练之一：融合Struts2、Hibernate和Spring (:3)
Hibernate下openSession和getCurrentSession获得的联接与事务管理的关联 (:56)
深层次浅出SINGLETON单例设计方案方式 (:50)
网页链接(选填)
认证(*)
文章正文(*)(留言板留言最多篇幅:1000)
记牢我,下一次回应时无需再次键入本人信息内容
