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 相关文章推荐
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
jQuery学习基础知识小结
Nov 25 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
php 接口类与抽象类的实际作用
2009/11/26 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
一句话JavaScript表单验证代码
2009/08/02 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
微信小程序实现随机验证码功能
2018/12/20 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
了解重排与重绘
2019/05/29 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
用python绘制樱花树
2020/10/09 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
大学生学习党课思想汇报
2014/01/03 职场文书
红领巾心向党广播稿
2014/01/19 职场文书
残疾人小组计划书
2014/04/27 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
团组织推荐意见
2015/06/05 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js