SpringBoot树的展示

实体类:(定义的实体类要和bootstrupt中的相应的数据对应上) 不要把父节点设置成parentId，因为回合前台中的bootstrupt的parentId重名，导致数据没有办法传递过去

package com.lm.anga.platform.data.model;

import lombok.Data;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Data
public class CompTree  implements Serializable {
    protected Long treeparentId;
    protected Long id;
    protected String text;
    protected int level;
    protected int tag;
    protected List nodes = new ArrayList();
    protected String name;
    protected String type;
    protected String backColor;
    protected String icon;
    protected String color;
    protected String expandIcon;
    protected String nodeIcon;
    protected String isFolder = "N";
    protected boolean selected = false;
    protected boolean checked = false;
    protected Boolean expanded = true;
    protected Map state = new HashMap();
}

service(不断地把节点放进去)PS：老师用的是递归的方法，但是我这情况有点不同，所以每一层写一个方法

 @Override
    public List CompTreeData(){
        List nodes = new ArrayList();
        CompTree root = new CompTree();
        root.setText("组件分类");
        root.setId(1L);
        root.setIsFolder("Y");
        root = this.secondNode(root);
        nodes.add(root);
        return nodes;
    }

    /**
     * 组件是第一层，secondNode表示的是第二层
     * @param node
     * @return
     */
    private CompTree secondNode(CompTree node) {
        List list=compCateMapper.getDisplayCate();
        if (BeanUtils.isNotEmpty(list)) {
            List nodes = new ArrayList();
            Iterator var4 = list.iterator();
            while(var4.hasNext()) {
                CompCate res = (CompCate)var4.next();
                CompTree sub = new CompTree();
                sub.setId(res.getId());
                sub.setText(res.getName());
                sub.setIcon(res.getIcon());
                sub.setIsFolder("Y");
                sub.setTreeparentId(1L);
                this.thirdNode(sub);
                nodes.add(sub);
            }
            node.setNodes(nodes);
        }
        return node;
    }
    /**
     * 第三层
     * @param node
     * @return
     */
    private CompTree thirdNode(CompTree node) {
        List list=compCateMapper.getListByParentId(node.getId());
        if (BeanUtils.isNotEmpty(list)) {
            List nodes = new ArrayList();
            Iterator var4 = list.iterator();

            while(var4.hasNext()) {
                CompCate res = (CompCate)var4.next();
                CompTree sub = new CompTree();
                sub.setId(res.getId());
                sub.setText(res.getName());
                sub.setIcon(res.getIcon());
                sub.setTreeparentId(node.getId());
                nodes.add(sub);
            }
            node.setNodes(nodes);
        }
        return node;
    }

js

