English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Структура дерева
Структура дерева имеет множество форм и методов реализации, zTree можно считать одним из более простых и привлекательных, а также легко реализуемых. zTree — это многофункциональный «плагин дерева», реализованный на jQuery. Её最主要的优点是配置灵活,всего лишь идентичное значение id и pid позволяет сформировать простую структуру «родитель-дить». Также, благодаря бесплатному и открытом коду,越来越多的人开始使用zTree.
Эффект как на рисунке
Сначала вам нужно понять, что такое двусторонняя привязка данных AngularJS, чтобы лучше понять下面的 код,想了 долго, и только с помощью этого кода я смог реализовать иерархическую структуру меню слева
Чтобы реализовать上面的 функцию, вам нужно выполнить следующие шаги:
Добавьте ng-app в тег HTML, чтобы 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 должен быть равен определенной строке, это我自己 define, 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', []) // Создайте контроллер, названный Left-navigation myApp.controller('Left-navigation', ['$scope', function ($scope) { // Определите функцию navFunc, принимающую один параметр $scope.navFunc = function (arg) { // Пусть переменная navAction равна переданному значению arg $scope.navAction = arg; }; };
Резюме
Общий подход заключается в том, что при нажатии на уровень навигации вызывается функция, и имя уровня навигации отправляется функции, а二级导航 отображается, когда переменная navAction равна上级 навигации, в противном случае он скрыт. Это и есть весь контент статьи, я надеюсь, что он принесет вам определенную пользу в учебе или работе, если у вас есть вопросы, вы можете оставить комментарий для обсуждения.