Springboot+Easyui——选择商品类别（树形结构）

2022-05-13 11:34:07 阅读：168 来源： 互联网

标签：function Springboot Easyui list Long ele 树形 data id

一、初始页面

　　1.1 弹出框点击事件/树形结构js分析

<td>商品类目:</td>
                <td>
                    <a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a>
                    <input type="hidden" name="cid" style="width: 280px;"></input>    
                </td>

 // 初始化选择类目组件
    initItemCat : function(data){
        $(".selectItemCat").each(function(i,e){//i= index 下标，e：element：元素
            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');
            });
        });
    },

二、后端

　　2.1创建实体类 EasyuiTree.java ：存放树形结构的属性值

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITree {
    private Long id; //节点id 编号
    private String text; //节点名称
    private String state; //节点状态：colse 关闭，open 打开
}

　　2.2 创建 ItemcatService.java

 List<EasyUITree> findItemCatTree(Long id);

　　2.3 创建 itemcatController.java

 /**
     * 业务需求: 查询商品分类的树形结构信息
     * URL地址: http://localhost:8091/item/cat/list
     * 类型: Request Method: POST
     * 返回值: EasyUITree对象
     */
    @RequestMapping("/item/cat/list")
    public List<EasyUITree> findItemCatTree(Long id){
        //查询商品分类信息  1季菜单
        //如果用户没有点击按钮，不会传递id值，则就设置为默认值
        Long parentId=(id==null?0:id);
        return itemCatService.findItemCatTree(parentId);
    }

　　2.4 创建itemcatServiceImpl.java

 @Override

    public List<EasyUITree> findItemCatTree(Long parentId) {
        /**
         * 1.根据parentId查询商品分类列表信息  一级商品分类信息
         * 2.将商品分类列表转化为List<VO>对象
         * 3.返回vo的list集合
         */
        //1、根据父节点查询字节点信息
         QueryWrapper<ItemCat> wrapper = new QueryWrapper<>();
         wrapper.eq("parent_id", parentId);
         List<ItemCat> list = itemCatMapper.selectList(wrapper);
         //将itemcat对象传化为vo对象
        List<EasyUITree> voList = new ArrayList<>(list.size());
        for (ItemCat itemCat:list){
             Long id = itemCat.getId();
             String text = itemCat.getName();
             //如果是父节点就闭合，否则打开
           String state = itemCat.getIsParent() ? "closed" : "open";
             EasyUITree tree = new EasyUITree(id, text, state);
             voList.add(tree);

        }

        return voList;
    }

三、页面实现效果

来源于：https://harrylyj.blog.csdn.net/article/details/114383375?spm=1001.2014.3001.5502

标签：function,Springboot,Easyui,list,Long,ele,树形,data,id
来源： https://www.cnblogs.com/16904985zy-aoyu/p/16265962.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Springboot+Easyui——选择商品类别（树形结构）