用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. wireshark 实用过滤表达式（针对ip、协议、端口、长度和内容）

    首先说几个最常用的关键字,"eq" 和 "=="等同,可以使用 "and" 表示并且,"or"表示或者."!& ...

  2. MVC学习系列2--向Action方法传递参数

    首先,新建一个web项目,新建一个Home控制器,默认的代码如下: public class HomeController : Controller { // GET: Home public Act ...

  3. MySQL更改数据库数据存储目录

    MySQL数据库默认的数据库文件位于/var/lib/mysql下,有时候由于存储规划等原因,需要更改MySQL数据库的数据存储目录.下文总结整理了实践过程的操作步骤. 1:确认MySQL数据库存储目 ...

  4. Linux rm删除大批量文件

    在使用rm删除大批量文件时,有可能会遭遇"参数列太长"(Argument list too long)的问题.如下所示 [oracle@DB-Server bdump]$ rm - ...

  5. MongoDB学习笔记~数据结构与实体对象不一致时，它会怎么样？

    回到目录

  6. 搭建通过 ssh 访问的 Git 服务器

    一.Git 协议 Git 可以使用四种主要的协议来传输数据:本地传输,ssh 协议,Git 协议和 HTTP 协议. Git 使用的传输协议中最常见的就是 ssh 了.大多数环境已经支持通过 ssh ...

  7. (转)CNBLOG离线Blog发布方法

    原文章路径:http://www.cnblogs.com/liuxianan/archive/2013/04/13/3018732.html (新添了插件路径) 去年就知道有这个功能,不过没去深究总结 ...

  8. stm32 UART串口

    void USART1_IRQHandler(void) //´®¿Ú1ÖжϷþÎñ³ÌÐò { u8 Res; #ifdef OS_TICKS_PER_SEC //Èç¹ûʱÖÓ½ÚÅÄÊý¶ ...

  9. windows下OpenSSL加密证书安装步骤与使用方法

    OpenSSL加密证书一般用于签名认证,含私钥和公钥.在Linux系统中,OpenSSL一般是已经安装好了,可以直接使用.而在Windows系统中,是需要安装使用的. 最近在使用支付平台时,用到了Op ...

  10. 强制浏览器使用兼容模式，Web.config，httpProtocol

    对于一些政府类的网站,很多支持IE6~8,而不支持使用更高版本浏览器浏览.虽然有些浏览器会自动使用兼容模式,或有些人会手动调整浏览器的兼容模式,但不是每一个人.每一款浏览器都可以做到用兼容模式.所以, ...