JSTree

最新推荐文章于 2023-12-12 11:43:31 发布

Carey-W

最新推荐文章于 2023-12-12 11:43:31 发布

阅读量290

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/C1522743894/article/details/78855188

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

引入jsTree的主题样式以及js文件dist,该文件可以在官网进行下载 https://www.jstree.com/,将该文件放入public文件夹里面，并通过配置类AppConfig配置映射路径,配置如上面的AppConfig类

这里写图片描述

在WEB-INF下的/jsp文件夹下建立jsp静态资源test.jsp,在jsp中引入主题样式，jquery还有jsTree的js文件（注意，jquery文件要先引入，因为jsTree的js是基于jquery来开发的），然后在后面引入自身写的js文件getData.js

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link  rel="stylesheet" href="/SSMM/assets/bootstrap/css/bootstrap.css">
<link  rel="stylesheet" href="/SSMM/assets/tree/dist/themes/default/style.min.css">
<link  rel="stylesheet" href="/SSMM/assets/font/css/font-awesome.min.css">

<script src="/SSMM/assets/js/jquery.js" type="text/javascript"></script>
<title>Insert title here</title>
</head>
<body>
<script src="/SSMM/assets/tree/dist/jstree.min.js"></script>
    <h2>你好SSM</h2>
    <div id="jstree_demo_div">
    </div>

    <hr>
    <div id="ajax"></div>
<!-- <script>
    模拟数据
    var deptData = [ 
    {id: 1, text: '市场部', parent: '#'}, 
    {id: 2, text: '开发部', parent: '#'}, 
    {id: 3, text: '行政人事部', parent: '#', icon: 'fa fa-address-book'}, 
    {id: 4, text: '咨询中心', parent: '1'}, 
    {id: 5, text: 'Java部', parent: '2'}, 
    {id: 6, text: 'IOS部', parent: '2'} 
];
    $('#jstree_demo_div').jstree({
    core: {
    // url:
    data :depData
    }
    });
</script> -->
    $('#jstree_demo_div').jstree({
        'core' : {
            'data' : {
                "url" : "../dept",
                "dataType" : "json" // needed only if you do not supply JSON headers
            }
        }
    });
</body>
</html>

定义Controller层，接收到请求，从后台获取数据，并将数据以json的格式发送出去，由上面需要的格式来看，我们只需要获取三个数据

1.id ：树的编号

2.text: 树的内容

3.parent: 树的父节点(注意：第一个树必须为’#’)

而后台却会传过来很多数据，于是我们可以用一个对象Page封装需要的数据

package ssm.carey.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import ssm.carey.domain.Dept;
import ssm.carey.domain.Depts;
import ssm.carey.service.DeptService;

@Controller
public class DeptController {
    @Autowired
    private DeptService deptService;

    @RequestMapping(method = RequestMethod.GET, value = "/depts/dept")
    public String getPage() {
        return "dept";
    }

    /*@RequestMapping(method = RequestMethod.GET, value = "/dept")
//  @ResponseBody//将json转化为指定的类型
    public String allDept(Model model) {
        System.out.println(deptService.allDept());
        List<Depts> dept=deptService.allDept();
        model.addAttribute("dept", dept);
        return "dept";
    }*/
    @RequestMapping(method = RequestMethod.GET, value = "/dept",
            produces = MediaType.APPLICATION_JSON_VALUE)
    @ResponseBody//将json转化为指定的类型
    public List<Depts> allDepts() {
//      System.out.println(deptService.allDept());
        return deptService.allDept();
    }
}