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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
javascript 命名规则 变量命名规则
Feb 25 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
Javascript的表单验证-提交表单
Mar 18 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 Javascript
js+css3实现旋转效果
Jan 20 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 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
浅析PHP文件下载原理
2014/12/25 PHP
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
js中判断控件是否存在
2010/08/25 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
Python函数中的函数(闭包)用法实例
2016/03/15 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
详解如何修改python中字典的键和值
2020/09/29 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
专业毕业生个性的自我评价
2013/10/03 职场文书
医疗纠纷协议书
2014/04/16 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
公开承诺书格式
2014/05/21 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技