淘淘商城10-商品类目选择

完成功能效果:

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分别运行。

4.3运行效果

猜你喜欢

转载自blog.csdn.net/pdsu161530247/article/details/81673922