Thêm một lớp vào một ô bảng Drupal chứa ['data']

Trong Drupal 8, kết xuất Bảng vẫn rất giống với Drupal 7. Bạn xây dựng các mảng và cột đa chiều trong PHP mà Drupal biến đổi thành a <tr>và <td>s tương ứng. Vẫn còn vấn đề Drupalism khó hiểu này 'data'cho phép bạn thêm các phần tử kết xuất dưới dạng dữ liệu ô (không bị nhầm lẫn với các thuộc tính dữ liệu).

Tôi đã được cung cấp một trang web nơi nhà phát triển chọn sử dụng 'dữ liệu' để hiển thị nội dung của ô, nhưng tôi không thể tìm ra cách thêm một lớp vào <td>xung quanh dữ liệu.

Tôi đã đọc mã nguồn và tài liệu cho Table.php và tôi biết về cái mới #wrapper_attributes nhưng tôi không thể bẻ khóa cái này.

Tôi đã thử ít nhất bốn cách để thêm lớp và không có cách nào hoạt động.

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

Sau khi viết câu hỏi theo thuật ngữ chung, tôi đã quay lại để kiểm tra lại và đã xác định rằng Tùy chọn 5 trong OP có '#wrapper_attributes'cùng cấp độ của 'data'phần tử không hoạt động. Tôi tin rằng Drupal 8 đã tích cực lưu vào bảng, bởi vì những thay đổi của tôi không hiển thị ngay cả sau khi a drush cr.

Các quy tắc để thêm các lớp vào các bảng thông qua PHP phụ trợ là:

• Bảng lớp yêu cầu #attributes.
• Lớp TR hàng trong TBODY yêu cầu #attributes.
• Lớp tế bào TD bên trong TBODY yêu cầu #wrapper_attributes.
• Lớp hàng TR bên trong THEAD / TFOOT yêu cầu 'class'và 'data'các thùng chứa.
  Không #attributesphải cũng không #wrapper_attributeslàm việc ở đây.
• Lớp tế bào TH / TD bên trong THEAD / TFOOT yêu cầu 'class'và 'data'các thùng chứa.
  Không #attributesphải cũng không #wrapper_attributeslàm việc ở đây.
• Không có cách nào để thêm một lớp trực tiếp vào một thẻ <thead>hoặc <tfoot>mà không ghi đè lên một mẫu twig.

Dưới đây là ví dụ phổ biến nhất để thêm các lớp vào thẻ <tr>& <td>bên trong thẻ chính <tbody>, cũng như cho chính <table>thẻ chính:

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

Lưu ý rằng 'class'container sẽ chấp nhận một chuỗi hoặc một mảng, nhưng tôi đề nghị luôn luôn sử dụng một mảng.

Từ đây, câu chuyện trở nên phức tạp hơn. Nếu bạn cần thêm các lớp vào thẻ TR hoặc TD / TH trong khu vực THEAD / TFOOT, các quy tắc sẽ thay đổi hoàn toàn. Không #attributesphải cũng không #wrapper_attributeslàm việc bên trong #headervà #footercác phần và cố gắng sử dụng chúng tạo ra các hiệu ứng rất lạ.

Cấu trúc tối thiểu cho các bảng có cột dữ liệu đầu trang / chân trang trong Drupal 8 là:

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

Bạn phải thay đổi cấu trúc thực tế của dữ liệu và giới thiệu hai cấp độ của các mảng đa chiều bổ sung, để tận dụng 'class'chỉ số mảng yêu cầu sau đó cũng đưa ra 'data'chỉ mục mảng. Điều này áp dụng cả cho phần tử hàng và phần tử ô dữ liệu, như đã thấy trong ví dụ sau:

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

Ví dụ trên #headertạo ra:

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