เพิ่มคลาสลงในเซลล์ตาราง Drupal ที่มี ['data']

ใน Drupal 8 ตารางการเรนเดอร์ยังคงเหมือน Drupal 7 คุณสร้างอาร์เรย์หลายมิติของแถวและคอลัมน์ใน PHP ที่ Drupal แปลงเป็น a <tr>และ<td>s ตามลำดับ ยังคงมี Drupalism ที่สับสนที่รู้จักกันในชื่อนี้'data'ซึ่งช่วยให้คุณเพิ่มองค์ประกอบอาร์เรย์แสดงผลเป็นข้อมูลเซลล์ (เพื่อไม่ให้สับสนกับแอตทริบิวต์ของข้อมูล)

ฉันได้รับเว็บไซต์ที่ผู้พัฒนาเลือกใช้ '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'],
  ],
];

หลังจากเขียนคำถามโดยใช้คำศัพท์ทั่วไปฉันได้กลับไปทดสอบอีกครั้งและได้พิจารณาว่าตัวเลือก 5 ใน OP ด้วย'#wrapper_attributes'ในระดับเดียวกันของ'data'องค์ประกอบใช้งานได้ ผมเชื่อว่า Drupal 8 drush crอุกอาจแคชโต๊ะเพราะการเปลี่ยนแปลงของฉันไม่ได้แสดงขึ้นแม้หลังจากที่

กฎสำหรับการเพิ่มคลาสในตารางผ่านแบ็กเอนด์ PHP คือ:

• #attributesตารางเรียนต้อง
• ระดับแถว TR ภายใน TBODY #attributesต้อง
• ระดับเซลล์ TD ภายใน TBODY #wrapper_attributesต้อง
• คลาส TR แถวภายใน THEAD / TFOOT ต้องการ'class'และ'data'คอนเทนเนอร์
  ทั้ง#attributesมิได้#wrapper_attributesทำงานที่นี่
• คลาสเซลล์ TH / TD ภายใน THEAD / 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'คอนเทนเนอร์จะยอมรับสตริงหรืออาร์เรย์ แต่ฉันขอแนะนำให้ใช้อาร์เรย์เสมอ

จากที่นี่เรื่องราวมีความซับซ้อนมากขึ้น หากคุณต้องการเพิ่มคลาสในแท็ก TR หรือ TD / TH ภายในพื้นที่ THEAD / TFOOT กฎจะเปลี่ยนโดยสมบูรณ์ ทั้ง#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>