SSH电子商务新项目实战演练之九:加上和升级产

摘要: 上一节大家做了了查寻和删掉产品的作用,这一节大家做一下加上和升级产品的作用。 1. 加上产品类型 1.1 加上类型的UI设计方案 大家先说一下构思:最先当客户点一下 加上产品 时,...

上一节大家做了了查寻和删掉产品的作用,这一节大家做一下加上和升级产品的作用。

1. 加上产品类型

1.1 加上类型的UI设计方案

大家先说一下构思:最先当客户点一下 加上产品 时,大家应当弹出来一个 加上产品 的UI对话框(留意这儿并不是自动跳转到新的jsp,EasyUI仅有一个网页页面),弹出来这一 加上产品 的对话框后,应当锁定它父类的全部对话框(即点一下别的地区失效,只有实际操作加上产品的对话框),等客户填好啦信息内容后,在新弹出来来的对话框上点一下 加上 后,将恳求推送给struts2,随后struts2取得恳求你主要参数,从数据信息库文件实行加上姿势,那样后台管理实际操作进行,同时前台接待那里要更新一下当今网页页面,再次显示信息全部产品。

大家查询EasyUI的文本文档,发觉在建一个对话框有二种方式,要不应用标识建立,要不应用js建立,大家这儿应用js建立,可是必须一个 div 小盒子,以下:

SSH电商项目实战之九:添加和更新商品类别功能的实现

此外,大家建立的新的对话框不用最少化,利润最大化,可是要锁屏。因此这种特性都会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);   }    } 

那样数据信息就存进数据信息库了,完后后,前台接待那里更新显示信息,就可以将新加上的产品类型显示信息出去了,大家看一下

SSH电商项目实战之九:添加和更新商品类别功能的实现

SSH电商项目实战之九:添加和更新商品类别功能的实现

SSH电商项目实战之九:添加和更新商品类别功能的实现

加上产品类型这一块大家就做了了。下边做升级产品类型那块。

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_*   >SSH电商项目实战之九:添加和更新商品类别功能的实现

       进行回显后,便是升级实际操作了,自然也是有认证的作用,和加上一样的,升级实际操作将恳求发送给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)

记牢我,下一次回应时无需再次键入本人信息内容



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:创建网站