['ডেটা'] সমেত একটি দ্রুপাল টেবিল কক্ষে একটি শ্রেণি যুক্ত করুন


11

Drupal এর 8-এ টেবিল রেন্ডারিং এখনও পিএইচপি আউট সারি এবং কলামের বহু মাত্রিক অ্যারে Drupal এর 7. আপনি নির্মাণ মত অনেক করে একটি মধ্যে Drupal এর বদলে দেয় হয় <tr>এবং <td>যথাক্রমে s। এখনও এই বিভ্রান্তিকর Drupalism হিসাবে পরিচিত 'data'যা আপনাকে সেল ডেটা হিসাবে অ্যারে উপাদানগুলি রেন্ডার করতে দেয় (ডেটা অ্যাট্রিবিউটগুলির সাথে বিভ্রান্ত না হয়)।

আমাকে এমন একটি সাইট দেওয়া হয়েছে যেখানে বিকাশকারী ঘরের বিষয়বস্তু রেন্ডার করতে 'ডেটা' ব্যবহার করতে পছন্দ করেছেন, তবে কীভাবে <td>ডেটা চারপাশে কোনও শ্রেণি যুক্ত করবেন তা আমি বুঝতে পারি না ।

আমি টেবিল.এফপি এর জন্য সোর্স কোড এবং ডকুমেন্টেশন পড়েছি এবং আমি নতুন সম্পর্কে সচেতন #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'],
  ],
];

উত্তর:


12

প্রশ্নটি সাধারণ শর্তে লেখার পরে, আমি আবার পরীক্ষায় ফিরে এসেছি এবং নির্ধারিত করেছি যে ওপিতে বিকল্পের '#wrapper_attributes'একই স্তরের 5 বিকল্পটি 'data'কাজ করে। আমি বিশ্বাস করি দ্রুপাল 8 আক্রমণাত্মকভাবে টেবিলটি ক্যাশে করছিল, কারণ আমার পরিবর্তনগুলি একের পরেও দেখাচ্ছিল না drush cr

ব্যাকএন্ড পিএইচপি এর মাধ্যমে টেবিলগুলিতে ক্লাস যুক্ত করার নিয়মগুলি হ'ল:

  • টেবিল বর্গ প্রয়োজন #attributes
  • TBODY এর মধ্যে টিআর সারির শ্রেণীর প্রয়োজন #attributes
  • TBODY এর মধ্যে টিডি সেল শ্রেণীর প্রয়োজন #wrapper_attributes
  • THAD / TFOOT এর মধ্যে টিআর সারির শ্রেণীর প্রয়োজন 'class'এবং 'data'ধারক।
    না এখানে কাজ #attributesনা #wrapper_attributes
  • THAD / TFOOT এর মধ্যে TH / TD সেল শ্রেণীর জন্য প্রয়োজন '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'ধারকটি স্ট্রিং বা একটি অ্যারে গ্রহণ করবে, তবে আমি সর্বদা একটি অ্যারে ব্যবহার করার পরামর্শ দিই।

এখান থেকে গল্পটি আরও জটিল হয়ে ওঠে। আপনার যদি একটি THAD / TFOOT অঞ্চলের ভিতরে টিআর বা টিডি / টিএইচ ট্যাগগুলিতে ক্লাস যুক্ত করা প্রয়োজন, নিয়মগুলি সম্পূর্ণরূপে পরিবর্তিত হয়। ভিতরে বা বিভাগগুলির মধ্যেও #attributesনয় এবং এগুলি ব্যবহার করার চেষ্টা করা খুব অদ্ভুত প্রভাব তৈরি করে।#wrapper_attributes#header#footer

ড্রুপাল 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>

আমি টেবিল শিরোনামে একটি কলস্পান ব্যবহার করার চেষ্টা করছি তবে আপনার শেষ উদাহরণটি ব্যবহার করে আমি এই ত্রুটিগুলি পেয়েছি:
অ্যাড্রিয়ান সিড আলমাগুয়ার

ব্যবহারকারীর ত্রুটি: "0" হ'ল দ্রুপাল ore কোর \ রেন্ডার \ উপাদান: শিশু () (কোর / লিব / দ্রুপাল / কোর / রেন্ডার / এলিমেন্ট.এফপি এর লাইন 97) এ একটি অবৈধ রেন্ডার অ্যারে কী। ব্যবহারকারীর ত্রুটি: "শ্রেণি" হ'ল দ্রুপাল \ কোর \ রেন্ডার \ উপাদান: শিশু () (কোর / লিব / দ্রুপাল / কোর / রেন্ডার / এলিমেন্ট.এফপি এর লাইন 97) এ একটি অবৈধ রেন্ডার অ্যারে কী। ব্যবহারকারীর ত্রুটি: "ডেটা" হ'ল দ্রুপাল ore কোর \ রেন্ডার \ এলিমেন্ট :: শিশু () (কোর / লিব / দ্রুপাল / কোর / রেন্ডার / এলিমেন্ট.এফপি এর লাইন 97) এ একটি অবৈধ রেন্ডার অ্যারে কী। ব্যবহারকারীর ত্রুটি: "কলস্পান" হ'ল দ্রুপাল ore কোর \ রেন্ডার \ এলিমেন্ট :: শিশু () (কোর / লিব / দ্রুপাল / কোর / রেন্ডার / এলিমেন্ট.এফপি এর লাইন 97) এ একটি অবৈধ রেন্ডার অ্যারে কী।
অ্যাড্রিয়ান সিড

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.