用zTree简单实现从后台传数据生成树

1.在jsp上引入js,jsp的head完整的部分

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<%@ taglib prefix="yesurl" uri="http://www.springframework.org/tags"%>

<yesurl:url value="/" var="path" />

<!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">

<title>Insert title here</title>

<link rel="stylesheet" href="${path}css/zTreeStyle/zTreeStyle.css"

    type="text/css">

<script type="text/javascript" src="${path}js/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="${path}js/jquery.ztree.core-3.5.js"></script>

<script type="text/javascript" src="${path}js/createTree.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    var zNodes =<%=request.getAttribute("tree") %> ;

    createTree(zNodes);

});

</script>

</head>

jsp加载完自动加载树

2.createTree.js自己添加的,用来生成树,具体代码为:

/**

 * 建立树并提供点击响应

 */

function onclick(event, treeId, treeNode, clickFlag) {

    alert("treeid:" + treeId + ";treeNode.id:" + treeNode.id

            + ";treeNode.name:" + treeNode.name + ";treeNode.pId:"

            + treeNode.pId);

};

var setting = {

    callback : {

        onClick : onclick

    },

    data : {

        simpleData : {

            enable : true,

            idKey : "id",

            pIdKey : "pId",

            rootPId : 0

        }

    }

};

function createTree(zNodes) {

    $.fn.zTree.init($("#tree"), setting, zNodes);

};

启用simpleData方便后台形成格式.节点需要由后台提供,会在id为"tree"的标签的地方生成树

3.jsp的body部分:

<body>

            <div id="tree" class="ztree"></div>

</body>

4.后台部分,可以利用数据库的查询结果组合成节点信息的String,再用List<String>传到前台,前后台传输这里用的是SpringMVC.

后台tree.java的完整内容为:

package action;

import java.util.ArrayList;

import java.util.List;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

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

@Controller

public class Tree {

    @RequestMapping(value = "tree.do")

    public String getTree(Model model) {

        List<String> lstTree = getNodes();

        model.addAttribute("tree", lstTree);

        System.out.println("ok");

        return "tree";

    }

    private List<String> getNodes() {

        List<String> lstTree = new ArrayList<String>();

        for (int x = 0; x < 4; x++) {

            String n = "test" + x;

            String s = getTreeNodeFormat(x, 0, n, true);

            lstTree.add(s);

        }

        return lstTree;

    }

    private String getTreeNodeFormat(int id, int pId, String name, boolean open) {

        String s = "{id:" + id + ", pId:" + pId + ", name:\"" + name + "\" , open:" + open + "}";

        return s;

    }

}

效果如图:

zTree简单实现的更多相关文章

  1. zTree简单使用和代码结构

    1.页面使用元素代码 <input type="text" id="key" class="Side_Toput2" name=&qu ...

  2. zTree简单使用

    zTree使用 zTree github地址 zTree API文档 zTree插件依赖JQ所以使用zTree首先引入JQ,另外zTree的点击功能,编辑功能都是单独的文件,如需使用也要引入(也可以引 ...

  3. ZTree简单粗暴快速使用

    是什么:功能强大的树形插件 tip:查资料时痛苦的地方,自我改进 1.没有注明版本:版本不对应导致配置完成后各种无端的错误,特别难查找,运气好能找到英文的解答 2.没有写明配置文件,或者不指明配置文件 ...

  4. zTree使用技巧与详解

    zTree--Jquery 树插件,是在后台管理页面中常使用到的插件. 使用效果图: 核心代码: zTree配置: var setting = { data:{simpleData:{enable:t ...

  5. 项目一:第一天 1、项目概述 2、环境搭建（重点） 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

    1.项目环境 注:添加jar包直接在common_parent里面添加. 搭建数据库 create tablespace bos317space datafile 'c:\ bos317.dbf'   ...

  6. ztree多种数据包装以及相关设置

    首先来一个完整的ztree代码 html代码 <form id="addTreeDataFrm" method="post" class="fo ...

  7. BOS物流管理系统-第一天

    BOS物流管理系统-第一天-系统分析.环境搭建.前端框架 BoBo老师 整体项目内容目标: 对项目概述的一些理解 亮点技术的学习 注意学习方式:优先完成当天代码. 其他内容. 最终: 学到新的技术,会 ...

  8. zTree入门-最简单的树

    最近发现项目中很多地方都是树形菜单,而这些树形菜单都是使用树形插件zTree来制作的,所以就想自学一下zTree,参照官方文档写了一个简单的案例,使用zTree做了 一个最简单的树形结构. 案例:zT ...

  9. 简单Ztree的实现————不连接数据库版

    Ztree可以去官网去下载相应的版本和API,我这里就简单的介绍下它的实现以及因为Ztree的小例子印发的Js问题,稍后我会在博客中写JS的异步问题, 我这里用的是MVC4.0,好了正文开始,上代码 ...

随机推荐

  1. ORACLE 9i 数据库体系结构图

    ORACLE 9i 的数据库体系结构图,非常的全面.系统.高屋建瓴的整体介绍了ORACLE 9i 的数据库体系结构.如果能全面了解.清晰梳理.深入掌握这些知识点,相信对你了解学习.深入研究ORACLE ...

  2. -bash: ulimit: pipe size: cannot modify limit: Invalid argument

    从root账号切换到oracle账号时,出现了"-bash: ulimit: pipe size: cannot modify limit: Invalid argument"提示 ...

  3. webapi 控制器接收POST参数时必须以对象的方式接收

    webapi    控制器接收POST参数时必须以对象的方式接收

  4. Redis 使用说明 安装配置 主从复制

        开机加自启动: echo "redis-server /etc/redis.conf" >>/etc/rc.local    以前有想过用 Memcache 实 ...

  5. 编程中Foo, Bar 到底什么意思？

    1 前言 在很多国外计算机书本和一些第三份开源软件的Demo中经常用到两个英文单词Foo,Bar.这到底是什么意思呢?从步入屌丝界的IT生活见到这两个单词到现在我还是不知道这两个单词的真正含义,今天有 ...

  6. Android开机启动程序

    android程序实现开机启动的原理,简单点说就是做一个广播接收器,接收到开机广播时就启动activity或service或执行其它操作.Android系统在启动的时候会发出一个开机广播,内容为ACT ...

  7. 修复Grub引导

    1.运行终端,输入命令: sudo fdisk -l 找到linux所在的盘符,例如/dev/sdaX 2.获取root权限 3.mount mount –bind /proc /mnt/proc m ...

  8. 4412开发板学习笔记-NFS服务器的搭建

    转自iTOP-4412讨论群: http://www.topeetboard.com 先来介绍一下NFS: NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件 ...

  9. 安卓直播开源: RTMP 推流SDK

    前些日子在github上提交了基于GPUImage的IOS直播推流SDK(https://github.com/runner365/GPUImageRtmpPush) 最近整理了android直播推流 ...

  10. 详解Linux命令行下常用svn命令

    1.Linux命令行下将文件checkout到本地目录 svn checkout path(path是服务器上的目录) 例如:svn checkout svn://192.168.1.1/pro/do ...