easyui--4.tree

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