jstree动态生成树

时间:2022-03-09 07:15:46

前篇文章简单介绍了静态生成树,这篇文章将通过后台把数据通过json形式传到前台,进行动态生成树。

本篇的程序所用框架为Spring MVC,可以很方便的通过controller层传json到前台。

前端jsp页面部分代码:

        $.get("${ctx}/tree/treeList",function(data){
tree(data);
});
function tree(data){
//树形菜单
$('#tree')
.on("changed.jstree", function (e, data) {
alert(data);
}).jstree({'core' : {'data' : data} });
}

controller层部分代码如下:

@Resource
    private ITreeService<TreeVo> treeService;

    @RequestMapping(value = "/treeList")
@ResponseBody
public List<TreeVo> treeList(HttpServletRequest req, Map<String, Object> rep) {
List<TreeVo> treeList=treeService.getTree();
return treeList;
}

model层TreeVo代码如下:

public class TreeVo {
private Long id; //保存该节点ID
private String parent; //保存父节点ID
private String text; //保存名称(因jstree识别text,故该属性设为为text,而非name)
// private List<Tree> children;
……
…… (get set方法)
……
}

service 层代码如下:

本节只简单介绍如何处理数据。
举例从数据库获取的数据类型如下:
id   path    name
1   1.1      top1 
2   1.1.1   top11
3   1.1.2   top12
4    1.2     top2
通过程序把其转化为
id:1  parent:#    text:top1
id:2  parent:1    text:top11
id:3  parent:1    text:top12
id:4  parent:#    text:top2
protected void getTree(List<Entity> list, List<TreeVo> treeList) {
for (Entity dep : list) {
if (dep.getPath().substring(0, dep.getPath().lastIndexOf(".")).equals("1")) {
TreeVo tvo = new TreeVo();
tvo.setId(dep.getId());
tvo.setParent("#");
tvo.setText(dep.getName());
getChildPath(list, dep, treeList);
treeList.add(tvo);
}
}
} private void getChildPath(List<Entity> list, Entity parent, List<TreeVo> treeList) {
for (Entity dep : list) {
if (!dep.getPath().equals(parent.getPath()) && dep.getPath().substring(0, dep.getPath().lastIndexOf(".")).equals(parent.getPath())) {
TreeVo tvo = new TreeVo();
tvo.setId(dep.getId());
tvo.setText(dep.getName());
tvo.setParent(parent.getId().toString());
getChildPath(list, dep, treeList);
treeList.add(tvo);
}
}
}

都于使用Spring MVC 中的 @ResponseBody 传递json,若程序一切逻辑正常,却无法把json传至前台。可进行其下两步操作:

1. 查看配置文件是否正确,spring-mvc.xml 中部分代码如下:

    <mvc:annotation-driven>
<mvc:message-converters register-defaults="true">
<!-- 将StringHttpMessageConverter的默认编码设为UTF-8 -->
<bean class="org.springframework.http.converter.StringHttpMessageConverter">
<constructor-arg value="UTF-8" />
</bean>
<!-- 将Jackson2HttpMessageConverter的默认格式化输出设为true -->
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
<property name="prettyPrint" value="true"/>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>

2.查看是否引入jackson等相应jar包。

