بناء قائمة شجرية باستخدام Bootstrap: دليل شامل ومفصل

تُعد القوائم الشجرية (Tree View) من الأدوات المهمة في تصميم واجهات المستخدم، حيث تساعد في تنظيم وعرض البيانات بطريقة هرمية واضحة وسهلة التصفح. تستخدم القوائم الشجرية في العديد من التطبيقات مثل إدارة الملفات، قوائم المنتجات، الهياكل التنظيمية، وأي بيانات تعتمد على التسلسل الهرمي. في هذا المقال، سنشرح بالتفصيل كيفية بناء قائمة شجرية باستخدام إطار العمل Bootstrap، مع التركيز على الأساليب العملية، وأفضل الممارسات، بالإضافة إلى دمج JavaScript لجعل القائمة تفاعلية وسهلة الاستخدام.

مفهوم القائمة الشجرية وأهميتها في تصميم الواجهات

القائمة الشجرية هي بنية بيانات تُعرض على شكل فروع وأوراق تشكل هيكلًا هرميًا، يُظهر العلاقات بين العناصر بطريقة تتيح للمستخدم التنقل بين المستويات المختلفة بسهولة. توفر هذه الطريقة عرضًا مبسطًا للبيانات المعقدة، وتُستخدم بشكل واسع في تطبيقات الويب والبرمجيات التي تحتاج لعرض بيانات متداخلة.

أهم مزايا القوائم الشجرية:

• تنظيم البيانات: تسهل عرض البيانات المعقدة التي تحتوي على مستويات متعددة.

• توفير مساحة: تظهر فقط الفروع المفتوحة مما يقلل من ازدحام الشاشة.

• سهولة التصفح: يتيح التوسيع والانكماش الانتقال بين الفروع بسهولة.

• تحسين تجربة المستخدم: تجعل الواجهات أكثر وضوحًا وتنظيماً.

Bootstrap ودوره في بناء القوائم الشجرية

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

ولكن، Bootstrap لا يقدم بشكل افتراضي مكون قائمة شجرية متكامل. لذلك، يتطلب بناء قائمة شجرية باستخدام Bootstrap مزج عناصر Bootstrap الأساسية مع أكواد HTML وCSS مخصصة، إضافة إلى استخدام JavaScript أو مكتبات خارجية لتحقيق وظائف التوسيع والانكماش.

الخطوات الأساسية لبناء قائمة شجرية باستخدام Bootstrap

1. إعداد الهيكل الأساسي للقائمة الشجرية

القائمة الشجرية تعتمد بشكل رئيسي على عناصر HTML مثل القوائم غير المرتبة

