springboot集成Ztree-V3【数插件】开发web项目

东山富哥

已于 2022-07-15 07:38:18 修改

阅读量428

点赞数

分类专栏： ztree springboot 文章标签：前端 ztree

于 2022-07-15 07:16:37 首次发布

本文链接：https://blog.csdn.net/u014636209/article/details/125796273

版权

springboot 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

ztree

1 篇文章 0 订阅

订阅专栏

文章目录

项目搭建
附录
- sample项目源码
- Ztree-V3项目源码

项目搭建

创建一个web项目

在这里插入图片描述

将Ztree-V3 GitHub源码下的css和js文件夹复制到webapp下ztree文件夹下面

在这里插入图片描述

创建一个页面index.html

<!DOCTYPE html>
<HTML>
    <HEAD>
        <TITLE> ZTREE DEMO </TITLE>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="ztree/css/demo.css" type="text/css">
        <link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
        <script type="text/javascript" src="ztree/js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="ztree/js/jquery.ztree.core.js"></script>
        <SCRIPT LANGUAGE="JavaScript">
            var zTreeObj;
            // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
            var setting = {};
            // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
            var zNodes = [
                {
                    name: "test1",
                    open: true,
                    children: [
                        {
                            name: "test1_1"
                        },
                        {
                            name: "test1_2"
                        }
                    ]
                },
                {
                    name: "test2",
                    open: true,
                    children: [
                        {
                            name: "test2_1"
                        },
                        {
                            name: "test2_2"
                        }
                    ]
                }
            ];
            $(document).ready(function () {
                zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            });
        </SCRIPT>
    </HEAD>
    <BODY>
        <div>
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </BODY>
</HTML>

在这里插入图片描述

创建IndexController


package com.gaoxinfu.springboot.sample.ztree.controller;

import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * @Description:[一句话描述该类的功能]
 * @Author:gaoxinfu
 * @Date:2022/7/6 21:47
 * @Version 1.0.0
 */
@Controller
public class IndexController {

    @RequestMapping("/index")
    public String home(Map<String, Object> model) {
        model.put("message", "这里是Index主页");
        return "index";
    }
}

在这里插入图片描述

验证

在这里插入图片描述

附录

sample项目源码

https://github.com/gaoxinfu/springboot-sample/tree/master/springboot-sample-ztree

Ztree-V3项目源码

https://github.com/gaoxinfu/zTree_v3

东山富哥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
springboot集成Ztree-V3【数插件】开发web项目

https//github.com/gaoxinfu/springboot-sample/tree/master/springboot-sample-ztreehttps//github.com/gaoxinfu/zTree_v3。
复制链接

扫一扫