`
zlchen_129
  • 浏览: 3247 次
社区版块
存档分类
最新评论

使用Ztree插件在前端生成树

阅读更多
使用Ztree插件在前端生成树的简单步骤


1.下载zTee,页面引入jquery.js,根据功能需求添加zTree相应的js和css (下载地址:https://github.com/zTree/zTree_v3

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="js/jquery.ztree.exedit-3.5.js"></script>
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">

2.<div  id="EvaluationDemo" class="ztree"></div>

3. 配置zTree

var setting = {
        callback: {
            onClick: zTreeOnClick  //点击事件
        },
        view: {
            showLine: false,
            fontCss: getFontCss //个性化文字样式,只针对 zTree 在节点上显示的<A>对象。
        },
        data: {
            key: {
                name: "_name"
            },
            simpleData: {
                enable: true,
                pIdKey: "_parent_keyid",
                idKey: "_keyid"//json串中节点ID的KEY
            }
        },
        async: {
            enable: true  //设置 zTree 是否开启异步加载模式 默认值: false
        },
        dblClickExpand: true  //双击节点时,是否自动展开父节点的标识  默认值: true
    };

var TotalTreeNode={ }; //json数据

4.初始化树要显示的地方

var  zTreeObj = $.fn.zTree.init($("#EvaluationDemo"), setting, TotalTreeNode);
分享到:
评论

相关推荐

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

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

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

    这里我们关注的是使用jQuery-zTree插件在前端实现动态树,结合Struts2和Spring后端框架来从数据库获取并处理数据,以及如何通过Spring集成Quartz进行定时任务调度。 首先,jQuery-zTree是一个强大的JavaScript库,...

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

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

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

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

    ztree插件前台和后台数据交互

    《ZTree插件在前后台数据交互中的应用与实践》 ZTree是一款基于jQuery的树形插件,广泛应用于各种管理系统的目录结构展示、权限控制、数据操作等场景。它以其丰富的API接口、灵活的配置选项和良好的用户体验,赢得...

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

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

    zTree后台组装树结构java代码

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

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

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

    使用ztree构建树形菜单,需要引入的js及样式文件

    通过`$.fn.zTree.init()`方法将数据和配置项传入,ZTree会自动解析并生成树形菜单。 总的来说,使用ZTree构建树形菜单需要理解其核心JS库、扩展功能库和样式文件的作用,并结合ZTree的API和数据格式来实现具体的...

    zTree_树形插件源码,完整实例

    总的来说,zTree_树形插件源码及完整实例是一个宝贵的参考资料,不仅有助于开发者快速搭建树形界面,也能帮助深入学习JavaScript和前端开发技术。通过阅读源码,你可以理解插件的设计模式,学习如何优化性能,以及...

    zTree实现多选下拉框

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

    layui ztree 下拉树代码

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

    jquery ztree 从后台action加载树节点

    jQuery ZTree插件是一种广泛使用的JavaScript插件,用于在网页上创建复杂的树结构。本文将详细介绍如何使用jQuery ZTree结合Ajax技术从后台Action获取JSON格式的数据并将其展示成树形结构。 #### 技术栈介绍 1. **...

    zTree 权限树

    4. **数据加载**:将后端返回的JSON数据传递给zTree的`setting.data.simple.data`或`setting.data.key.children`属性,以便zTree解析并生成树形结构。 5. **交互处理**:通过监听zTree的事件,如`onClick`、`onCheck...

    基于Ztree实现动态生成Json

    4. **动态更新**:如果你需要在运行时动态生成或更新JSON数据,可以使用ZTree提供的API,如`updateNode()`、`removeNode()`等,来实现对树结构的动态操作。 5. **事件监听**:ZTree提供了丰富的事件机制,如`...

    JQuery zTree v3.4 ztree

    JQuery zTree 是一个基于 jQuery 的插件,用于在网页中构建交互式的树形结构。v3.4 版本是其稳定且功能丰富的版本之一,适用于多种应用场景,如数据展示、导航菜单、文件目录等。它以其易用性、高效性和强大的功能...

    前台树结构生成(ztree例子)

    ZTree是一个流行的JavaScript插件,专门用于创建这样的树状视图,它提供了丰富的功能和高度的可定制性。 首先,我们来看“生成树结构”这一核心概念。树结构是由节点组成的图形结构,每个节点可以有零个或多个子...

    zTree v3.5.15.zip

    Delphi的WebBroker或FireMonkey框架可以方便地与JavaScript进行交互,将服务器端的数据传递给前端,生成动态的zTree实例。 例如,你可以通过创建XML数据来表示树节点,然后使用zTree的`$.fn.zTree.init()`方法初始...

Global site tag (gtag.js) - Google Analytics