مثال على تحقيق بنية شجرة (ztree) في AngularJS

هيكل شجري

هيكل شجري يأتي بتنوع كبير في الأشكال والطرق المختلفة، يمكن القول بأن zTree هو نموذج بسيط وجميل في نفس الوقت، ويمكن تنفيذه بسهولة. zTree هو مكتبة متعددة الوظائف للهيكل الشجري تعتمد على jQuery. من أكبر مزاياها هو مرونة التكوين، حيث يمكن تشكيل هيكل أب والابن ببساطة إذا كانت قيم id و pid متطابقة. بالإضافة إلى ذلك، بكونه مفتوح المصدر ومجاني، يزداد عدد المستخدمين لهذا المكتبة.

الشكل التوضيحي كالتالي

أولاً، يجب أن تعرف كيفية التزامن البيانات المزدوجة في AngularJS لتتمكن من فهم الشيفرة التالية بشكل أفضل، فكرت لفترة طويلة حتى تمكنت من التفكير في استخدام الشيفرة التالية لإنشاء بنية شجرة القائمة اليسرى

لتحقيق الوظيفة المذكورة أعلاه، تحتاج إلى اتباع الخطوات التالية:

إضافة ng-app داخل علامة HTML، لجعل AngularJS يقوم بادارة كامل مستند HTML

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

myApp هو المodule الذي أنشأته بنفسي

علامات التبويب للقائمة بأكملها كالتالي

<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 code as follows

// إنشاء module 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 مع التوجيه الأعلى له، وإلا يتم إخفاءه. هذا هو محتوى المقال كله، آمل أن يكون هذا المقال قد ساعدكم في التعلم أو العمل. إذا كان لديكم أي أسئلة، يمكنكم ترك تعليقات للتواصل.

تعليمية أساسية

التي قد تهمك