使用easyui实现菜单树,最后完成的结果为这样:

首先需要引用对应的js和css的包,找到对应的位置.

<link rel="stylesheet" type="text/css" href="../resource/jquery-easyui-1.4.4/themes/gray/easyui1.css">
<link rel="stylesheet" type="text/css" href="../resource/jquery-easyui-1.4.4/themes/icon.css">
<!-- <script type="text/javascript" src="../resource/jquery-easyui-1.4.4/jquery.easyui.min.js"></script> -->
<script type="text/javascript" src="../resource/jquery-easyui-1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="../resource/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

然后在对应的需要树的位置添加代码:

<div>
                    <ul id="foldertree" class="easyui-tree">
                    </ul>
                </div>

注意一定class是easyui-tree哦.

然后就是写加载对应的树的js了,找的合适的位置写js

<script type="text/javascript">
    $(function () {
        $("#foldertree").tree({
            url: '../showFolderTree.action',
            dnd: true,
            lines: false,
            onBeforeDrag: function (target) {
                if (!target.attributes || target.attributes.tp == 'root') {
                    return false;
                }
                return true;
            },
            onDragEnter: function (target, source) {
                return false;
            }
        });
    });
</script>

然后找到对应的action去写树,树文件夹接受的是json格式的数据类型:

[{"id":"00b38cce1ba24a448cba62ae3dffa894","name":"2019090310301","open":true,"pId":"014fe3590ed24ca2bddda0752556ac80"},
{"id":"013316a7c20b4dd2a625f6845fff6d51","name":"123","open":true,"pId":"99df9510a3224d919b7cbe0230223182"},
{"id":"014fe3590ed24ca2bddda0752556ac80","name":"75831982","open":true,"pId":"00b38cce1ba24a448cba62ae3dffa894"},{"id":"0bc52451258a488985cb45ee25a37acd","name":"3-2文件夹02","open":true,"pId":"e6121d17c8ef4011a8c46555b8832dbb"},
{"id":"0c94c7cd26054c8ab6240dfcc3e59679","name":"测试树形文件夹112","open":true,"pId":"27025c464d014901926b4cd8aaa429e5"},
{"id":"0ec6391f3b994b92bd3a510b5c9cbcf3","name":"111 ","open":true,"pId":"c408e4ad7f234b1285888f4258752de8"},
{"id":"166922996a7d46e5b35228f65e66e129","name":"123456","open":true,"pId":"00b38cce1ba24a448cba62ae3dffa894"},{"id":"1a7278bae0704de2a516265734ac5111","name":"递归删除文件夹01","open":true,"pId":"ca270b6f6e05493fbe6a86abf897425d"},
{"id":"1d318ea6b12148afaf30ee6c09e50dcb","name":"2级目录01","open":true,"pId":"220e95ad87354a29a2ee2b724b911457"},
{"id":"1d86b330500843b3bacae2d6c8c2dfaa","name":"测试树形文件夹12","open":true,"pId":"beb16c6f38c9453d910c7250e5e5fc2b"},
{"id":"20eb8c2504f046a7b699441e9fc2ba05","name":"再创建一个文件夹","open":true,"pId":"00b38cce1ba24a448cba62ae3dffa894"},
{"id":"220e95ad87354a29a2ee2b724b911457","name":"一级目录01","open":true,"pId":"2a8de6acfbb64ea899ff3f5b00e53a8e"},
{"id":"26cbed8da90147d1aa208e1d23e8324a","name":"3-2文件夹01","open":true,"pId":"e6121d17c8ef4011a8c46555b8832dbb"},
{"id":"27025c464d014901926b4cd8aaa429e5","name":"测试树形文件夹11","open":true,"pId":"beb16c6f38c9453d910c7250e5e5fc2b"},
{"id":"2a370cb65d2041c5a150dc2d01f1d1bd","name":"状态002","open":true,"pId":"0"},
{"id":"2a8de6acfbb64ea899ff3f5b00e53a8e","name":"文件夹列表01","open":true,"pId":"0"},
{"id":"34a7cfe4036a4a2ab69302670cb81fb8","name":"xr创建的文件夹","open":true,"pId":"0"},{"id":"34f5805715a44516bc57e6e32d841bd7","name":"文件1","open":true,"pId":"0,0"},
{"id":"39823389120946498adae217163a7c3b","name":"1","open":true,"pId":"39c32e65d1e4442892fa6ad30f3597f3"},
{"id":"39c32e65d1e4442892fa6ad30f3597f3","name":"1","open":true,"pId":"0"},
{"id":"3c439d119e944c19b8d4af58cd819d63","name":"1111111111111111111111111","open":true,"pId":"0"},
{"id":"43c6889c9e3346b488c0b123159268e6","name":"一级目录02","open":true,"pId":"2a8de6acfbb64ea899ff3f5b00e53a8e"},
{"id":"48789d18501b4d91800ba9373b18070b","name":"2级目录02","open":true,"pId":"220e95ad87354a29a2ee2b724b911457"},
{"id":"48edb62847a04f9da6eaa08c76533a38","name":"状态003","open":true,"pId":"0"},
{"id":"4e6f9c282f894f4eb151ba4316930e1b","name":"测试树形文件夹114","open":true,"pId":"27025c464d014901926b4cd8aaa429e5"},
{"id":"6039efce2d074ecba87f35f76ab007e8","name":"测试树形文件夹113","open":true,"pId":"27025c464d014901926b4cd8aaa429e5"},
{"id":"6801b2b908164974a4a9c62f59fa3a63","name":"测试树形文件夹1111","open":true,"pId":"e54c7f1f05d6435699ce9a5f65a4a126"},
{"id":"7013aad690b846ec8dfcf4e6394fdbd5","name":"3级目录02","open":true,"pId":"1d318ea6b12148afaf30ee6c09e50dcb"},
{"id":"75005b973bfc4032be3a94f88561e86a","name":"test023","open":true,"pId":"8a0ab1de680f4461a46d5e58fb0ad869"},
{"id":"759f8c8e31674a28bdfe685b744ac930","name":"3级目录01","open":true,"pId":"1d318ea6b12148afaf30ee6c09e50dcb"},
{"id":"77eb846dd21746e7a4bac5c551ee262a","name":"1231","open":true,"pId":"0"},
{"id":"786890e78fdd4030a082143976f81af0","name":"00011 ","open":true,"pId":"c99a2d5ca1184f86984a7ff18e154130"},
{"id":"8775b3aa6f1640ac8e4424bc7309c504","name":"test023123","open":true,"pId":"8775b3aa6f1640ac8e4424bc7309c504"},
{"id":"8a0ab1de680f4461a46d5e58fb0ad869","name":"test024","open":true,"pId":"0"},
{"id":"8f64b1090e8e4a09a156660e84e9b060","name":"递归删除文件夹02","open":true,"pId":"1a7278bae0704de2a516265734ac5111"},
{"id":"8fd022d19f30455d92b39c4f9fb48bd6","name":"测试树形文件夹122","open":true,"pId":"1d86b330500843b3bacae2d6c8c2dfaa"},
{"id":"b30cfe52d4a64722a7faedfa2669fc61","name":"test023","open":true,"pId":"75005b973bfc4032be3a94f88561e86a"},
{"id":"bbd612e84dad471c8ce99ed27432dab3","name":"文件夹11","open":true,"pId":"0"},{"id":"bbd612e84dad471c8ce99ed27432dab31","name":"文件夹02","open":true,"pId":"bbd612e84dad471c8ce99ed27432dab3"},
{"id":"beb16c6f38c9453d910c7250e5e5fc2b","name":"测试树形文件夹1","open":true,"pId":"0"},
{"id":"c408e4ad7f234b1285888f4258752de8","name":"1 ","open":true,"pId":"0"},
{"id":"c43f88a821ff4cecb039481dec7e9b4f","name":"测试树形文件夹13","open":true,"pId":"beb16c6f38c9453d910c7250e5e5fc2b"},
{"id":"c7245e341f814c63b4bd530498b0d234","name":"3-3文件夹01","open":true,"pId":"26cbed8da90147d1aa208e1d23e8324a"},
{"id":"c99a2d5ca1184f86984a7ff18e154130","name":"123","open":true,"pId":"0"},
{"id":"ca270b6f6e05493fbe6a86abf897425d","name":"递归删除文件夹","open":true,"pId":"0"},
{"id":"cffcfc91ce7344ad9c3acdb6610c4495","name":"11111111","open":true,"pId":"0"},
{"id":"e54c7f1f05d6435699ce9a5f65a4a126","name":"测试树形文件夹111","open":true,"pId":"27025c464d014901926b4cd8aaa429e5"},
{"id":"e6121d17c8ef4011a8c46555b8832dbb","name":"3-1文件夹01","open":true,"pId":"759f8c8e31674a28bdfe685b744ac930"},
{"id":"eb80856d6c0242269bb919f15d17737b","name":"测试树形文件夹121","open":true,"pId":"1d86b330500843b3bacae2d6c8c2dfaa"}]

