AngularJS实现树形结构(ztree)菜单示例代码


Posted in Javascript onSeptember 18, 2016

树形结构

树形结构有多种形式和实现方式,zTree可以说得上是一种比较简洁又美观的且实现起来也相对简单。zTree是一个依靠jQuery实现的多功能“树插件”。它最大的优点是配置灵活,只要id与pid的值相同就可形成一个简单的父子结构。再加上免费开源,使用zTree的人越来越多。

效果图如下

AngularJS实现树形结构(ztree)菜单示例代码

首先你需要知道AngularJS的双向数据绑定是什么才可以更好的理解下面的代码,想了很久才想出用下面的代码来实现左侧菜单树形结构

要实现上面的功能你需要操作如下步骤:

在HTML标签内添加ng-app,让AngularJS掌管整个HTML文档

<html lang="en" ng-app="myApp">

myApp是我自己创建的模块

整个菜单的标签如下

<div id="left-menu" ng-controller="Left-navigation" class="col-sm-2" style="margin-top: 50px">
  <ul>

    <!-- 仪表盘 -->
    <li>
  <!-- 让每一个一级菜单绑定一个函数navFunc,并且传入一个指定的字符串 -->
      <a href="" ng-click="navFunc('dashboard')">仪表盘</a>
    </li>

    <!-- 主机 -->
    <li>
      <span><a ng-click="navFunc('hosts')" href="">主机</a></span>
      <!-- 如果要显示二级菜单,则navAction必须等于制定的字符串,这个是自己定义的,navAction是在controller中创建的 -->
  <ul ng-show="navAction === 'hosts'">
        <li><a href="">主机</a></li>
        <li><a href="">分组</a></li>
      </ul>
    </li>

    <!-- 容器 -->
    <li>
      <a href="" ng-click="navFunc('container')">容器</a>
    </li>

    <!-- 模板 -->
    <li>
      <span><a href="" ng-click="navFunc('template')">模板</a></span>
      <ul ng-show="navAction === 'template'">
        <li><a href="">监控</a></li>
        <li><a href="">装机</a></li>
      </ul>
    </li>

    <!-- 用户 -->
    <li>
      <span><a href="" ng-click="navFunc('users')">用户</a></span>
      <ul ng-show="navAction === 'users'">
        <li><a href="">修改资料</a></li>
        <li><a href="">修改密码</a></li>
        <li><a href="">添加用户</a></li>
        <li><a href="">消息</a></li>
      </ul>
    </li>

    <!-- 配置 -->
    <li>
      <a href="" ng-click="navFunc('configuration')">配置</a>
    </li>

  </ul>
</div>

JS代码如下

// 创建myApp模块
var myApp = angular.module('myApp', [])

// 创建一个controller,名为Left-navigation
myApp.controller('Left-navigation', ['$scope', function ($scope) {
  // 定义一个函数navFunc, 接受一个参数
 $scope.navFunc = function (arg) {
 // 让navAction变量等于函数传入过来的值arg
    $scope.navAction = arg;
  };
}]);

总结

整体的思路其实就是点击一级导航的时执行一个函数,并把一级导航的名称发送给函数,然后二级导航在navAction变量等于它的上级导航的时候就显示,否则就隐藏。以上就是这篇文章的全部内容,希望能对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
javascript offsetX与layerX区别
Mar 12 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
js正则匹配多个全部数据问题
Dec 20 Javascript
利用jquery实现瀑布流3种案例
Sep 18 #Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 #Javascript
移动端js触摸事件详解
Sep 18 #Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 #Javascript
jQuery向父辈遍历的简单方法
Sep 18 #Javascript
js字符串引用的两种方式(必看)
Sep 18 #Javascript
jQuery实现获取元素索引值index的方法
Sep 18 #Javascript
You might like
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
php中执行系统命令的方法
2015/03/21 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
python里大整数相乘相关技巧指南
2014/09/12 Python
Python日期的加减等操作的示例
2017/08/15 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
python中wx模块的具体使用方法
2020/05/15 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
美国时尚在线:Showpo
2017/09/08 全球购物
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
竞职演讲稿范文
2014/01/11 职场文书
教师现实表现材料
2014/02/14 职场文书
文明风采获奖感言
2014/02/18 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
超市员工辞职信范文
2015/05/12 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript