[] डेटा ’] युक्त एक Drupal टेबल सेल में एक वर्ग जोड़ें

Question

Drupal 8 में, टेबल्स का प्रतिपादन करना अभी भी Drupal 7 की तरह है। आप PHP में पंक्तियों और स्तंभों के बहुआयामी सरणियों का निर्माण करते हैं, जो Drupal क्रमशः a <tr>और <td>s में बदल जाते हैं। अभी भी इस भ्रामक ड्रुपालिज़्म के रूप में जाना जाता 'data'है जो आपको सेल डेटा के रूप में रेंडर एरे तत्वों को जोड़ने देता है (डेटा विशेषताओं के साथ भ्रमित होने की नहीं)।

मुझे एक साइट दी गई है, जहाँ डेवलपर ने सेल की सामग्री को प्रस्तुत करने के लिए 'डेटा' का उपयोग करने के लिए चुना है, लेकिन मैं यह पता नहीं लगा सकता कि <td>डेटा के आसपास क्लास कैसे जोड़ें ।

मैंने Table.php के लिए स्रोत कोड और प्रलेखन पढ़ा है और मुझे नए के बारे में पता है #wrapper_attributes लेकिन मैं यह नहीं कर सकता।

मैंने कक्षा को जोड़ने के लिए कम से कम चार तरीके आज़माए हैं, और कोई भी काम नहीं करता है।

$table['row-' . $row_id] = [

  // Option 1: Class appears on <tr> tag
  '#attributes' => [
    'class' => ['option-1-row-attributes'],
    'id' => 'row-' . $row_id,
    'no_striping' => TRUE,
  ],

  // Option 2: Class appears on <td> tag of first column. 
  'item' => [
    '#markup' => $row['my_item']->label(),
    '#wrapper_attributes' => [   
      'class' => ['option-2-markup-wrapper-attributes'],
    ],
  ],

  // In the following section, the only item that works is
  // the class on the <a> tag.
  'edit_operation' => [
    'data' => [
      '#type' => 'link',
      '#url' => Url::fromRoute('my_module.my_route', ['item' => $row_id]),
      '#title' => $this->t('Edit'),
      '#attributes' => [
        // Option 3: Class appears on the anchor tag
        'class' => ['use-ajax', 'option-3-link-attributes'],
        'data-dialog-type' => 'modal',
        'data-dialog-options' => Json::encode([
          'width' => 700,
        ]),
      ],
      // Option 4: Has no effect.
      '#wrapper_attributes' => [
        'class' => ['option-4-data-wrapper-attributes'],
      ],
    ],
    // Option 5: Update: This appears to be the correct solution! 
    // Class appears on the <td>.
    '#wrapper_attributes' => [
      'class' => ['option-5-wrapper-attributes'],
    ],
    // Option 6: Has no effect.
    '#attributes' => [
      'class' => ['option-6-attributes'],
    ],
    // Option 7: Has no effect.
    'class' => ['option-7-attributes'],
  ],
];

Answer 1

सामान्य शब्दों में प्रश्न लिखने के बाद, मैं फिर से परीक्षण करने के लिए वापस चला गया हूं, और यह निर्धारित किया है कि ओपी में विकल्प 5 '#wrapper_attributes'उसी स्तर के 'data'तत्व के साथ काम करता है। मेरा मानना ​​है कि ड्रुपल 8 आक्रामक रूप से टेबल को कैच कर रहा था, क्योंकि मेरे बदलाव ए के बाद भी दिखाई नहीं दे रहे थे drush cr।

बैकएंड PHP के माध्यम से तालिकाओं में कक्षाएं जोड़ने का नियम है:

• टेबल क्लास की आवश्यकता है #attributes।
• टीआरओडीवाई के अंदर टीआर पंक्ति वर्ग की आवश्यकता होती है #attributes।
• TBODY के अंदर टीडी सेल क्लास की आवश्यकता होती है #wrapper_attributes।
• ठेड / tfoot अंदर टी.आर. पंक्ति वर्ग की आवश्यकता है 'class'और 'data'कंटेनरों।
  न तो #attributesहै और न ही #wrapper_attributesयहां काम करते हैं।
• वें / ठेड अंदर टीडी सेल वर्ग / tfoot की आवश्यकता है 'class'और 'data'कंटेनरों।
  न तो #attributesहै और न ही #wrapper_attributesयहां काम करते हैं।
• एक करने के लिए सीधे एक वर्ग को जोड़ने के लिए कोई तरीका नहीं है <thead>या <tfoot>एक टहनी टेम्पलेट अधिभावी बिना टैग।

यहां मुख्य के अंदर <tr>और <td>टैग में कक्षाएं जोड़ने के लिए और <tbody>साथ ही मुख्य <table>टैग के लिए सबसे आम उदाहरण है:

