1、设计
1.1domain
可以直接用代码生成器生成
Producttype参考:
@Entity
@Table(name="producttype")
public class Producttype extends BaseDomain {
private String name;//名称
private String descs;//描述
//类型分两级,有一个自关联
@ManyToOne(fetch=FetchType.LAZY)
@JoinColumn(name="parent_id")
private Producttype parent;
//getter,setter…
}
product参考:
@Entity
@Table(name = "product")
public class Product extends BaseDomain {
private String name; //产品名称
private String color; //产品颜色
private String pic; //大图片
private String smallPic;//小图片
private BigDecimal costPrice;//成本价
private BigDecimal salePrice;//销售价
@ManyToOne(fetch = FetchType.LAZY)
@JoinColumn(name = "types_id")
private Producttype types;// 对应的二级产品类型
@ManyToOne(fetch = FetchType.LAZY)
@JoinColumn(name = "unit_id")
private Systemdictionarydetail unit;// 数据字典明细:单位
@ManyToOne(fetch = FetchType.LAZY)
@JoinColumn(name = "brand_id")
private Systemdictionarydetail brand;// 数据字典明细:品牌
//getter,setter…
}
1.2小图点击展示大图
(注:可以在网上去找相应的控件,也可以使用easyui来进行模拟【layer】)
http://www.easyui-extlib.com/ 的提示框插件可以找到相应效果
引入js文件
<script type="text/javascript" src="/easyui/plugin/tooltip/jeasyui.extensions.base.tooltip.js"></script>
注意:要在table标签加上onLoadSuccess:loadSuccess
准备loadSuccess方法:
//成功后进行加载
function loadSuccess(data) {
var rows = data.rows;
for(var i=0;i<rows.length;i++){
var result = rows[i];
$.easyui.tooltip.init($("img[src='"+result.smallpic+"']"), {
position: "rigth",
content: "<div style=\"width:600px;height:480px;\"><img src='"+result.pic+"' /></div>"
});
}
}
1.3添加产品
1产品的颜色选择
大家可以自行到网上去查找相应的控件,也可以自己进行相应的自己设计。
2产品的单位与品牌选择
这个选择和以前下拉都差不多,我们直接从数据字典的相应位置拿到数据即可。
3产品的类型选择(二级连动)
方案一:easyui控件(组合框ComboBox- 组合框组部分)
方案二:二级连动
二级连动我们已经学习过,整体的做法和以前一样(注意:为了性能更好,大家还可以加上了缓存的设计)。
4产品的图片上传功能
要完成图片上传特别注意的点是:上传图片后台的处理(没有上传文件怎么办?)