用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. native2ascii 使用说明

    native2ascii.exe 是Java的一个文件转码工具,是将特殊各异的内容转为用指定的编码标准文体形式统一的表现出来,它通常位于JDK_home\bin目录下,安装好Java SE后,可在命令 ...

  2. Android上传文件至服务器(上)

    每一次都不能上首页,真悲催..管理员让我上一次首页? 很多时候我更愿意一个人写代码,与其在垃圾代码上改改改,我更愿意直接重构. 整洁的代码简单直接.整洁的代码如同优美的散文.整洁的代码从不隐藏设计者的 ...

  3. Function.prototype.call 和 Function.prototype.apply 的区别

    call和apply函数是function函数的基本属性,都可以用于更改函数对象和传递参数,是前端工程师常用的函数.具体使用方法请参考以下案列: 例如: 申明函数: var fn = function ...

  4. mysql unrecognized service问题解决

      在centos下用yum install mysql 安装完后,却发现用service mysqld start无法开启 出现mysqld:unrecognized service,网上别人说用/ ...

  5. 多点触摸(MT)协议（翻译）

    参考: http://www.kernel.org/doc/Documentation/input/multi-touch-protocol.txt 转自:http://www.arm9home.ne ...

  6. 使用GDB调试程序

    GDB(GNU Debuger)是Linux中的一个功能强大的调试器.GDB可以让你查看程序的内部结构,打印变量值,设置断点,单步调试源码,运行时修改变量值,路径跟踪,线程切换,显示汇编代码等. 编译 ...

  7. java http工具类和HttpUrlConnection上传文件分析

    利用java中的HttpUrlConnection上传文件,我们其实只要知道Http协议上传文件的标准格式.那么就可以用任何一门语言来模拟浏览器上传文件.下面有几篇文章从http协议入手介绍了java ...

  8. Maven设置代理服务器

    在setting.xml中设置以下信息即可,请修正对应信息 <proxies> <proxy> <id>optional</id> <active ...

  9. 一道算法题目, 二行代码, Binary Tree

    June 8, 2015 我最喜欢的一道算法题目, 二行代码. 编程序需要很强的逻辑思维, 多问几个为什么, 可不可以简化．想一想, 二行代码, 五分钟就可以搞定; 2015年网上大家热议的 Home ...

  10. 【2016-11-7】【坚持学习】【Day22】【工作流引擎设计--执行用户】

    最近在做一个工作流引擎,架构师已经设计好了,但是我发现他设计 每一步的用户集合的设计,有一定的不足,或者是不方便,不同的组织架构影响着他的用户数据源配置方式. 于是我想花点时间去看看人家优秀是工作流引 ...