SSM框架下，以tree结构分级显示数据

1.在Controller层建立跳转tree.jsp以及获取tree数据的方法：

    @ApiOperation(value = "树")
    @RequestMapping(value = "/tree", method = RequestMethod.GET)
    public String tree(Integer parentId,ModelMap modelMap) {
        modelMap.addAttribute("parentId",parentId);
        return "tree.jsp";
    }

    @ApiOperation(value = "树")
    @RequestMapping(value = "/getTree", method = RequestMethod.POST)
    @ResponseBody
    public Object getTree() {
        return treeExampleService.getTree();
    }

2.在Service层实现getTree()方法：

Service层

JSONArray getTree();

Service实现层

@Override
    public JSONArray getTree() {
       TreeExample example = new TreeExample();
        example .createCriteria();
        List<TreeExample> list = treeExampleMapper.selectByExampleWithBLOBs(example);
        for(TreeExample example: list){
            JSONObject node = new JSONObject();
            node.put("id", example.getId());
            node.put("name", example.getName());
            node.put("open", true);
            node.put("parentId",example.getParentId());
            jsonArray.add(node);
        }
        return jsonArray;
    }

3.view层实现tree.jsp

tree.jsp

<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<div id="exampleDialog" class="crudDialog" style="height:210px;">
    <form id="exampleForm" method="post">
        <div class="form-group" style="height:170px;overflow:auto;">
            <input type="hidden" id="parentId" name="parentId" value="${parentId}" class="text">
            <ul id="ztree" class="ztree"></ul>
        </div>
        <div class="form-group text-right dialog-buttons">
            <a class="waves-effect waves-button" href="javascript:;" onclick="exampleSubmit();">保存</a>
            <a class="waves-effect waves-button" href="javascript:;" onclick="exampleDialog.close();">取消</a>
        </div>
    </form>
</div>
<script>
    var superId =0;
    var superName="顶级目录";
    var setting = {
        check: {
            enable: false,
        },
        async: {
            enable: true,
            url: '${basePath}/getTree',
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id", //修改默认的ID为自己的ID
                pIdKey: "parentId",//修改默认父级ID为自己数据的父级ID
                rootPId: 0     //根节点的ID
            }
        },
        callback: {
            onClick: function zTreeOnClick(event, treeId, treeNode) {
                superId=treeNode.id;
                superName=treeNode.name;
                },
//            异步加载成功后
            onAsyncSuccess: function zTreeOnAsyncSuccess(){
               var treeObj = $.fn.zTree.getZTreeObj("ztree");
//                var node1 = treeObj.getNodeByParam("orgId",$("#pid").val(), null);
//             隐藏自身节点，父节点不能为自己
//                treeObj.hideNode(node1);
               var node = treeObj.getNodeByParam("cateId",$("#parentId").val(), null);
               treeObj.selectNode(node);//选择点
               treeObj.setting.callback.onClick(null, treeObj.setting.treeId, node);//调用点击事件
            }
        }
    };

    $(document).ready(function(){
        $.fn.zTree.init($("#ztree"), setting, null);
    });

    function exampleSubmit() {
        if(superId==0){
            $.confirm({
                title: false,
                content: '请选择！',
                autoClose: 'cancel|3000',
                backgroundDismiss: true,
                buttons: {
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
            return false;
        }
        $("#parentId").val(superId);
        $("#parentName").val(superName);
        exampleDialog.close();
}
</script>

4.方法调用

使用onclick即可调用：

onclick="exampleTree()"

function exampleTree() {
        exampleDialog = $.dialog({
            height:200,
            animationSpeed: 300,
            title: '父目录',
            content: 'url:${basePath}/tree/',
        });
    }

5.效果图

tree结构

(图片来自网络，仅展示类似效果)

6.总结

对存在父子节点的数据进行展示的时候，可以使用树形结构呈现，效果更直观。