后台controller层写的对应代码就是

@RequestMapping(value = "/showShiftFolders.action/{pageId}")
    public String showShiftFolders(Model model, @PathVariable String pageId) {
        //查询所有文件夹列表
        List<PortalFolder> folders = portalService.getFolderList();
        //将list集合封装成json格式,导入的包为import net.sf.json.JSONArray;
        JSONArray jsonArray = JSONArray.fromObject(folders);
        String json = jsonArray.toString();
        //System.out.println(json);可以测试打印输出一下
        //设置属性
        model.addAttribute("folderlist", json);
        //返回到对应的页面中
        return TPL + "shiftFileTo";
    }

其中实体类PortalFolder为:

package com.w.entity.portal;

public class PortalFolder {
    //当前pageId
    private String id;
    //父类pageId
    private String pId;
    //名称
    private String name;
    //设置状态为true
    private boolean open = true;

    public boolean isOpen() {
        return open;
    }

    public void setOpen(boolean open) {
        this.open = open;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getpId() {
        return pId;
    }

    public void setpId(String pId) {
        this.pId = pId;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

然后是service层的代码:

 public List<PortalFolder> getFolderList() {
        List<PortalFolder> lists = mapper.getFolderList();
        PortalFolder portalFolder = new PortalFolder();
        portalFolder.setId("0");
        portalFolder.setName("根目录");
        portalFolder.setpId("-1");
        portalFolder.setOpen(true);
        return lists;
    }

最后在数据库中查询出对应的文件就可以了,希望对你有帮助。喜欢的朋友可以关注我微信的公众号：从小白到架构师。我会每天更新学习内容的。