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 相关文章推荐
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
js实现磁性吸附的示例
Oct 26 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
农民和部队如何穿矿
2020/03/04 星际争霸
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
JavaScript多线程的实现方法
2007/05/08 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
React Form组件的实现封装杂谈
2018/05/07 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
python中树与树的表示知识点总结
2019/09/14 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
校园安全检查制度
2014/02/03 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年销售员工作总结
2014/12/01 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
简单的辞职信模板
2015/05/12 职场文书
python flask框架快速入门
2021/05/14 Python
详解MySQL中的主键与事务
2021/05/27 MySQL