1 Js+html方式
1.1 html
<ul id="myId"></ul>
1.2 js
需要满足一定的json格式
$(function(){ $("#myId").tree({ url:'tree_data.json', animate:false }); })
2 原生html
<ul id="tt" class="easyui-tree"> <li> <span>Folder</span> <ul> <li> <span>Sub Folder 1</span> <ul> <li> <span><a href="#">File 11</a></span> </li> <li> <span>File 12</span> </li> <li> <span>File 13</span> </li> </ul> </li> <li> <span>File 2</span> </li> <li> <span>File 3</span> </li> </ul> </li> <li> <span>File21</span> </li> </ul>
3 商品类目选择
3.1 原型
3.2 功能分析
3.3 Js
3.3.1 初始化
commom.js
// 初始化选择类目组件
initItemCat : function(data){
$(".selectItemCat").each(function(i,e){
var _ele= $(e);
if(data&& data.cid){
_ele.after("<spanstyle='margin-left:10px;'>"+data.cid+"</span>");
}else{
_ele.after("<spanstyle='margin-left:10px;'></span>");
}
_ele.unbind('click').click(function(){
$("<div>").css({padding:"5px"}).html("<ul>")
.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',
animate:true,
onClick : function(node){
if($(this).tree("isLeaf",node.target)){
// 填写到cid中
_ele.parent().find("[name=cid]").val(node.id);
_ele.next().text(node.text).attr("cid",node.id);
$(_win).window('close');
if(data && data.fun){
data.fun.call(this,node);
}
}
}
});
},
onClose : function(){
$(this).window("destroy");
}
}).window('open');
});
});
},
3.3.2 异步加载树
展示商品分类列表,使用EasyUI的tree控件展示。
初始化tree请求的url:/item/cat/list
参数:
初始化tree时只需要把第一级节点展示,子节点异步加载。
long id(父节点id)
返回值:json。数据格式
[{
"id": 1,
"text": "Node 1",
"state": "closed"
},{
"id": 2,
"text": "Node 2",
"state": "closed"
}]
state:如果节点下有子节点“closed”,如果没有子节点“open”
创建一个pojo来描述tree的节点信息,包含三个属性id、text、state。放到e3-common工程中。
查询的表:
tb_item_cat
查询列:
Id、name、isparent
查询条件parentId
3.4 数据库
排列序号,表示同级类目的展现次序,如数值相等则按名称次序排列。取值范围:大于零的整数
3.5 异步加载数pojo
/**
* 异步加载数 pojo
*/
public class EasyUITreeNode implements Serializable {
private Long id;
private String text;
private String state;
public LonggetId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public StringgetText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public StringgetState() {
return state;
}
public void setState(String state) {
this.state = state;
}
}
3.6 Dao层
tb_item_cat
可以使用逆向工程生成的代码,查询条件:parent_id
3.7 Service层
3.7.1 Code
参数:long parentId
业务逻辑:
1、根据parentId查询节点列表
2、转换成EasyUITreeNode列表。
3、返回。
返回值:List<EasyUITreeNode>
/**
* 商品分类Service
*/
public interface ItemCatService {
/*
* 根据 parentId 获取商品目录
*/
List<EasyUITreeNode> getItemCatList(Long parentId);
}
/**
* 商品分类管理
*/
@Service
public class ItemCatServiceImpl implements ItemCatService {
@Autowired
private TbItemCatMapper itemCatMapper;
@Override
public List<EasyUITreeNode>getItemCatList(Long parentId) {
//1.根据parentId查询子节点列表
TbItemCatExample example = new TbItemCatExample();
Criteria criteria =example.createCriteria(); //设置查询条件
criteria.andParentIdEqualTo(parentId);
List<TbItemCat> itemCatList= itemCatMapper.selectByExample(example);
//2.将结果列表转换
List<EasyUITreeNode> resultList = new ArrayList<>();
for (TbItemCatitemCat : itemCatList) {
EasyUITreeNode node = new EasyUITreeNode();
node.setId(itemCat.getId());
node.setText(itemCat.getName());
node.setState(itemCat.getIsParent()?"closed":"open");
resultList.add(node);
}
return resultList;
}
}
3.7.2 发布服务
<dubbo:service interface="cn.e3mall.service.ItemCatService"ref="itemCatServiceImpl"timeout="600000" />
3.8 表现层
3.8.1 Controller
初始化tree请求的url:/item/cat/list
参数:
long id(父节点id)
返回值:json。数据格式
List<EasyUITreeNode>
/**
* 商品分类管理Controller
*/
@Controller
public class ItemCatController {
@Autowired
private ItemCatService itemCatService;
@RequestMapping("/item/cat/list")
@ResponseBody
public List<EasyUITreeNode>getItemCatList(
@RequestParam(name = "id" ,defaultValue = "0") Long parentId
) {
return itemCatService.getItemCatList(parentId);
}
}
3.8.2 引用服务
<dubbo:reference interface="cn.e3mall.service.ItemCatService"id="itemCatService"/>
核心代码: http://download.csdn.net/download/qq_26553781/10183141