Heim > Artikel > Web-Frontend > AngularJS implementiert Beispielcode für ein Baumstrukturmenü (ztree).

AngularJS implementiert Beispielcode für ein Baumstrukturmenü (ztree).

高洛峰Original: 2017-01-10 12:54:561877Durchsuche

Baumstruktur

Die Baumstruktur hat viele Formen und Implementierungsmethoden. Man kann sagen, dass zTree relativ einfach und schön ist und relativ einfach zu implementieren ist. zTree ist ein multifunktionales „Baum-Plug-in“, das von jQuery implementiert wird. Sein größter Vorteil ist die flexible Konfiguration. Solange die Werte von id und pid gleich sind, kann eine einfache Eltern-Kind-Struktur gebildet werden. In Verbindung mit kostenlosem Open Source nutzen immer mehr Menschen zTree.

Das Rendering ist wie folgt

AngularJS implementiert Beispielcode für ein Baumstrukturmenü (ztree).

Zunächst müssen Sie wissen, was die bidirektionale Datenbindung von AngularJS ist, um den folgenden Code besser zu verstehen . Ich habe lange darüber nachgedacht, den folgenden Code zu implementieren, um die linke Menübaumstruktur zu implementieren:

Um die obige Funktion zu implementieren, müssen Sie die folgenden Schritte ausführen:

Fügen Sie ng-app im HTML-Tag hinzu und überlassen Sie AngularJS die Verwaltung des gesamten HTML-Dokuments

<html lang="en" ng-app="myApp">

myApp ist ein Modul, das ich selbst erstellt habe

Die Bezeichnung des Das gesamte Menü lautet wie folgt

<div id="left-menu" ng-controller="Left-navigation" class="col-sm-2" style="margin-top: 50px">
  <ul>
 
    <!-- 仪表盘 -->
    <li>
  <!-- 让每一个一级菜单绑定一个函数navFunc，并且传入一个指定的字符串 -->
      <a href="" ng-click="navFunc(&#39;dashboard&#39;)">仪表盘</a>
    </li>
 
    <!-- 主机 -->
    <li>
      <span><a ng-click="navFunc(&#39;hosts&#39;)" href="">主机</a></span>
      <!-- 如果要显示二级菜单，则navAction必须等于制定的字符串，这个是自己定义的，navAction是在controller中创建的 -->
  <ul ng-show="navAction === &#39;hosts&#39;">
        <li><a href="">主机</a></li>
        <li><a href="">分组</a></li>
      </ul>
    </li>
 
    <!-- 容器 -->
    <li>
      <a href="" ng-click="navFunc(&#39;container&#39;)">容器</a>
    </li>
 
    <!-- 模板 -->
    <li>
      <span><a href="" ng-click="navFunc(&#39;template&#39;)">模板</a></span>
      <ul ng-show="navAction === &#39;template&#39;">
        <li><a href="">监控</a></li>
        <li><a href="">装机</a></li>
      </ul>
    </li>
 
    <!-- 用户 -->
    <li>
      <span><a href="" ng-click="navFunc(&#39;users&#39;)">用户</a></span>
      <ul ng-show="navAction === &#39;users&#39;">
        <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(&#39;configuration&#39;)">配置</a>
    </li>
 
  </ul>
</div>

Der JS-Code lautet wie folgt

// 创建myApp模块
var myApp = angular.module(&#39;myApp&#39;, [])
 
// 创建一个controller，名为Left-navigation
myApp.controller(&#39;Left-navigation&#39;, [&#39;$scope&#39;, function ($scope) {
  // 定义一个函数navFunc， 接受一个参数
 $scope.navFunc = function (arg) {
 // 让navAction变量等于函数传入过来的值arg
    $scope.navAction = arg;
  };
}]);

Zusammenfassung

Die Gesamtidee besteht darin, eine Funktion bei der Navigation auf der ersten Ebene auszuführen Klicken Sie darauf und senden Sie den Namen der Navigation der ersten Ebene an die Funktion. Anschließend ist die Variable navAction der Navigation der zweiten Ebene gleich ihrer übergeordneten Variable. Sie wird während der Navigation angezeigt, andernfalls wird sie ausgeblendet. Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er kann jedem beim Lernen oder Arbeiten helfen. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen.

Weitere Artikel zum Beispielcode für die AngularJS-Implementierung des Menüs „Baumstruktur“ (ztree) finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der drei grundlegenden Möglichkeiten zum Generieren von Objekten in js (Fabrikmodus, Konstruktormodus, Prototypmodus)Nächster Artikel：Detaillierte Erläuterung der drei grundlegenden Möglichkeiten zum Generieren von Objekten in js (Fabrikmodus, Konstruktormodus, Prototypmodus)

In Verbindung stehende Artikel

Mehr sehen