使用zTree插件构建树形菜单

zTree下载:https://github.com/zTree/zTree_v3

目录:

就我看来,zTree较为实用的有以下几点:

  • zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
  • 支持 JSON 数据
  • 支持静态 和 Ajax 异步加载节点数据
  • 支持任意更换皮肤 / 自定义图标
  • 支持极其灵活的 checkbox 或 radio 选择功能
  • 提供多种事件响应回调
  • 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟
  • 在一个页面内可同时生成多个 Tree 实例
  • 简单的参数配置实现 灵活多变的功能

zTree入门几个要点(引入& 声明className & 具体的多看api)

<!DOCTYPE html>
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
  <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css"> <!--引入ztree样式-->
  <script type="text/javascript" src="jquery-1.4.2.js"></script>  <!--要首先引入jquery文件-->
  <script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>
  <SCRIPT LANGUAGE="JavaScript">
   var zTreeObj;

   // zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
   var setting = {};

   // zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
   var zNodes = [
   {name:"test1", open:true, children:[
      {name:"test1_1"}, {name:"test1_2"}]},
   {name:"test2", open:true, children:[
      {name:"test2_1"}, {name:"test2_2"}]}
   ];

   //页面加载完成后,加载json数据,进行初始化
   $(document).ready(function(){
      zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
   });
  </SCRIPT>
 </HEAD>
<BODY>
<div>
   <ul id="treeDemo" class="ztree"></ul>   <!--className要设置为ztree,  class="ztree"-->
</div>
</BODY>
</HTML>

以构建页面左侧树形菜单为例介绍ztree插件的使用

1. 引入ztree的相关文件

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

这里引入包含ztree所有功能的js文件,实际使用中可根据需要来引用,以节省资源

2. 使用json数据构造ztree

  2.1 使用标准json数据构造ztree(看看就行,不推荐)

<!-- 展示树形菜单 :使用标准json数据构造-->
<ul id="ztree1" class="ztree"></ul>
<script type="text/javascript">
    $(function(){
        //当页面加载完成后,动态创建ztree菜单
        var setting = {};//设置ztree相关的属性
        //构造json数据
        var zNodes = [
                      {name:‘系统管理‘},//每个json对象对应一个节点数据
                      {name:‘用户管理‘,children:[
                                                 {name:‘用户添加‘},
                                                 {name:‘用户修改‘}
                                             ]},//每个json对象对应一个节点数据
                      {name:‘权限管理‘}//每个json对象对应一个节点数据
                      ];
        //创建ztree
        $.fn.zTree.init($("#ztree1"),setting,zNodes);
    });
</script>

  2.2 使用简单json构造ztree(推荐)

<!-- 展示树形菜单 :使用简单json数据构造-->
<ul id="ztree2" class="ztree"></ul>
<script type="text/javascript">
    $(function(){
        //当页面加载完成后,动态创建ztree菜单
        var setting2 = {
                    data: {
                            simpleData: {
                                enable: true//启用简单json数据描述节点数据
                            }
                    }
                };//设置ztree相关的属性
        //构造json数据
        var zNodes2 = [
                      {id:‘1‘,pId:‘0‘,name:‘系统管理‘},//每个json对象对应一个节点数据
                      {id:‘2‘,pId:‘0‘,name:‘用户管理‘},//每个json对象对应一个节点数据
                      {id:‘21‘,pId:‘2‘,name:‘用户添加‘},//每个json对象对应一个节点数据(二级)
                      {id:‘22‘,pId:‘2‘,name:‘用户修改‘},//每个json对象对应一个节点数据(二级)
                      {id:‘3‘,pId:‘0‘,name:‘权限管理‘}//每个json对象对应一个节点数据
                      ];
        //创建ztree
        $.fn.zTree.init($("#ztree2"),setting2,zNodes2);
    });
</script>

树形菜单效果如下:

  

  2.3 实际项目开发中,为便于维护,数据会单独存放在一个json文件中,这时需要发送ajax请求获取菜单数据构造ztree

<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
    $(function(){
        var setting3 = {
                data : {
                    simpleData : {
                        enable : true
                    //启用简单json数据描述节点数据
                    }
                }
            };//设置ztree相关的属性
        //发送ajax请求获取json数据构造ztree
        var url = "${pageContext.request.contextPath}/json/menu.json";
        $.post(url,{},function(data){
            //创建ztree
            $.fn.zTree.init($("#ztree3"), setting3, data);
        },‘json‘);
    });
</script>

menu.json

[
        { "id":"11", "pId":"0", "name":"基础数据"},
        { "id":"112", "pId":"11", "name":"取派员设置", "page":"page_base_staff.action"},
        { "id":"113", "pId":"11", "name":"区域设置","page":"page_base_region.action"},
        { "id":"114", "pId":"11", "name":"管理分区", "page":"page_base_subarea.action"},
        { "id":"115", "pId":"11", "name":"管理定区/调度排班","page":"page_base_decidedzone.action"},
        { "id":"12", "pId":"0", "name":"受理"},
        { "id":"121", "pId":"12", "name":"业务受理" ,"page":"page_qupai_noticebill_add.action"},
        { "id":"122", "pId":"12", "name":"工作单快速录入" ,"page":"page_qupai_quickworkorder.action"},
        { "id":"124", "pId":"12", "name":"工作单导入" ,"page":"page_qupai_workorderimport.action"},
        { "id":"13", "pId":"0", "name":"调度"},
        { "id":"131", "pId":"13", "name":"查台转单","page":""},
        { "id":"132", "pId":"13", "name":"人工调度","page":"page_qupai_diaodu.action"}
]