jstree动态生成树的更多相关文章

  1. jstree静态生成树并为树添加触发事件

    本章将介绍如何简单的使用jstree生成树(生成树的数据是静态的),并为树添加点击事件. 1. 建一个jsp页面,引入jquery.js(在其他js前引用),引入jstree所需的js,css文件(可 ...

  2. 使用jsTree动态加载节点

    因为项目的需要,需要做一个树状菜单,并且节点是动态加载的,也就是只要点击父节点,就会加载该节点下的子节点. 大致的效果实现如下图: 以上的实现就是通过jsTree实现的,一个基于JQuery的树状菜单 ...

  3. jsTree动态加载数据

    Views代码 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="view ...

  4. dTree 动态生成树

    http://luohua.iteye.com/blog/451453 dTree 主页:http://destroydrop.com/javascripts/tree/ dTree是个很方便在页面生 ...

  5. dTree动态生成树&lpar;后台处理,简化前台操作&rpar;

    dTree是个很方便在页面生成树的 js 控件,如果你下载了,我猜里在几分钟之内便能在页面上显示出一颗树来. 它本身给的例子是通过一些静态数据构造树,下面我说一种通过查询的数据动态构造树的方法. 例子 ...

  6. JSON动态生成树

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. ztree实现左边动态生成树,右边为具体信息功能

    页面原型图: 图片.png 功能需求:点击左边树上的子节点,像后台发送请求,将请求到的信息展示在右边的表单里面 前端代码实现: 引入css文档: <link rel="styleshe ...

  8. Ext&period;Net学习笔记23:Ext&period;Net TabPanel用法详解

    Ext.Net学习笔记23:Ext.Net TabPanel用法详解 上面的图片中给出了TabPanel的一个效果图,我们来看一下代码: <ext:TabPanel runat="se ...

  9. Spring多数据源解决方案

    Figure 2 多数据源的选择逻辑渗透至客户端 解决方案 Figure 3 采用Proxy模式来封转数据源选择逻辑 通过采用Proxy模式我们在方案实现中实现一个虚拟的数据源.并且通过它来封装数据源 ...

随机推荐

  1. iOS 用 SDWebImage 清理图片缓存

    效果图如下: 1.找到 SDWebImage找到SDImageCache类 2.添加如下方法 - (float)checkTmpSize { ; NSDirectoryEnumerator *file ...

  2. appdata文件夹有什么用途?C盘appdata可以删除吗?

    在内存紧张的时候,我们都会选择删除一些无关紧要的大文件来释放内存,有不少网友发现在系统C盘下有一个appdata文件夹,而且体积挺大的,不知道能不能删除,针对此问题,本文就为大家介绍appdata文件 ...

  3. Tomcat内存溢出详解【转载】

    本文转载自 http://elf8848.iteye.com/blog/378805 Java内存溢出详解 一.常见的Java内存溢出有以下三种: 1. java.lang.OutOfMemoryEr ...

  4. SQLSERVER 跨服 跨库

    一.同服务器 select * from 数据库名.dbo.表名 select * from 数据库名..表名 dbo可以省略,点不能. 二.不同服务器 --新增服务器连接exec sp_addlin ...

  5. python bottle框架(WEB开发、运维开发)教程

    教程目录 一:python基础(略,基础还是自己看书学吧) 二:bottle基础 python bottle web框架简介 python bottle 框架环境安装 python bottle 框架 ...

  6. Log4net 日志

    Log4net 日志使用介绍 概述 Log4net 有三个主要组件:loggers,appenders 和 layouts.这三个组件一起工作使得开发者能够根据信息类型和等级(Level)记录信息,以 ...

  7. Rotativa 转换html 为pdf时遇到的问题

    使用Rotativa,底层使用wkhtmltopdf 组件进行转换,使用过程中也遇到一些问题,记录下:首先,如果页面中有资源文件,需要使用的路径问题,必须使用全路径,http://xxxxx.其次,在 ...

  8. opencv 增强现实(一):特征点检测

    import cv2 as cv import numpy as np def draw_keypoints(img, keypoints): for kp in keypoints: x, y = ...

  9. mac下卸载jdk

    mac下安装软件很简单,但是卸载起来相对比较麻烦,下面进入正题: 首先你得知道你的电脑中安装了哪些jdk(mac可以安装多个jdk) 打开mac的终端,输入命令: ls /Library/Java/J ...

  10. U3D对齐功能

    1,按快捷键Shift + v 的用法:    [1]先选中你要对齐的模型A,[将物体A对齐到物体B].    [2]按快捷键Shift + v ,此时将鼠标移到模型A的各个顶点处,可发现各个顶点上会 ...