$(function() {
    treelist  = new treelist();
    treelist.init();
});
(function() {
    //定义常量
    var 	_consts = {
        FORM : '#systemResForm',// 表单form
        TREE : '#treeview', //左分类树
        IconSelector : '.icon-selector'
    };
    /**
     * sys_auth_res 对象
     * @returns {treelist}
     */
    treelist = function() {
        //定义属性
    };

    /**
     * 方法
     */
    treelist.prototype = {
        consts:	_consts,
        /**
         * 初始化
         */
        init : function() {
            if (this.hasInit) // 是否已初始化
                return false;
            this.hasInit = true;
            if ($(this.consts.FORM).length > 0)//表单
                this._initForm();
            if ($(this.consts.TREE).length > 0){//树
                this._treeFrameResize();
                this._initResTree();
                this.rightClick();
            }
            if($(this.consts.IconSelector).length > 0)
                this._initIconSelector();
        },

        _initIconSelector:function(){
            $('.icon-selector').fontIconPicker({
                source:    icons,
                emptyIcon: true,
                hasSearch: true
            });
        },

        _treeFrameResize:function(){
            var systemId=$("#systemId").val();
            var $height=getWindowHeight();
            $('#listFrame').height( $height);
            $('#listFrame').attr('src',__ctx+'/platform/data/compCate/list')
            $('div.boxscroll').height( $height-40);
        },

        /**
         * 初始化表单
         */
        _initForm : function() {
            var me = this, form = $(this.consts.FORM), frm = form.form();
            // 触发表单验证
            frm.valid();
            // 处理表单保存
            $(document).on('click', 'a.save-link', function() {
                frm.ajaxForm({
                    success : me._showResponse
                });
                if (frm.valid())
                    form.submit();
            });
        },

        _initResTree:function(){
            var me=this;
            var systemId=$("#systemId").val();
            $("#listFrame").attr("src",__ctx+"/platform/data/compCate/list");
            var tree={
                data:[],
                backColor:'#FFFFFF',
                showCheckbox : false,
                onNodeChecked: function(event, data){
                },
                onNodeSelected:function(e, data){
                    me.data=data;
                    if(data.isFolder=='Y'){
                        $("#listFrame").attr("src",__ctx+"/platform/data/compCate/list?parentId="+data.id);
                    }
                },
                onNodeUnchecked: function(event, data){
                }
            };
            var url=__ctx+"/platform/data/compCate/getResTreeData";
            $.post(url,function(result){
                tree.data=result;
                me.tree=tree;
                $('#treeview').treeview(tree);
                //默认全选
                $('#treeview').treeview('checkAll', { silent: true });
            });
        },
        rightClick:function(){
            var  me = this;
            var systemId=1;
            $("#treeview").on("contextmenu","li.list-group-item.node-treeview", function(e){
                e.preventDefault();
                e.stopPropagation();
                var node=me.data;
                var nodeId=me.data.id;
                var treeparentId = me.data.treeparentId;
                var menu=null;
                if(node){
                    if(node.id==systemId){
                        menu=$('#rootMenu');
                    }else{
                        if(node.isFolder=='Y'){
                            menu=$('#folderMenu');
                        }else{
                            menu=$('#leafMenu');

                        }
                    }
                }
                var ul = $("li.list-group-item.node-treeview");
                $(ul).each(function(){
                    var li=this;
                });
                $(this).css("background-color","#428bca");
                menu.contextMenu(e,{
                    onItem: function(context, ev) {
                        var target =$(ev.target),
                            action = target.data("action");
                        if (target.hasClass('disabled'))
                            return false;
                        switch (action) {
                            case "node_add":// 新增节点
                                me.addNode(nodeId,treeparentId);
                                break;
                            case "node_edit":// 编辑节点
                                me.editNode(nodeId);
                                break;
                            case "node_del":// 删除节点
                                me.delNode(nodeId);
                                break;
                            case "node_param":// 删除节点
                                me.paramNode(nodeId);
                                break;
                        }
                    }
                });

            });

        },
        editNode:function(nodeId){
            var url=__ctx+"/platform/data/compCate/edit?id="+nodeId;
            $("#listFrame").attr("src",url);
        },
        addNode:function(nodeId,treeparentId){
            var systemId=$("#systemId").val();
            var url=__ctx+"/platform/data/compCate/edit?id="+nodeId+"&parentId="+treeparentId;
            $("#listFrame").attr("src",url);
        },
        delNode:function(nodeId){
            url=__ctx+"/platform/data/compCate/del?id="+nodeId;
            $.post(url,function(responseText){
                var msg = new com.mliot.form.ResultMessage(responseText);
                if (msg.isSuccess()) {
                    window.location.href = __ctx+'/platform/data/compCate/treeList';
                } else {
                    DialogUtil.error(msg.getMessage());
                }
            });
        },
        paramNode:function(nodeId){
            var url=__ctx+"/platform/data/paramInfo/list?cateId="+nodeId;
            $("#listFrame").attr("src",url);
        },
        /**
         * 表单成功返回信息
         *
         * @param responseText
         */
        _showResponse : function(responseText) {
            var msg = new com.mliot.form.ResultMessage(responseText);
            if (msg.isSuccess()) {
                DialogUtil.confirm(msg.getMessage() + ',是否继续操作',
                    function(rtn) {
                        if(rtn)
                            window.location.reload(true);
                        else
                            window.location.href = __ctx+'/platform/data/compCate/list';
                    });
            } else {
                DialogUtil.error(msg.getMessage());
            }
        }
    };
})();

Html 

    

        




            

                

            
        
    
    

        
    




    

        
  增加节点
    


    

        
  编辑节点
        
  删除节点
    


    

        
  增加节点
        
  编辑节点
        
  删除节点
        
  参数管理
    

controller

/**
	 * 得到组件页面的树
	 * @param request
	 * @param response
	 * @return
	 * @throws Exception
	 */
	@RequestMapping({"getResTreeData"})
	@ResponseBody
	public List getResTreeData(HttpServletRequest request, HttpServletResponse response) throws Exception {
		List nodes = compCateService.CompTreeData();
		return nodes;
	}