Drupal tablo hücresine ['data'] içeren bir sınıf ekleyin

Drupal 8'de, Tabloları oluşturmak hala Drupal 7'ye çok benzer. PHP'de Drupal'ın sırasıyla a <tr>ve <td>s'ye dönüştüğü çok boyutlu satır ve sütun dizileri oluşturursunuz . 'data'Hücre verileri (render veri öznitelikleri ile karıştırılmamalıdır) olarak render dizi elemanları eklemenize izin veren hala bilinen bu kafa karıştırıcı Drupalizm var .

Geliştiricinin hücre içeriğini oluşturmak için 'veri' kullanmayı seçtiği bir site verildi, ancak <td>verilerin etrafına nasıl sınıf ekleyeceğimi anlayamıyorum.

Table.php için kaynak kodu ve belgeleri okudum ve yeni farkındayım #wrapper_attributes ama bu çatlamak olamaz.

Sınıf eklemek için en az dört yol denedim ve hiçbiri işe yaramaz.

$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'],
  ],
];

Soruyu genel terimlerle yazdıktan sonra, tekrar test etmeye geri döndüm ve OP'deki Seçenek 5'in elemanın '#wrapper_attributes'aynı seviyesinde 'data'çalıştığını belirledim . Drupal 8'in tabloyu agresif bir şekilde önbelleğe aldığına inanıyorum, çünkü değişikliklerim a'dan sonra bile görünmüyordu drush cr.

Arka uç PHP ile tablolara sınıf ekleme kuralları:

• Tablo sınıfı gerektirir #attributes.
• TBODY içindeki TR satır sınıfı gerektirir #attributes.
• TBODY içindeki TD hücre sınıfı gerektirir #wrapper_attributes.
• THEAD / TFOOT içindeki TR satır sınıfı 'class've 'data'kapsayıcıları gerektirir .
  Ne burada ne #attributesde #wrapper_attributesçalışıyor.
• THEAD / TFOOT içindeki TH / TD hücre sınıfı gerektirir 'class've 'data'kaplar.
  Ne burada ne #attributesde #wrapper_attributesçalışıyor.
• Bir dal şablonunu geçersiz kılmadan doğrudan bir <thead>veya <tfoot>etikete sınıf eklemenin bir yolu yoktur .

Ana etiket içindeki <tr>& <td>etiketlerine <tbody>ve ana <table>etiketin kendisine sınıf eklemek için en yaygın örnek :

$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'Kapsayıcı bir dize veya bir dizi kabul edeceğini unutmayın , ama her zaman bir dizi kullanmanızı öneririz.

Buradan hikaye daha karmaşık hale geliyor. THEAD / TFOOT alanı içindeki TR veya TD / TH etiketlerine sınıf eklemeniz gerekiyorsa, kurallar tamamen değişir. Ne #attributesde #wrapper_attributesçalışma içine #headerve #footerbölümler ve bunları kullanmak için çalışıyor çok garip efektler üretir.

Drupal 8'de üstbilgi / altbilgi veri sütunlarına sahip tablolar için çıplak minimum yapı şudur:

$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'Dizi indeksinden yararlanmak için verinin gerçek yapısını değiştirmeli ve iki seviyeli ek çok boyutlu diziler eklemelisiniz ki bu da dizi indeksinin kullanılmasını gerektirir 'data'. Bu, aşağıdaki örnekte görüldüğü gibi hem satır öğesi hem de veri hücresi öğeleri için geçerlidir:

$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
        ],
      ],
    ],
  ],
];

Yukarıdaki örnekte #headerşunlar üretilmektedir:

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