jstree动态生成树

前篇文章简单介绍了静态生成树,这篇文章将通过后台把数据通过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包。

时间: 2024-10-07 03:48:25

jstree动态生成树的相关文章

dTree 动态生成树

http://luohua.iteye.com/blog/451453 dTree 主页:http://destroydrop.com/javascripts/tree/ dTree是个很方便在页面生成树的 js 控件,如果你下载了,我猜里在几分钟之内便能在页面上显示出一颗树来. 它本身给的例子是通过一些静态数据构造树,下面我说一种通过查询的数据动态构造树的方法. 例子里没有真实的数据库操作,而是用一个模拟的数据库操作类替代. 在该例子中为了简便和理解没有分为过多的层,仅有 页面显示层 和 模拟

dTree+jquery生成树

Dtree目录树的总结 一:函数 1:页面中                              tree.add(id,pid,name,url,title,target,icon,iconOpen,open);                                  参数说明:                                              id         :节点自身的id                                    

Web应用程序开发,基于Ajax技术的JavaScript树形控件

感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用,它用来在Html页面上展现具有层次结构的数据项. 目前市场上常见的JavaScript框架及组件库中均包含自己的树形控件,例如jQuery.Dojo.YUI.Ext JS等,还有一些独立的树形控件,例如dhtmlxTree等,这些树形控件完美的解决了层次数据的展示问题. 展示离不开数据,树形控件主要

dTree的简单使用

先简单做一个dTree使用的简单范例,动态生成树将和dwr一起做演示 1.引入所要的样式和js <link rel="stylesheet" type="text/css" href="css/dtree.css"> <script type="text/javascript" src="js/dtree.js"></script> 2.在body中加入如下代码 <

利用多叉树实现Ext JS中的无限级树形菜单(一种构建多级有序树形结构JSON的方法)

一.问题研究的背景和意义 目前在Web应用程序开发领域,Ext JS框架已经逐渐被广泛使用,它是富客户端开发中出类拔萃的框架之一.在Ext的UI控件中,树形控件无疑是最为常用的控件之一,它用来实现树形结构的菜单.TreeNode用来实现静态的树形菜单,AsyncTreeNode用来实现动态的异步加载树形菜单,后者最为常用,它通过接收服务器端返回来的JSON格式的数据,动态生成树形菜单节点.动态生成树有两种思路:一种是一次性生成全部树节点,另一种是逐级加载树节点(利用AJAX,每次点击节点时查询下

jquery中$each()

$.each():可用于遍历任何的集合(无论是数组或对象) $(selector).each():专用于jquery对象的遍历, 如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this 关键字获取,但javascript总会包装this 值作为一个对象-尽管是一个字符串或是一个数字),方法会返回被遍历对象的第一参数. each的几种常用的用法 ①一维数组:var arr1 = [ "aaa", "bbb", "ccc" ]; $.

【JSTREE】动态加载子节点

js中初始化jstree $('#contact-org').jstree({ "data" : { "dataType": 'json', "url":function(node){ return ctxPath + "/v-contact?queryOrg"; }, "data":function(node){ return {"id" : node.id}; } } } } 返回的

jstree插件的使用(进阶)——动态json数据创建树

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- jstree css样式 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/lib

利用jstree插件轻松构建树应用

利用jstree插件轻松构建树应用 最近完成了项目中的一个树状应用,第一次接触了jstree这个插件,总的来说它的官方文档还是比较详细的,但是在使用过程中还是出现了一些问题,下面我就来谈谈这款插件的使用和心得. 首先项目需要构建一棵树,利用jstree插件我们先在页面上静态的把这棵树渲染出来,参照官方文档(http://www.jstree.com/),代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head&g