用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外部表总结

    外部表介绍 ORACLE外部表用来存取数据库以外的文本文件(Text File)或ORACLE专属格式文件.因此,建立外部表时不会产生段.区.数据块等存储结构,只有与表相关的定义放在数据字典中.外部表 ...

  2. Symantec Backup Exec 2012 Agent for Linux 卸载

    本文介绍一下如何卸载Symantec Backup Exec 2012 Agent for Linx.首先我们来看看Symantec_Backup_Exec2012管理员手册的文档介绍: 卸载 Age ...

  3. 在Ubuntu上单机安装Hadoop

    最近大数据比较火,所以也想学习一下,所以在虚拟机安装Ubuntu Server,然后安装Hadoop. 以下是安装步骤: 1. 安装Java 如果是新机器,默认没有安装java,运行java –ver ...

  4. .NET应用架构设计—面向对象分析与设计四色原型模式（彩色建模、领域无关模型）（概念版）

    阅读目录: 1.背景介绍 2.问自己,UML对你来说有意义吗?它帮助过你对系统进行分析.建模吗? 3.一直以来其实我们被一个缝隙隔开了,使我们对OOAD遥不可及 4.四色原型模式填补这个历史缝隙,让我 ...

  5. css3【语法要点】

    语法要点 display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display ...

  6. 一则uiautomation错误处理

    一款iphone程序,用到了多window,结果在最后一个window里设置textfield时出错 target.frontMostApp().mainWindow().textFields()[0 ...

  7. 崔用志-微信开发-java版本

    崔用志-微信开发-java版本 今天看到一些关于微信开发的知识蛮好的博客,分享给大家,希望对大家有帮助. 微信开发准备(一)--Maven仓库管理新建WEB项目 微信开发准备(二)--springmv ...

  8. 【转】理解Java Integer的缓存策略

    本文将介绍 Java 中 Integer 缓存的相关知识.这是 Java 5 中引入的一个有助于节省内存.提高性能的特性.首先看一个使用 Integer 的示例代码,展示了 Integer 的缓存行为 ...

  9. C++ 重载、重写、重定义

    出自:http://blog.163.com/clevertanglei900@126/blog/ 1 成员函数重载特征: a 相同的范围(在同一个类中) b 函数名字相同 c 参数不同 d virt ...

  10. JavaScript 动态插入 CSS

    写组件时有时想把一些组件特性相关的 CSS 样式封装在 JS 里,这样更内聚,改起来方便.JS 动态插入 CSS 两个步骤就可以 创建一个 style 对象 使用 stylesheet 的 inser ...