$table = [
  '#type' => 'table',
  '#attributes' => [
    'class' => ['table-class'],
  ],
  'row1' => [
    '#attributes' => [
      'class' => ['tr-class'],
    ],
    // Table data cell using 'data' for renderable elements.
    'column1' => [
      'data' => [
        '#type' => 'link', // Or any other renderable thing.
        '#attributes' => [
          'class' => ['link-class'],
        ],
        // Other elements required to render the link go here...
      ],
      '#wrapper_attributes' => [ // Watch out!
        'class' => ['td-class'],
      ],
    ],
    // Table data cell using '#markup'.
    'column2' => [
      '#markup' => '<span>' . $this->t('text') . '</span>',
      '#wrapper_attributes' => [   
        'class' => ['td-class'],
      ],
    ],
  ],
];

ध्यान दें कि 'class'कंटेनर या तो एक स्ट्रिंग या एक सरणी को स्वीकार करेगा, लेकिन मैं हमेशा एक सरणी का उपयोग करने का सुझाव देता हूं।

यहां से, कहानी और अधिक जटिल हो जाती है। यदि आपको THEAD / TFOOT क्षेत्र के अंदर TR या TD / TH टैग में कक्षाएं जोड़ने की आवश्यकता है, तो नियम पूरी तरह से बदल जाते हैं। न तो #attributesऔर न ही #wrapper_attributesअंदर #headerऔर #footerवर्गों में काम करते हैं और उनका उपयोग करने की कोशिश बहुत अजीब प्रभाव पैदा करती है।

Drupal 8 में हेडर / पाद डेटा कॉलम के साथ तालिकाओं के लिए न्यूनतम न्यूनतम संरचना यह है:

$table = [
  '#type' => 'table',
  // Produces <thead> <tr> <th>
  '#header' => [
    'Header 1',
    'Header 2',
    'Header 3',
  ],
  // Produces <tbody> <tr> <td>
  'row1' => [
    'Body 1',
    'Body 2',
    'Body 3',
  ],
  // Produces <tfoot> <tr> <td>
  '#footer' => [
    'Footer 1',
    'Footer 2',
    'Footer 3',
  ],
];

आपको डेटा के वास्तविक ढांचे को बदलना होगा और 'class'सरणी सूचकांक का लाभ उठाने के लिए अतिरिक्त बहु-आयामी सरणियों के दो स्तरों को प्रस्तुत करना होगा, जिसके लिए फिर सरणी सूचकांक को भी शुरू करना होगा 'data'। यह पंक्ति तत्व और डेटा सेल तत्वों दोनों पर लागू होता है, जैसा कि निम्नलिखित उदाहरण में देखा गया है:

$table = [
  '#type' => 'table',
  // This example works the same way for '#footer'.
  '#header' => [
    // First, introduce an extra level to the array to provide a
    // place to store the class attribute on the <tr> element inside
    // the <thead>.
    [
      'class' => 'thead-tr-class',
      // Next place the columns inside a 'data' container, so that
      // the 'class' can be used.  '#wrapper_attributes' will not
      // work here.
      'data' => [
        // The following line produces data inside a <th>
        // without any class.
        'Header 1',

        // The following lines produce data inside a <th>
        // with a class: th-class.
        [
           'class' => 'th-class',
           'data' => 'Header 2',
           'colspan' => 2
        ],
      ],
    ],
  ],
];

उपर्युक्त उदाहरण का #headerउत्पादन होता है:

<table>
  <thead>
    <tr class="thead-tr-class">
      <th>Header 1</th>
      <th class="th-class" colspan="2">Header 2</th>
    </tr>
  </thead>
</table>

Comments

मैं टेबल हेडर में एक कोलस्पैन का उपयोग करने की कोशिश कर रहा हूं, लेकिन आपके पिछले उदाहरण का उपयोग करके मुझे यह त्रुटियां मिलती हैं:

— एड्रियन सीआईडी ​​अल्मागुएर

उपयोगकर्ता त्रुटि: "0" Drupal \ Core \ Render \ Element :: बच्चों () में लाइन की एक अमान्य रेंडर सरणी कुंजी है () (97 / कोर / lib / Drupal / Core / Render / Element.php की पंक्ति)। उपयोगकर्ता त्रुटि: "वर्ग" Drupal \ Core \ Render \ Element :: बच्चों () में एक अमान्य रेंडर सरणी कुंजी है (बच्चों की लाइन 97 / core / lib / Drupal / Core / Render / Element.php)। उपयोगकर्ता त्रुटि: "डेटा" Drupal \ Core \ Render \ Element में एक अमान्य रेंडर की कुंजी है :: बच्चों () (कोर के 97 / lib / Drupal / Core / Render / Element.php)। उपयोगकर्ता की त्रुटि: "colspan" Drupal \ Core \ Render \ Element :: बच्चों () में एक अमान्य रेंडर सरणी कुंजी है (बच्चों की लाइन 97 / core / lib / Drupal / Core / Render / Element.php)।

— एड्रियन सीआईडी ​​अल्मागुएर

मुझे बस कोलस्पैन के लिए एक और समाधान मिला, यहां देखिए drupal.stackexchange.com/q/245710/28275

— एड्रियन सिड