从零基础认识 easyUI tree插件

easyUI tree插件

easyUI tree插件的可以将已经有树结构的数据展示出来。树结构的数据就是在同一个表中，A数据的id是B数据的外键，以此表示A节点的下一级节点为B。

如上图，parent_id每个数字代表其父节点的id（0代表没有父节点）

例如 id ：1 - 10 用树表示则是：

        图书、音像、电子书刊                |__ 电子书刊                |     |__电子书                |     |__网络原创                |     |__数字杂志                |     |__多媒体图书                |__音像                      |__音乐                      |__影视                                         |__教育音像                                 ...

而最后一个节点的is_parent就为0。

1.easyUI tree使用条件

1. 拥有树结构的表数据
2. 引入了easyUI的js
3. 使用逆向工程生成了代码

2.分析easyUI tree使用所需的数据

1. 作为一棵数据树，他接收的数据类型为json格式

2. 异步树所需的数据结构：id , 节点上的文字：text , 节点的当前状态：status

   【异步树】：当点击节点的时候，才从数据库中加载子节点。（而不是事先预载好）

所需的数据使用一个pojo包装起来，进行返回。

3.easyUI tree前端的使用

1. 触发按钮

   <a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a>

2. 触发事件

   因为easyUI tree的初始化多个地方会用到，所以一般写在一个通用的common.js里面，一旦要用到就直接引入该js文件。

   初始化方法：

      init : function(data){    // 初始化图片上传组件    this.initPicUpload(data);    // 初始化选择类目组件    this.initItemCat(data);   },

   渲染插件：

      // 初始化选择类目组件   initItemCat : function(data){    $(".selectItemCat").each(function(i,e){        var _ele = $(e);        if(data && data.cid){            _ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");        }else{            _ele.after("<span style='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');        });    });   },

   1. 编写请求树数据的url
   2. 每点击一次执行一次onClick请求，请求的时候会把当前节点的id传到url中。用返回的数据对节点进行判断，是否是叶子节点，并选择它的显示方式。

   tree插件只要你告诉 它请求树数据的url地址。在页面加载的时候它就会自己渲染出一个空树壳出来，你一点击一个节点，他就拿着当前这个节点跑去url里面拿数据。拿到数据之后他对数据做一系列的处理，然后显示出来。

4.easyUI tree的数据请求

1.构建返回的POJO对象

因为插件需要的是固定格式的json数据，所以用对象包装属性后放进List中进行返回。

构建json的位置为common工程（第四专题有提到，common工程相当于一个工具箱）。

/** * EasyUI树形控件节点 * @author liyb * */public class EUTreeNode {    private long id;    private String text;    private String state;    public long getId() {        return id;    }...}

根据所需数据创建的pojo

2.编写Service接口和接口实现

1. 接口定义

   public interface ItemCatService {List<EUTreeNode> getCatList(long parentId);}

2. 接口实现

   /*** 商品分类管理  * @author liyb**/@Servicepublic class ItemCatServiceImpl implements ItemCatService {@Autowiredprivate TbItemCatMapper itemCatMapper;@Overridepublic List<EUTreeNode> getCatList(long parentId) {    //创建查询条件    TbItemCatExample example = new TbItemCatExample();    Criteria criteria = example.createCriteria();    criteria.andParentIdEqualTo(parentId);    //根据条件查询       List<TbItemCat> list = itemCatMapper.selectByExample(example);    List<EUTreeNode> resultList = new ArrayList<>();    //把列表转化为treeNodeList       for(TbItemCat tbItemCat : list){        EUTreeNode node = new EUTreeNode();        node.setId(tbItemCat.getId());        node.setText(tbItemCat.getName());        node.setState(tbItemCat.getIsParent()?"closed":"open");        resultList.add(node);    }    //返回结果    return resultList;}}

   1. example用于添加条件，相当where后面的部分，其通过添加id限定为查询指定id的数据。

          //创建查询条件    TbItemCatExample example = new TbItemCatExample();    Criteria criteria = example.createCriteria();    criteria.andParentIdEqualTo(parentId);

      （更多逆向工程的条件限定可进行百度搜索）

   2. 查询到指定的数据之后，存进对象里，再将对象存进List中

              EUTreeNode node = new EUTreeNode();        node.setId(tbItemCat.getId());        node.setText(tbItemCat.getName());        node.setState(tbItemCat.getIsParent()?"closed":"open");        resultList.add(node);

（Service详细介绍见第二专题）

3.Controler请求

/** * 商品分类管理Controller * @author liyb * */@Controller@RequestMapping("/item/cat")public class ItemCatController {    @Autowired    private ItemCatService itemCatService;    @RequestMapping("/list")    @ResponseBody    private List<EUTreeNode> getCatList(@RequestParam(value="id",defaultValue="0")long parentId){        List<EUTreeNode> list = itemCatService.getCatList(parentId);        return list;    }}

获取传来的id值，如果每传过来就默认为0。

4.运行

对common工程进行install之后就可以运行项目了。（详情可见专题四）