基于zTree树形菜单的使用实例

在每个节点添加 id 和 pid， id 表示当前节点编号，pid 表示父节点编号

第一步：在页面显示菜单位置，添加 ul设置 class=”ztree”

第二步：开启简单数据格式支持

第三步：编写树形菜单数据

第四步：生成树形菜单

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>ztree树形菜单的使用</title>
  <!-- 导入jquery核心类库 -->
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <!-- 导入easyui类库 -->
  <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="../css/default.css" rel="external nofollow" >
  <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
  <!--引入ztree-->
  <script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" rel="external nofollow" />
  <script type="text/javascript">
   //页面加载后执行
   $(function() {
    //1.进行ztree树形菜单设置，开启简单json数据支持
    var setting = {
     data:{
      simpleData:{
       enable:true//开启简单json数据格式支持
      }
     }
    };
    //2.提供ztree树形菜单数据
    var zNodes = [
     {id:1,pId:0,name:"父节点一"},
     {id:2,pId:0,name:"父节点二"},
     {id:11,pId:1,name:"子节点一"},
     {id:12,pId:1,name:"子节点二"},
     {id:13,pId:2,name:"子节点三"},
     {id:14,pId:2,name:"子节点四"}
    ];
    //3.生成树形菜单
    $.fn.zTree.init($("#baseMenu"),setting,zNodes);
   });
  </script>
 </head>
 <body class="easyui-layout">
  <div data-options="region:'north',title:'你我他学习吧-学习Java的好博客！'" style="height:100px"></div>
  <div data-options="region:'west',title:'菜单导航'" style="width:200px">
   <!--折叠面板-->
   <div class="easyui-accordion" data-options="fit:true">
    <div data-options="title:'基础菜单'">
     <!--通过ztree插件，制作树形菜单-->
     <ul id="baseMenu" class="ztree"></ul>
    </div>
    <div data-options="title:'系统菜单'">你我他学习吧</div>
   </div>
  </div>
  <div data-options="region:'center',title:'中部区域'">
   <!--选项卡面板-->
   <div id="mytabs" class="easyui-tabs" data-options="fit:true">
    <div data-options="title:'CSDN博客',closable:true">选项卡面板一</div>
    <div data-options="title:'博客园',closable:true">选项卡面板二</div>
   </div>
  </div>
  <div data-options="region:'east',title:'东部区域'" style="width:100px"></div>
  <div data-options="region:'south',title:'南部区域'" style="height:100px"></div>
 </body>
</html>

以上这篇基于zTree树形菜单的使用实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • zTree树形菜单交互选项卡效果的实现方法

    1. 添加自定义属性 page 2. 为 ztree 每个树形节点,添加点击事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ztree树形菜单的使用</title> <!-- 导入jquery核心类库 --> <script type="text/javascript" src="../js

  • jQuery树形控件zTree使用小结

    jQuery树形控件zTree使用小结

    0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 zTree的特点  •最新版的zTree将核心代码按照功能进行了分割,不需要的代码可以不用加载,如普通使用只需要加载核心的jquery.ztree.core-3.5.js,需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js,需要使用编辑功能加载jquery.

  • jQuery ztree实现动态树形多选菜单

    我用到的版本ztree core v3.5.24,需要引入的js,css,jquery.js,jquery.ztree.core.js,jquery.ztree.excheck.js(多选框可选),zTreeStyle.css. 需要注意的指向父节点的pId,我开始写的是pid一开始没注意,默认的是pId,当然可以pIdKey指定自定义的(未测).还有如果图片没显示肯定是没引入img图片,记得写好路径. 1.先介绍初始化加载ztree jsp <div > <ul id="tr

  • jQuery zTree加载树形菜单功能

    由于项目中需要设计树形菜单功能,于是百度找相关资料,发现zTree方面的资料不少,觉得挺不错,而且zTree官方也有API文档,介绍的非常详细,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 2.zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载 3.采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本

  • 基于zTree树形菜单的使用实例

    在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号 第一步:在页面显示菜单位置,添加 ul设置 class="ztree" 第二步:开启简单数据格式支持 第三步:编写树形菜单数据 第四步:生成树形菜单 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ztree树形菜单的使用</title> &

  • Bootstrap框架建立树形菜单(Tree)的实例代码

    这里的Tree指的是树形菜单,这篇文章通过一个实例来讲解一下,在Bootstrap框架下怎么去建立一个树形菜单. 前提:先添加Bootstrap和JQ的引用 <link rel="stylesheet" type="text/css" href="bootstrap-3.3.0-dist/dist/css/bootstrap.min.css" rel="external nofollow" > <script

  • winform树形菜单无限级分类实例

    winform树形菜单无限级分类实例

    以下实现的是一个树形菜单,每一级对应一类窗口,点击叶子节点时弹出新的窗口: 用递归和委托实现的. 第一部分功能-创建树形菜单 复制代码 代码如下: /// <summary>         /// 创建树形菜单         /// </summary>         public void AddTree(int ParentID, TreeNode pNode)         {             // 数据库名字字段             string str

  • jQuery EasyUI结合zTree树形结构制作web页面

    JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,zTree是国内的大牛们搞的一个jquery树形tree插件,感觉很好用,很强大,而且完全免费,API等做的也非常不错.推荐 easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能. 使用 easyu

  • 基于递归实现的php树形菜单代码

    本文实例讲述了基于递归实现的php树形菜单代码.分享给大家供大家参考.具体实现方法如下: 开发电子商务网站的时候,做了这个显示树形菜单的功能,用的递归实现的PHP树形菜单函数.具体代码如下: 复制代码 代码如下: public function procCategory($sid,$pid){ $return = array(); $key = 0; static $arr = array(); //分类级别参考数组 $sql =  "select cid,pcid,name from shop

  • jQuery使用zTree插件实现树形菜单和异步加载

    jQuery使用zTree插件实现树形菜单和异步加载

    本文实例讲解了jQuery使用zTree插件实现树形菜单和异步加载,并且可以进行编辑,分享给大家供大家参考,具体内容如下 效果图: 一.HTML代码 <html> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <l

  • 基于jquery实现无限级树形菜单

    基于jquery实现无限级树形菜单

    本文实例为大家分享了基于jquery实现无限级树形菜单效果,具有一定的参考价值,具体内容如下 效果图: 实现代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无限级树形菜单</title> </head> <script src="jque

  • 基于jquery实现的树形菜单效果代码

    基于jquery实现的树形菜单效果代码

    本文实例讲述了基于jquery实现的树形菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的树形菜单代码,点击菜单项可以向下滑出对应的二级菜单,效果流畅自然. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tree-style-show-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

随机推荐