用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. 版本管理工具SVN

    此文件根据慕课网 源生活老师的教学视频总结 视频地址 http://www.imooc.com/learn/109 一．SVN下载和安装配置 服务端下载地址 https://www.visualsvn ...

  2. ORACLE编译失效对象小结

    在日常数据库维护过程中,我们会发现数据库中一些对象(包Package.存储过程Procedure.函数Function.视图View.同义词.....)会失效,呈现无效状态(INVALID).有时候需 ...

  3. winform窗体（五）——布局方式

    一.默认布局 ★可以加panel,也可以不加: ★通过鼠标拖动控件的方式,根据自己的想法布局.拖动控件的过程中,会有对齐的线,方便操作: ★也可选中要布局的控件,在工具栏中有对齐工具可供选择,也有调整 ...

  4. 解决session阻塞的问题

    简介 对于数据库运维人员来说创建session或者查询时产生问题是常规情况,下面介绍一种很有效且不借助第三方工具的方式来解决类似问题. 最近开始接触运维工作,所以自己总结一些方案便于不懂数据库的同事解 ...

  5. 使用SQL Server 扩展事件来创建死锁的时间跟踪

    我们通过SQL Server 2012图形界面来部署一个扩展事件跟踪会话.然后可以生成SQL脚本,在2008或2008 R2版本下运行类似的跟踪. 步骤1: 通过“Object Explorer”连接 ...

  6. redis 集群创建常见几个问题

    Redis配置集群遇到问题及解决方法   配置完所有主节点后,报" ERR Invalid node address specified" 由于Redis-trib.rb 对域名或 ...

  7. Linux第一天 ssh登录和软件安装详解

    Linux学习第一天 操作环境: Ubuntu 16.04 Win10系统,使用putty_V0.63 本身学习Linux就是想在服务器上使用的.实际情况,可能我很难直接到坐在服务器前,使用界面操作系 ...

  8. switch与ifelse的效率问题

    switch...case与if...else的根本区别在于,switch...case会生成一个跳转表来指示实际的case分支的地址,而这个跳转表的索引号与switch变量的值是相等的.从而,swi ...

  9. Nginx manifest 实现 HTML5 Application Cache

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  10. Python的列表推导式，字典推导式，集合推导式使用方法

    推导式分为列表推导式(list),字典推导式(dict),集合推导式(set)三种 1.列表推导式也叫列表解析式.功能:是提供一种方便的列表创建方法,所以,列表解析式返回的是一个列表格式:用中括号括起 ...