Aggiungi una classe a una cella della tabella Drupal contenente ['dati']


11

In Drupal 8, il rendering delle tabelle è ancora molto simile a Drupal 7. Costruisci array multidimensionali di righe e colonne in PHP che Drupal trasforma rispettivamente in a <tr>e <td>s. C'è ancora questo confuso drupalismo noto come 'data'che consente di aggiungere elementi dell'array di rendering come dati di cella (da non confondere con gli attributi di dati).

Mi è stato assegnato un sito in cui lo sviluppatore ha scelto di utilizzare i "dati" per eseguire il rendering dei contenuti della cella, ma non riesco a capire come aggiungere una classe ai <td>dati circostanti.

Ho letto il codice sorgente e la documentazione per Table.php e sono a conoscenza del nuovo #wrapper_attributes ma non riesco a decifrarlo .

Ho provato almeno quattro modi per aggiungere la classe e nessuno funziona.

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

Risposte:


12

Dopo aver scritto la domanda in termini generali, sono tornato di nuovo al test e ho stabilito che l'opzione 5 nell'OP con '#wrapper_attributes'lo stesso livello 'data'dell'elemento funziona. Credo che Drupal 8 abbia messo in modo aggressivo la memorizzazione nella cache del tavolo, perché i miei cambiamenti non venivano visualizzati anche dopo a drush cr.

Le regole per aggiungere classi alle tabelle tramite PHP back-end sono:

  • La classe della tabella richiede #attributes.
  • Richiede la classe di riga TR all'interno di TBODY #attributes.
  • Richiede la classe di cellule TD all'interno di TBODY #wrapper_attributes.
  • Richiede classe TR all'interno di THEAD / TFOOT 'class'e 'data'contenitori.
    #attributes#wrapper_attributeslavorare qui.
  • Richiede 'class'e 'data'contenitori la classe di celle TH / TD all'interno di THEAD / TFOOT .
    #attributes#wrapper_attributeslavorare qui.
  • Non è possibile aggiungere una classe direttamente a <thead>o <tfoot>tag senza sovrascrivere un modello di ramoscello.

Ecco l'esempio più comune per l'aggiunta di classi ai tag <tr>& <td>all'interno del main <tbody>, così come al <table>tag principale stesso:

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

Si noti che il 'class'contenitore accetta una stringa o un array, ma suggerisco di utilizzare sempre un array.

Da qui, la storia diventa più complicata. Se è necessario aggiungere classi ai tag TR o TD / TH all'interno di un'area THEAD / TFOOT, le regole cambiano completamente. Né #attributes#wrapper_attributeslavoro all'interno #headere #footersezioni e cercando di usarli produce effetti molto strani.

La struttura minima per le tabelle con colonne di dati di intestazione / piè di pagina in Drupal 8 è questa:

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

È necessario modificare la struttura effettiva dei dati e introdurre due livelli di array multidimensionali aggiuntivi, al fine di sfruttare l' 'class'indice di array che richiede quindi l'introduzione anche 'data'dell'indice di array. Questo vale sia per l'elemento riga che per gli elementi della cella dati, come mostrato nell'esempio seguente:

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

L'esempio sopra riportato #headerproduce:

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

Sto cercando di usare un colspan nell'intestazione della tabella ma usando il tuo ultimo esempio ottengo questi errori:
Adrian Cid Almaguer,

Errore utente: "0" è una chiave dell'array di rendering non valida in Drupal \ Core \ Render \ Element :: children () (riga 97 di core / lib / Drupal / Core / Render / Element.php). Errore utente: "class" è una chiave di array di rendering non valida in Drupal \ Core \ Render \ Element :: children () (riga 97 di core / lib / Drupal / Core / Render / Element.php). Errore utente: "data" è una chiave di array di rendering non valida in Drupal \ Core \ Render \ Element :: children () (riga 97 di core / lib / Drupal / Core / Render / Element.php). Errore utente: "colspan" è una chiave di array di rendering non valida in Drupal \ Core \ Render \ Element :: children () (riga 97 di core / lib / Drupal / Core / Render / Element.php).
Adrian Cid Almaguer,

Ho appena trovato un'altra soluzione per il colspan, dai un'occhiata qui drupal.stackexchange.com/q/245710/28275
Adrian Cid Almaguer
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.