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一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
js中Object.create实例用法详解
Oct 05 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 上传功能实例代码
2010/04/13 PHP
一些php技巧与注意事项分析
2011/02/03 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
javascript比较文档位置
2008/04/08 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
jquery处理json对象
2014/11/03 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
python函数返回多个值的示例方法
2013/12/04 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
详解Anaconda 的安装教程
2020/09/23 Python
Python3读写ini配置文件的示例
2020/11/06 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
大学辅导员述职报告
2015/01/10 职场文书
tree shaking对打包体积优化及作用
2022/07/07 Java/Android