यह लेख अल्पाइन जेएस, एक हल्के जावास्क्रिप्ट फ्रेमवर्क का उपयोग करके गतिशील तालिकाएँ बनाने का अन्वेषण करता है। हम प्रक्रिया को तीन खंडों में विभाजित करेंगे: हेडर, बॉडी और फ़ूटर, बुनियादी और जटिल दोनों परिदृश्यों पर ध्यान केंद्रित करते हुए।

की स्थापना:

1. एचटीएमएल संरचना: हम एक्स-डेटा निर्देश संलग्न के साथ एक मूल HTML तत्व () से शुरू करते हैं। यह निर्देश प्रतिक्रियाशील डेटा को तत्व से बांधता है।
2. जावास्क्रिप्ट डेटा: हम अपने टेबल डेटा को रखने के लिए HTML के बाहर एक खाली जावास्क्रिप्ट ऑब्जेक्ट (डेटा) को परिभाषित करते हैं।

प्रारंभिक कोड नीचे है:


हैडर

• हम हेडर के लिए थीड तत्व का उपयोग करते हैं।
• x-for निर्देश टेबल.कस्टमहेडर डेटा पर पुनरावृत्त होता है, पंक्तियों और स्तंभों को गतिशील रूप से बनाता है।
• कॉम्प्लेक्स हेडर सेल को मर्ज करने के लिए कोलस्पैन और रोस्पैन विशेषताओं (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 तत्व तालिका की डेटा पंक्तियाँ रखता है।
• हम x-for का उपयोग करके टेबल.डेटा के माध्यम से पुनरावृति करते हैं।
• प्रत्येक पंक्ति में एक्स-टेक्स्ट का उपयोग करके संबंधित ऑब्जेक्ट गुणों के डेटा से भरे सेल () होते हैं।

  और यह वह डेटा है जिसे हम दिखाना चाहते हैं:
  

  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 का उपयोग करता है।
  • हालाँकि, फ़ुटर 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 } },
      ],
  ],
  

  उदाहरण डेटा:

  हम शहर के नाम और विभिन्न कपड़ों की वस्तुओं वाले नमूना डेटा के साथ तालिका की कार्यक्षमता प्रदर्शित करते हैं।

  अतिरिक्त टिप्पणी:

  • कॉल.क्लास और डेटा.क्लास गुणों के भीतर परिभाषित सीएसएस कक्षाओं का उपयोग करके स्टाइलिंग हासिल की जाती है।
  • प्रदान किया गया लिंक आगे की खोज के लिए एक पूर्ण कार्यशील डेमो प्रदान करता है।

  बाहरी संबंध

  1. डेमो: https://framework.fuwafuwa.web.id/examples/simple-table
  2. स्पष्टीकरण: https://framework.fuwafuwa.web.id/docs/simple-table.html#simple-table

  निष्कर्ष:

  यह विश्लेषण दर्शाता है कि अल्पाइन जेएस हमें लचीले हेडर, बॉडी और फ़ुटर के साथ गतिशील तालिकाएँ बनाने में कैसे सशक्त बनाता है। यह दृष्टिकोण तालिका निर्माण और प्रबंधन को सरल बनाता है, विशेष रूप से बार-बार बदलते डेटा वाले परिदृश्यों के लिए।