完成功能效果:
1.功能分析
当我们点击新增商品的时候。
会请求/item-add,返回item-add.jsp这个视图
然后由item-add.jsp中的$(function(){}初始化页面
TAOTAO对象,选择TAOTAO,使用ctrl+H搜索,TAOTAO所在位置
由于easyui是单页面,所以在index.jsp引入js以后,就可以在其他页面使用js中的对象
然后TAOTAO.init初始化图片上传组件和初始化选择类目组件
当我们点击选择类目时,会触发class="selectItemCat",由jquery动态绑定的一个方法,此方法在初始化选择类目组件中
初始化选择类目组件
// 初始化选择类目组件
initItemCat : function(data){
$(".selectItemCat").each(function(i,e){
/**
* 循环遍历,有多个selectItemCat
* i表示循环下标,e表示jq选择到的dom对象
*/
var _ele = $(e);//dom对象转为jq对象
if(data && data.cid){
_ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");
}else{
_ele.after("<span style='margin-left:10px;'></span>");
}
/**
* 为了保证只有一个click方法
*/
_ele.unbind('click').click(function(){
//创建一个div标签
$("<div>").css({padding:"5px"}).html("<ul>")
.window({//其中渲染了一个window窗口对象
width:'500',
height:"450",
modal:true,//是指是否使用模态
closed:true,
iconCls:'icon-save',
title:'选择类目',
onOpen : function(){
var _win = this;
$("ul",_win).tree({
url:'/item/cat/list',//请求资源的url
animate:true,
onClick : function(node){
if($(this).tree("isLeaf",node.target)){
// 填写到cid中
_ele.parent().find("[name=cid]").val(node.id);
// 将文本值显示,并设置标签(上边追加的<span)的cid属性为节点的id
_ele.next().text(node.text).attr("cid",node.id);
$(_win).window('close');
if(data && data.fun){
alert(data);
data.fun.call(this,node);
}
}
}
});
},
onClose : function(){
$(this).window("destroy");
}
}).window('open');
});
});
},
因为使用selectItemCat
这个class的地方不止一处,所以需要循环初始化所以使用selectItemCat这个class的地方,i循环遍历的下标,e是指被遍历的对象,var _ele = $(e);
的作用是把原生dom对象转换为jQuery对象,这样就能直接使用jQuery的方法了。
_ele.unbind('click').click(function(){}
的意思是先进行解绑,然后再进行绑定,为了保证只有一个onclick方法
然后后渲染了一个window窗口对象:
modal:true,
是指是否使用模态(就是我们打开对话框之后,后面是灰色的背景,不能操作,只能操作当前打开的对话框),true就是使用的意思。closed:true,
的意思是节点是否是闭合的,如果节点下面还有节点,那么默认就应该是闭合的,如果没有子节点了,那么就应该是展开的。- onPen是当窗口要打开时候触发的函数,其中有
url:'/item/cat/list'
,请求资源的url - onClick是节点被点击后触发的函数,关闭窗口或者打开新节点
重点是这个onOpen方法,当窗口被打开时,会加载一个异步树控件,并请求一个url
异步树控件注意要点
- 请求url返回一定格式json
- 展开封闭节点,会把节点id的值作为http请求参数并命名为'id',通过URL发送到服务器上面检索子节点。
- state有两种状态:closed或者open
至此我们可以看出,要想加载商品类目选择这个tree,我们需要封装一个有id,text,state这样的pojo加载一个节点,然后封装一个llistpojo,就可以加载所有类目。
2.根据tb_item_cat表封装pojo
查看tb_item_cat表,可以发现与异步树控件(id,text,state)需要json数据大概相似的数据
id,parent_id,name,status
我们来分析,到底哪三个才是我们需要的。
我们先根据parent_id=0,一级类目开发出发
查询到所有一级类目,它们的is_parent都为1,说明还有它们本身就是一个父类目。
.然后把父类目id,作为parent_id查询,选第一个查
发现它们is_parent也为1,说明还有它们本身也是一个父类目。
所以我们可以根据二级父目录的id作为parent_id,查询以二级父目录id作为parent_id的三级目录
最终查询到了根目录,is_parent=0
总结:可以使用tb_item_cat表中parent_id,name,status对应异步树控件中的id,text,state。
这个地方我也想了好大一会,需要多理解一下。当然也可以将这里想成一个封装好的api直接使用也没事。
3.编写代码
3.1封装一个EasyUITreeNode工具类
后台有很多地方都要加载商品类目,所以封装成工具类
因为服务层taotao-manager-service与表现层taotao-manager-web的controller,进行交互的时,
并不是简单的本地调用,而是使用dubbo进行远程服务调用,必须实现序列化接口。
3.2pojo实现序列化接口
因为服务层taotao-manager-service与表现层taotao-manager-web的controller,进行交互的时,
并不是简单的本地调用,而是使用dubbo进行远程服务调用,必须实现序列化接口。
3.3编写interface
3.4编写实现类并暴露服务接口
暴露服务接口
3.5编写controller并引入服务接口
引入服务接口
此致代码编写就完成了
4.运行测试
4.1安装服务
将taotao-manager、taotao-common、taotao-manager-interface、taotao-manager-pojo,分别安装
4.2运行
将taotao-manager-service、taotao-manager-web分别运行。