تستكشف هذه المقالة كيفية إنشاء جداول ديناميكية باستخدام Alpine JS، وهو إطار عمل جافا سكريبت خفيف الوزن. سنقوم بتقسيم العملية إلى ثلاثة أقسام: الرأس والنص والتذييل، مع التركيز على السيناريوهات الأساسية والمعقدة.

اعداد:

1. هيكل HTML: نبدأ بعنصر HTML الأساسي () مع إرفاق توجيه x-data. يربط هذا التوجيه البيانات التفاعلية بالعنصر.
2. بيانات جافا سكريبت: نحدد كائن جافا سكريبت (بيانات) فارغًا خارج HTML للاحتفاظ ببيانات الجدول لدينا.

الرمز الأولي أدناه:


رأس

• نستخدم عنصر الرأس للرأس.
• يتكرر توجيه x-for عبر بيانات table.customHeader، مما يؤدي إلى إنشاء الصفوف والأعمدة ديناميكيًا.
• يمكن للرؤوس المعقدة الاستفادة من سمات colspan وrowspan (المحددة في col.attr) لدمج الخلايا.
• يتم عرض المحتوى داخل كل خلية باستخدام x-html ويتم ربطه بخاصية col.title.

let data = {
  table: {
      customHeader: [
          [
              { title: 'City', attr: { rowspan: 2 }, class: 'border-r border-t' },
              { title: 'Clothes', attr: { colspan: 3 }, class: 'border-r border-t' },
              { title: 'Accessories', attr: { colspan: 2 }, class: 'border-t' }
          ],
          [
              { title: 'Trousers', class: 'border-r' },
              { title: 'Skirts', class: 'border-r' },
              { title: 'Dresses', class: 'border-r' },
              { title: 'Bracelets', class: 'border-r' },
              { title: 'Rings' },
          ]
      ],
  }
}

جسم

• يحتفظ عنصر tbody بصفوف بيانات الجدول.
• نقوم بالتكرار من خلال table.data باستخدام x-for.
• يحتوي كل صف على خلايا () مملوءة ببيانات من خصائص الكائن المقابلة باستخدام نص x.

  وهذه هي البيانات التي نريد إظهارها:
  

  data: [
      { "city": "Mandalay", "trousers": 79, "skirts": 16, "dresses": 14, "bracelets": 69, "rings": 99 },
      { "city": "George Town", "trousers": 68, "skirts": 24, "dresses": 90, "bracelets": 96, "rings": 48 },
      { "city": "Gent", "trousers": 26, "skirts": 60, "dresses": 67, "bracelets": 5, "rings": 43 },
      { "city": "Mombasa", "trousers": 34, "skirts": 62, "dresses": 18, "bracelets": 75, "rings": 78 },
      { "city": "Lyon", "trousers": 13, "skirts": 33, "dresses": 12, "bracelets": 0, "rings": 17 },
      { "city": "Vancouver", "trousers": 82, "skirts": 91, "dresses": 18, "bracelets": 96, "rings": 72 },
      { "city": "Cairn", "trousers": 64, "skirts": 43, "dresses": 14, "bracelets": 95, "rings": 55 },
  ]
  

  تذييل

  • يحدد عنصر tfoot التذييل.
  • على غرار الرأس، يستخدم x-for للتكرار من خلال بيانات table.customFooter.
  • ومع ذلك، يمكن للتذييل عرض القيم الديناميكية من خلال الإشارة إلى الخصائص داخل table.footerData باستخدام x-html.

  customFooter: [
      [
          { value: 'Total', class: 'font-bold border-r text-center', attr: { rowspan: 2 } },
          { name: 'total-trousers', class: 'text-right border-r' },
          { name: 'total-skirts', class: 'text-right border-r', },
          { name: 'total-dresses', class: 'text-right border-r' },
          { name: 'total-bracelets', class: 'text-right border-r' },
          { name: 'total-rings', class: 'text-right' },
      ],
      [
          { name: 'total-clothes', class: 'text-center border-r', attr: { colspan: 3 } },
          { name: 'total-accessories', class: 'text-center', attr: { colspan: 2 } },
      ],
  ],
  

  بيانات المثال:

  نعرض وظائف الجدول باستخدام بيانات نموذجية تحتوي على أسماء المدن وعناصر الملابس المختلفة.

  ملاحظات إضافية:

  • يتم تحقيق التصميم باستخدام فئات CSS المحددة ضمن خصائص col.class وdata.class.
  • يقدم الرابط المقدم عرضًا عمليًا كاملاً لمزيد من الاستكشاف.

  روابط خارجية

  1. العرض التوضيحي: https://framework.fuwafuwa.web.id/examples/simple-table
  2. الشرح: https://framework.fuwafuwa.web.id/docs/simple-table.html#simple-table

  خاتمة:

  يوضح هذا التفصيل كيف تمكننا Alpine JS من إنشاء جداول ديناميكية ذات رؤوس ونصوص وتذييلات مرنة. يعمل هذا الأسلوب على تبسيط إنشاء الجدول وإدارته، خاصة بالنسبة للسيناريوهات التي تحتوي على بيانات تتغير بشكل متكرر.