【开发实践】使用jstree实现文件结构目录树

一、需求分析

因开发系统的需要,维护服务端导出文件的目录结构。因此,需要利用jstree,实现前端对文件结构目录的展示。

【预期效果】:

 二、需求实现

【项目准备】:

jstree在线文档:jstree在线文档地址

前端需要的json数据格式:

{
"id": "顶级目录1",
"text": "顶级目录1",
"icon": "fa fa-folder",
"children": [
  {
    "id": "二级目录1",
    "text": "二级目录1",
    "icon": "fa fa-file-zip-o",
    "children": null
  }
]
}

引入js文件

资源下载:jstree 文件

<script src="./js/jstree/jstree.js"></script>
<script src="./js/jstree/examples.treeview.js"></script>

前端html

<div id="treeBasic"> </div>

 JavaScript代码

// API createNode(parent, id, text, position).
 //  parent:在该节点下创建,id: 新节点id, text:新节点文本, position:插入位置   
 function createNode(parent_node, new_node_id, new_node_text, position) {
        $('#treeBasic').jstree('create_node', $(parent_node), {
            "text": new_node_text,
            "id": new_node_id
        }, position, false, false);
    };

//发送ajax请求
getFiles() {
    axios({
        method: "get",
        url: "download/get-files"
    }).then(res => {
        this.fileList = res.data.data;
        //当jsree加载完成会执行如下函数,创建两个节点
        var data = this.fileList;
        //创建根节点
        $("#treeBasic").jstree({
            'core': {
                "data": [data]
            },
        });
    }).catch(function (error) {
        console.log(error);
    })
},

服务端

@Data
@AllArgsConstructor
@NoArgsConstructor
public class FileDto {
    private String id;

    private String text;

    private String icon;

    private List<FileDto> children;
}


    @ResponseBody
    @GetMapping("/get-files")
    public Result getFiles() {
        FileDto root = new FileDto();
        ZipUtils.ergodic(new File("zip"), root, "static");
        root.setText("所有导出文件");
        return Result.success(root);
    }


    /**
     * 封装需要的file文件path多级文件对象
     *
     * @param file   源文件
     * @param target 目标多级对象
     */
    public static void ergodic(File file, FileDto target, String path) {
        if (file.isFile()) {
            target.setId(path + "/" + file.getName());
            target.setText(file.getName());
            target.setIcon("fa fa-file-zip-o");
        } else {
            target.setId(path + "/" + file.getName());
            target.setText(file.getName());
            target.setIcon("fa fa-folder");
            List<FileDto> childList = new ArrayList<>();
            File[] files = file.listFiles();
            for (File f : files) {
                FileDto child = new FileDto();
                ergodic(f, child, target.getId());
                childList.add(child);
            }
            target.setChildren(childList);
        }
    }

 三、效果展示


如果您觉得文章对您有帮助的话,点赞支持一下吧!

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

枫蜜柚子茶

你的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值