`

zTree生成动态树

阅读更多

环境搭建:需要jquery 1.4+,jquery.ztree.core-3.1.min.js,ztree自带的css文件和图片,并且css文件和图片文件夹要处于同一目录(很重要),否则动态树无法正常显示。

数据库的设计:CREATE TABLE `function` (

               `id` int(4) NOT NULL AUTO_INCREMENT,
               `pid` int(4) DEFAULT NULL,
               `name` varchar(20) NOT NULL,
               `url` varchar(50) DEFAULT NULL,
               `title` varchar(50) DEFAULT NULL,
                `target` varchar(50) DEFAULT NULL,
               `icon` varchar(50) NOT NULL,
               `icon_open` varchar(50) DEFAULT NULL,
              `open` varchar(1) DEFAULT NULL COMMENT '0:close  1:open',
                PRIMARY KEY (`id`)
             ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;

jsp页面:
    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!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">
<link rel="stylesheet" href="<%=path %>/static_resources/css/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=path %>/static_resources/javascript/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<%=path %>/static_resources/javascript/jquery.ztree.core-3.1.min.js"></script>
<script type="text/javascript">
 
 
 
    var setting = {
    async: {
    contentType : "application/json",
    enable : true,
    dataType : "json",
    type : "post",
    url : "<%=path%>/getUserFunction",
    dataFilter: null
    },
    data: { 
    simpleData: { 
    enable: true,
    idKey: "id", 
    pIdKey: "pId",
    rootPId: 0 //根节点
    } 
    }
    };
$(function(){
$.fn.zTree.init($("#treeDemo"), setting);
});
</script>
 
<title>DTree Demo</title>
</head>
<body>
<ul id="treeDemo" class="ztree"></ul>
</body>
</html>

 

分享到:
评论

相关推荐

    ztree动态树示例

    ztree树做的一个小项目,用的mysql数据库,里面有数据库脚本,部署启动就能OK,http://localhost:8080/ztree 访问路径

    Ztree生成树

    在给定的“Ztree生成树”主题中,我们可以深入探讨Ztree的核心功能、如何使用JSON数据生成树、以及在实际项目中的应用。 首先,Ztree的亮点在于其灵活性和可定制性。通过配置不同的参数和CSS样式,开发者可以调整树...

    ztree.rar 树生成案例

    在“ztree.rar 树生成案例”中,我们可以深入学习如何利用 `zTree` 实现动态、交互式的树形界面。 `zTree` 具有以下主要特性: 1. **轻量级**:`zTree` 的源码体积小巧,易于引入项目,减少加载时间。 2. **高度可...

    struts2.0+ztree+jquery动态生成树结构

    在提供的两个文件"struts+ztree+jquery动态生成树结构1.txt"和"struts+ztree+jquery动态生成树结构2.txt"中,很可能是分别展示了这两种方法的具体实现细节,包括Action的代码示例、前端的jQuery代码和ZTree的配置。...

    zTree后台组装树结构java代码

    6. **递归算法生成树**: - 为了组装树结构,我们可以用递归方法,将结果集中的每个记录作为根节点或子节点,依据`parent_id`查找其父节点。 - 每次递归调用,都会将当前节点添加到其父节点的子节点列表中,直到...

    基于Ztree实现动态生成Json

    ZTree,一个基于JavaScript的树形控件,提供了丰富的功能,包括动态生成JSON,这对于构建交互式的、数据驱动的用户界面尤其有用。在这里,我们将深入探讨如何使用ZTree实现动态生成JSON以及相关的技术细节。 首先,...

    ztree实现左右两棵树的节点移动

    在IT领域,特别是前端开发中,ZTree是一款广泛使用的JavaScript组件,它主要用于构建可操作的树形结构。本文将深入探讨如何使用ZTree实现左右两棵树之间的节点移动,包括节点的添加、删除以及同步更新的操作。 首先...

    动态生成树 在数据库里配置数据,在前端显示树 jquery-ztree

    动态生成树技术在现代Web应用中广泛用于展示层次结构数据,如组织结构、文件系统或导航菜单等。这里我们关注的是使用jQuery-zTree插件在前端实现动态树,结合Struts2和Spring后端框架来从数据库获取并处理数据,以及...

    ztree 结合vs2010+sql2008 生成动态树

    在本项目中,ZTree被用于前端,以展示由后台数据库生成的树形数据。 接下来,Visual Studio 2010作为微软的旗舰级开发环境,支持.NET Framework 4.0,为开发者提供了全面的开发工具和框架支持。在本案例中,VS2010...

    Ztree+treeTable实现 Java实现 树形菜单 树形表格

    在Java项目中,我们通常会结合后台服务(如Spring MVC或Servlet)来动态生成Ztree的数据源,然后通过Ajax请求传递到前端进行渲染。 1. **Ztree的配置与使用**: Ztree的配置主要涉及JSON数据格式和HTML结构。你...

    asp.net mvc4 ztree 连接数据库 动态生成菜单简单demo

    在这个“asp.net mvc4 ztree 连接数据库 动态生成菜单简单demo”中,我们将探讨如何利用ASP.NET MVC4的技术特性结合ZTree,一个流行的JavaScript树状视图插件,来动态生成菜单,同时连接到数据库获取数据。...

    一个SSM写的权限管理系统,RBAC权限模型,zTree刷权限树,动态生成权限菜单.zip

    一个SSM写的权限管理系统,RBAC权限模型,zTree刷权限树,动态生成权限菜单

    ztree实现左边动态生成树右边为内容详情功能

    zTree是一个基于jQuery实现的树形组件,广泛应用于网页中动态生成树形结构的场景。它可以一次性静态生成树形结构,也可以通过Ajax异步加载数据动态生成。zTree提供了丰富的事件和操作接口,使得开发者可以轻松控制...

    简单zTree树形,支持单选、多选、移动实例

    在描述中提到的“简单树形菜单”是指zTree能够快速生成具有层级关系的菜单结构,这对于网站或应用程序的导航系统特别有用。 "CheckBox"和"Radio"是zTree中两种重要的选择机制。CheckBox允许用户进行多选操作,用户...

    完整ajax生成树实例,生成静态树动态树!!

    标题中的“完整ajax生成树实例”指的是一个使用Ajax技术实现的动态树形结构展示系统,它允许用户在不刷新整个页面的情况下更新树形结构。这种技术可以提高用户体验,因为页面的其他部分不会受到操作的影响,只有树状...

    layui ztree 下拉树代码

    在layui中,通常我们使用layui的`form`模块来处理表单元素,而ztree则负责生成树结构。以下是一个基本的示例: ```javascript layui.use(['form', 'element'], function () { var form = layui.form, $ = layui.$...

    ztree二级树菜单(SSI框架下)--hulian平台二版代码

    综合以上信息,"ztree二级树菜单"的实现涉及到前端的zTree库与后端的SSI框架的结合,以及Action和JSP的协同工作,以实现动态加载和交互操作。在hulian平台中,这样的设计可以提高用户对层级结构数据的管理和操作效率...

    zTree实现多选下拉框

    zTree是一款强大的树形插件,广泛应用于网页中展示层次结构数据,如组织结构、文件目录等。本文将详细介绍如何借助zTree实现这一功能,并深入探讨相关技术点。 首先,理解zTree的基本概念和使用方法是关键。zTree的...

Global site tag (gtag.js) - Google Analytics