والقوائم المرتبة
والعناصر
1. لتمثيل الفروع والأوراق.

   مثال بسيط لبناء هيكل شجري:

   html
   CopyEdit
   <ul class="list-group">
     <li class="list-group-item">
       المستوى الأول
       <ul class="list-group ml-4">
         <li class="list-group-item">المستوى الثاني - فرع 1li>
         <li class="list-group-item">
           المستوى الثاني - فرع 2
           <ul class="list-group ml-4">
             <li class="list-group-item">المستوى الثالث - ورقة 1li>
             <li class="list-group-item">المستوى الثالث - ورقة 2li>
           ul>
         li>
       ul>
     li>
   ul>
   

   في هذا المثال:

   • استخدمنا أصناف Bootstrap list-group وlist-group-item لتنسيق القائمة.

   • استخدمنا ml-4 لإضافة تباعد أيسر (margin-left) لتمثيل التداخل.

   • تم إنشاء مستويات متعددة داخل بعض العناصر لتعكس الهيكل الشجري.

   ---

   2. إضافة تأثيرات التوسيع والانكماش (Expand/Collapse)

   لجعل القائمة تفاعلية، يجب تمكين المستخدم من فتح وإغلاق الفروع المختلفة بسهولة. يمكن تحقيق ذلك باستخدام JavaScript أو jQuery، أو باستخدام مكونات Bootstrap مثل Collapse.

   استخدام Bootstrap Collapse:

   يمكن دمج مكون الـ Collapse في Bootstrap لعرض أو إخفاء المحتوى داخل القائمة.

   هيكل القائمة باستخدام Collapse:

   html
   CopyEdit
   <ul class="list-group">
     <li class="list-group-item">
       <a data-toggle="collapse" href="#branch1" role="button" aria-expanded="false" aria-controls="branch1">
         المستوى الأول
       a>
       <ul class="list-group collapse" id="branch1">
         <li class="list-group-item">المستوى الثاني - فرع 1li>
         <li class="list-group-item">
           <a data-toggle="collapse" href="#subBranch1" role="button" aria-expanded="false" aria-controls="subBranch1">
             المستوى الثاني - فرع 2
           a>
           <ul class="list-group collapse" id="subBranch1">
             <li class="list-group-item">المستوى الثالث - ورقة 1li>
             <li class="list-group-item">المستوى الثالث - ورقة 2li>
           ul>
         li>
       ul>
     li>
   ul>
   

   في هذا المثال:

   • تم استخدام روابط مع خصائص data-toggle="collapse" للتحكم في التوسيع والانكماش.

   • القوائم الداخلية تحمل الصنف collapse مع معرف فريد.

   • عند الضغط على الرابط، يتم عرض أو إخفاء القائمة الفرعية.

   ---

   3. تحسين مظهر القائمة الشجرية باستخدام CSS

   لتعزيز المظهر وإضافة علامات توضح الفروع القابلة للتوسيع، يمكن استخدام أيقونات أو رموز خاصة مثل الأسهم أو علامات الجمع والطرح.

   مثال لإضافة أيقونات بجانب العناصر:

   css
   CopyEdit
   .list-group-item > a::before {
     content: "\25B6"; /* رمز السهم الأيمن */
     display: inline-block;
     margin-right: 8px;
     transition: transform 0.3s ease;
   }
   
   .list-group-item > a[aria-expanded="true"]::before {
     transform: rotate(90deg); /* تدوير السهم لأسفل عند التوسيع */
   }
   

   هذا التنسيق:

   • يضيف سهمًا صغيرًا على يسار العنصر القابل للتوسيع.

   • عند توسعة العنصر (تغيير الخاصية aria-expanded إلى true)، يتحول السهم ليشير للأسفل.

   ---

   4. استخدام JavaScript لجعل القائمة أكثر تفاعلية

   بالرغم من استخدام Bootstrap Collapse، يمكن استخدام JavaScript لإضافة وظائف إضافية مثل:

   • تفعيل التوسيع/الانكماش عند النقر على أي جزء من العنصر وليس فقط الرابط.

   • حفظ حالة التوسيع عند إعادة تحميل الصفحة.

   • دعم التنقل عبر لوحة المفاتيح (للتحسين الوصولية).

   مثال بسيط باستخدام jQuery:

   javascript
   CopyEdit
   $(document).ready(function() {
     $('.list-group-item > a').click(function(e) {
       e.preventDefault();
       var target = $(this).attr('href');
       $(target).collapse('toggle');
       var expanded = $(this).attr('aria-expanded') === 'true';
       $(this).attr('aria-expanded', !expanded);
     });
   });
   

   ---

   مثال متكامل لبناء قائمة شجرية باستخدام Bootstrap

   html
   CopyEdit
   html>
   <html lang="ar">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>قائمة شجرية باستخدام Bootstraptitle>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
     <style>
       .list-group-item > a::before {
         content: "\25B6";
         display: inline-block;
         margin-right: 8px;
         transition: transform 0.3s ease;
         cursor: pointer;
       }
       .list-group-item > a[aria-expanded="true"]::before {
         transform: rotate(90deg);
       }
       .list-group-item > ul {
         margin-top: 5px;
       }
     style>
   head>
   <body class="p-4" dir="rtl">
   
     <ul class="list-group">
       <li class="list-group-item">
         <a data-toggle="collapse" href="#branch1" role="button" aria-expanded="false" aria-controls="branch1">المستوى الأولa>
         <ul class="list-group collapse" id="branch1">
           <li class="list-group-item">المستوى الثاني - فرع 1li>
           <li class="list-group-item">
             <a data-toggle="collapse" href="#subBranch1" role="button" aria-expanded="false" aria-controls="subBranch1">المستوى الثاني - فرع 2a>
             <ul class="list-group collapse" id="subBranch1">
               <li class="list-group-item">المستوى الثالث - ورقة 1li>
               <li class="list-group-item">المستوى الثالث - ورقة 2li>
             ul>
           li>
         ul>
       li>
     ul>
   
     <script src="https://code.jquery.com/jquery-3.6.4.min.js">script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>
     <script>
       $(document).ready(function() {
         $('.list-group-item > a').click(function(e) {
           e.preventDefault();
           var target = $(this).attr('href');
           $(target).collapse('toggle');
           var expanded = $(this).attr('aria-expanded') === 'true';
           $(this).attr('aria-expanded', !expanded);
         });
       });
     script>
   body>
   html>
   

   ---

   دمج البيانات الديناميكية في القائمة الشجرية

   في المشاريع الحقيقية، قد تحتاج إلى بناء القائمة الشجرية من بيانات تأتي من خادم أو قاعدة بيانات. يتم ذلك غالبًا باستخدام JavaScript وAJAX لتحميل البيانات وعرضها في هيكل HTML مناسب.

   نموذج لهيكل بيانات JSON للقائمة الشجرية

   json
   CopyEdit
   [
     {
       "name": "المستوى الأول",
       "children": [
         {
           "name": "المستوى الثاني - فرع 1",
           "children": []
         },
         {
           "name": "المستوى الثاني - فرع 2",
           "children": [
             { "name": "المستوى الثالث - ورقة 1", "children": [] },
             { "name": "المستوى الثالث - ورقة 2", "children": [] }
           ]
         }
       ]
     }
   ]
   

   كود JavaScript لتحويل هذا الهيكل إلى قائمة HTML

   javascript
   CopyEdit
   function buildTree(data) {
     var ul = $('
   ');
     data.forEach(function(node) {
       var li = $('
   ');
       if (node.children && node.children.length > 0) {
         var a = $('').text(node.name);
         li.append(a);
         li.append(buildTree(node.children));
       } else {
         li.text(node.name);
       }
       ul.append(li);
     });
     return ul;
   }
   
   // عند استدعاء buildTree مع البيانات، يمكن إضافتها إلى عنصر موجود في الصفحة.
   

   ---

   مزايا استخدام Bootstrap لبناء القوائم الشجرية

   • التوافق مع جميع الشاشات: تصميم متجاوب يتكيف مع مختلف الأجهزة.

   • سهولة التخصيص: يمكن تعديل أنماط Bootstrap لتناسب التصميم المطلوب.

   • توفر مكونات جاهزة: مثل Collapse لجعل القوائم تفاعلية بدون الحاجة لكود معقد.

   • دعم مجتمعي واسع: وجود وثائق ومصادر كثيرة لتسهيل التعلم والتطوير.

   ---

   نصائح متقدمة لتحسين القوائم الشجرية

   • التحكم في حالة الفروع المفتوحة: يمكن حفظ الحالة في التخزين المحلي (localStorage) ليتم استعادة حالة التوسيع عند إعادة فتح الصفحة.

   • دعم لوحة المفاتيح: لتحسين الوصولية، يجب السماح باستخدام الأسهم وأزرار الإدخال للتنقل بين الفروع وفتحها.

   • إضافة ألوان وأيقونات مخصصة: لتعزيز قابلية القراءة والتعرف على نوع العنصر (فرع أو ورقة).

   • تحميل البيانات حسب الطلب (Lazy Loading): لتحسين الأداء عند التعامل مع قوائم ضخمة.

   ---

   جدول مقارنة بين طرق بناء القائمة الشجرية باستخدام Bootstrap

   الطريقة	المزايا	العيوب	مستوى الصعوبة
   القوائم الثابتة باستخدام HTML وCSS فقط	بسيطة التنفيذ، مناسبة للقوائم الصغيرة	لا تدعم التفاعل الديناميكي	سهل
   استخدام Bootstrap Collapse	تفاعلية، مدمجة مع Bootstrap	يحتاج ضبط إضافي لجعلها متجاوبة	متوسط
   دمج JavaScript/jQuery	تحكم كامل بالتفاعل والتخصيص	يحتاج معرفة برمجية أعلى	عالي
   استخدام مكتبات خارجية (مثل jsTree)	جاهزة وقوية، ميزات متقدمة	زيادة حجم المشروع، تعقيد التضمين	عالي

   ---

   الخلاصة

   بناء قائمة شجرية باستخدام Bootstrap يتطلب فهمًا جيدًا لتركيب HTML، استخدام مكونات Bootstrap مثل Collapse، مع إتقان تقنيات CSS وJavaScript لجعل القائمة تفاعلية وسهلة الاستخدام. هذا الأسلوب يتيح تصميم واجهات منظمة وأنيقة، تدعم العرض الهرمي للبيانات بطريقة فعالة ومتجاوبة مع مختلف الأجهزة. من خلال دمج البيانات الديناميكية والميزات التفاعلية المتقدمة، يمكن إنشاء قوائم شجرية متطورة تلبي متطلبات معظم التطبيقات الحديثة بكفاءة عالية.

   ---

   المصادر والمراجع

   • توثيق Bootstrap الرسمي: https://getbootstrap.com/docs/4.6/components/collapse/

   • مكتبة jsTree: https://www.jstree.com/ (للمقارنة مع الحلول الجاهزة)

   ---

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