<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!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" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>

<link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css">

<script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script>

</head>

<body>

    //使用标准json展示数据：[{id:1,name:'节点一',children:[{id:1,name:'节点二'},]},{}]

    <ul id="myZtree" class="ztree"></ul>

    <script type="text/javascript">

        //配置ztree属性

        var setting1 = {};//使用默认值

        //配置ztree数据

        var nodes1 = [{id:1,name:"一级菜单1",children:[{id:101,name:"二级菜单1",children:[{id:301,name:"三级菜单"}]},{id:102,name:"二级菜单2"}]},{id:2,name:"一级菜单2"}];

        //调用ztree初始化方法，给myZtree展示数据

        $.fn.zTree.init($("#myZtree"), setting1, nodes1);

    </script>

    //使用简单json展示数据：[{id:1,name:'节点一'},{id:101,name:'节点2',pId:1},{}]

    <ul id="myZtree1" class="ztree"></ul>

    <script type="text/javascript">

        //配置ztree属性

        var setting2 = {

                data: {

                        simpleData: {

                            enable: true,  //开启简单数据模式

                            idKey: "id",    //数据标识

                            pIdKey: "pId",  //父节点标识

                            rootPId: 0      //顶级节点

                        }

                    }

        };//使用默认值  开启简单数据格式模式

        //配置ztree数据

        var nodes2 = [{id:1,name:"一级菜单1",pId:2},{id:2,name:"二级菜单2",pId:3},{id:3,name:"三级菜单2",pId:0}];

        //调用ztree初始化方法，给myZtree展示数据

        $.fn.zTree.init($("#myZtree1"), setting2, nodes2);

    </script>

</body>

</html>

Jquery ztree树插件的更多相关文章

  1. JQuery Ztree 树插件配置与应用小结

    JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...

  2. Jquery ztree树插件2

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  3. easyui&8Jquery ztree树插件

    7Jquery easyui前台UI框架 开发包: 7.1Layout页面布局 将课后资料中后台系统前台页面素材导入项目中 1.导入Jquery,easyui相关js,css文件 <link r ...

  4. 基于jquery下拉列表树插件代码

    分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <table width= ...

  5. 树结构数据的展示和编辑-zTree树插件的简单使用

    最近在项目当中遇到一个需求,需要以树结构的方式展示一些数据,并可对每一个树节点做内容的编辑以及树节点的添加和删除,刚好听说有zTree这个插件可以实现这样的需求,所以在项目的这个需求完成之后,在博客里 ...

  6. 在vue中使用ztree树插件

    插件资源及api:树官网 本事例是在vue3.0+中演示,事例是实际项目中正在用的组件所以部分打了马赛克. 1.插件准备(提前准备好插件文件) 可以直接在官网下载,搭建好脚手架后将准备好的文件放在li ...

  7. 项目一:第一天 1、项目概述 2、环境搭建（重点） 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

    1.项目环境 注:添加jar包直接在common_parent里面添加. 搭建数据库 create tablespace bos317space datafile 'c:\ bos317.dbf'   ...

  8. Jquery的树插件jqxTreeGrid的使用小结

    一.引入相应的js <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" t ...

  9. Jquery的树插件jqxTreeGrid的使用小结（实现基本的增删查改操作）

    一.引入相应的js <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" t ...

随机推荐

  1. Vivo展柜灯怎样设计才吸引大量客户？

    1.vivo展柜灯计划的目标是使消耗者在无限的时空中最无效地承受信息.因而,vivo展柜灯计划便是围绕着怎样无效地进步展现活动的服从和质量停止的.除了展现环境本身的计划之外,展现对象陈列方式的计划也是 ...

  2. H3CNE实验：Comware基本命令操作

    第1步:Comware命令视图及切换操作 <H3C>system-view System View: return to User View with Ctrl+Z. [H3C]quit ...

  3. 数据库--释放mysql数据库资源

    背景 nikeodong之前做了项目的数据库主从,在全备的过程发现数据库是越来越大了:最后发现是资源不释放的问题. 目的 为了解决mysql资源不释放的问题. 步骤 1.vim /etc/my.cnf ...

  4. Hadoop启动方式

    启动方式 1.逐一启动 hdfs hadoop-daemon.sh start|stop namenode|datanode|secondrynamenode yarn yarn-daemon.sh ...

  5. JSP include HTML出现乱码 问题解决

    Problem? 当使用<jsp:include page="top.html"></jsp:include>引入html文件时, 并且jsp 和 html ...

  6. [CF373C]计算袋鼠是愉快的(Counting Kangaroos is Fun)-贪心

    Problem 计算袋鼠是愉快的 题目大意 有n只袋鼠,如果一个袋鼠体积是另一个袋鼠的两倍或以上,则小袋鼠能被大袋鼠装进袋子里,装进去后就看不到袋子里的袋鼠了,问这群袋鼠如何行动才能使得它们看着数量最 ...

  7. CJOJ 2040 【一本通】分组背包（动态规划）

    CJOJ 2040 [一本通]分组背包(动态规划) Description 一个旅行者有一个最多能用V公斤的背包,现在有n件物品,它们的重量分别是W1,W2,...,Wn,它们的价值分别为C1,C2, ...

  8. 如何生成Azure SAS Token

    在Azure PaaS服务密钥的安全性文章中,提到过客户端实际上发送的是Token,而不是密钥.那么Token是该如何生成呢? Azure相应服务的SDK其实都提供了或者内置了生成Token的方法,可 ...

  9. USB的包结构及包分类

    USB的传输总是低位在前,高位在后. USB的传输方向:从设备到主机的数据为输入:从主机到设备的数据叫做输出. 1. 包结构 以同步域开始,紧跟着一个包标识符PID(Packet Identifier ...

  10. Python学习之数据类型

    整数 Python可以处理任意大小的整数,在程序中的表示方法和数学上的写法一模一样,例如:1,100,-8080,0,等等. 用十六进制表示整数比较方便,十六进制用0x前缀和0-9,a-f表示,例如: ...