树形菜单效果如下:

  

3. 为ztree节点绑定事件,使得点击节点时打开相关的选项卡

<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
    $(function(){
        var setting3 = {
                data : {
                    simpleData : {
                        enable : true
                    //启用简单json数据描述节点数据
                    }
                },
                callback: {//绑定事件
                    onClick: function(a,b,treeNode){
                        var page = treeNode.page;
                        if(page != undefined){//需要打开选项卡
                            //判断当前选项卡是否已经打开
                            var e = $("#tt").tabs("exists",treeNode.name);
                            if(e){
                                //已经打开
                                $("#tt").tabs("select",treeNode.name);
                            }else{
                                $("#tt")
                                .tabs(
                                        "add",
                                        {
                                            title : treeNode.name,
                                            content : ‘<iframe frameborder="0" width="100%" height="100%" src="‘+page+‘"></iframe>‘,
                                            closable : true,
                                            iconCls : ‘icon-edit‘
                                        });
                            }
                        }
                    }
                }
            };//设置ztree相关的属性
        //发送ajax请求获取json数据构造ztree
        var url = "${pageContext.request.contextPath}/json/menu.json";
        $.post(url,{},function(data){
            //创建ztree
            $.fn.zTree.init($("#ztree3"), setting3, data);
        },‘json‘);
    });
</script>

效果:

时间: 2024-10-08 06:18:23

使用zTree插件构建树形菜单的相关文章

Java构建树形菜单

构建树形菜单 效果图:支持多级菜单. 菜单实体类: public class Menu { // 菜单id private String id; // 菜单名称 private String name; // 父菜单id private String parentId; // 菜单url private String url; // 菜单图标 private String icon; // 菜单顺序 private int order; // 子菜单 private List<Menu> ch

ExtJS4.2 根据数据库记录构建树形菜单

背景:最近用ExtJS4.2做一个系统,需要在前端展示资源菜单,为树形结构,该树形结构是从数据库动态加载的. ExtJS的树形结构大致有两种情况: 1.静态树形结构,此处不多说,看API就能简单明白: 2.动态加载,ExtJS的特性是根据父节点ID来查询子节点,从而动态更新树形菜单,这里有一个缺陷,或许是我孤陋寡闻不知道,那就是无法根据数据库节点信息自动构建成为一棵树,记得zTree插件就有这个功能. 那么,我希望能够根据数据库树节点信息自动的构建成一棵树,就需要自己去写个小算法在后台拼接成Ex

构建树形菜单数据

菜单实体: @Data public class SysMenu { /** * 菜单编码 */ @ApiModelProperty(value="菜单编码",name="rowId",example="菜单编码") private String rowId; /** * 菜单名称 */ @ApiModelProperty(value="菜单名称",name="name",example="菜单名

EasyUI+zTree实现简单的树形菜单切换

使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--导入juery核心配置文件--> <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <!--导入eas

[JavaScritp]构建简单的json树形菜单

json结构: var Menu = [{ tit:"一级菜单", submenu:[{ tit:"二级菜单", url:"", func:function(){ alert('what do you want to do?'); } },{ tit:"二级菜单", func:function(){ alert('do what?'); }, submenu:[{ tit:"三级菜单", url:"

ExtJs Treepanel刷新树形菜单

在之前的一次项目开发学习过程中,我需要实现一个功能,就是点击导航栏的链接后左侧树形菜单自动生成对应的菜单项.当时这个问题困扰了我很长一段时间. 后来,在看了ExtJs官方的文档及Demo后一下恍然大悟. 我们来认真分析一下要实现这个功能就是让树形菜单整个刷新. 首先来看看官方的Demo里面是怎么写的: 后台Default.aspx.cs文件中的关键代码:    [DirectMethod]     public string RefreshMenu()     {         Ext.Net

jQuery树形菜单,使用zTree插件,异步加载 &amp; 编辑功能&amp;Check 共存

一.下载zTree插件 地址:http://www.ztree.me 二.HTML代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="zTree.aspx.cs" Inherits="CssStudyWeb.zTree" %> <!DOCTYPE html> <html xmlns="http://www.w3.org

SpringMVC+ZTree实现树形菜单权限配置

计划在开源项目里加入权限配置的功能,打算加入zTree实现树形结构. Team的Github开源项目链接:https://github.com/u014427391/jeeplatform 欢迎star(收藏) zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree下载链接:http://www.treejs.cn/v3/main.php#_zTreeInfo 角色信息实体类: package org

zTree 从数据库中动态加载树形菜单

这几天做动态菜单用到了这个插件,目前用的很广泛的一个开源框架,最新发布的QUI框架就是用这个插件开发的菜单部分,因此还是很值得深入研究和学习,通过使用感觉功能很丰富,好多函数不用自己开发和编写,官网上有很详尽的API可以参考,用着算顺手但学习使用的过程中也遇到了一些困难,听过反复测试和查资料都理解了,但也在思考一个问题,怎么样才能使得最快的时间从接触一个新东西到灵活掌握的程度? 这个不仅仅是一个树形结构的菜单,每个节点左边可以有一个复选框,看了看也挺简单的,只需要在setting里面配置一个ch