Wie erstellt man ein Multi-Checkbox-Widget, bei dem Labels aus mehreren Werten bestehen, die in einzelne HTML-Elemente eingefügt werden sollen?

Question

ERLEDIGEN

• Checkboxliste mit Schlüssel - Wert-Paaren.
• Schlüssel = id.
• Wert (Label) = drei Werte kombiniert. Wird nur zur Anzeige von Daten für den Benutzer verwendet.

Was ich habe jetzt:

$a->formatResults(function($results) { 
    return $results->combine(
     'id', 
     function($row) { 
      return ' | ' . $row['_matchingData']['A']->name . ' |' . $row['_matchingData']['B']->name . '| . $row['C'] . '"'; 
     } 
    ); 
}); 

Was ich versucht:

$a->formatResults(function($results) { 
    return $results->combine(
     'id', 
     function($row) { 
      return ' 
       <div class="row"> 
        <div class="large-4 columns"> 
         ' . $row['_matchingData']['A']->name . ' 
        </div> 
        <div class="large-4 columns"> 
         ' . $row['_matchingData']['B']->name . ' 
        </div> 
        <div class="large-4 columns"> 
         ' . $row['C'] . ' 
        </div> 
       </div> 
      '; 
     } 
    ); 
}); 

Aktuelle Vorlage (.ctp)

echo $this->Form->input('a._ids', [ 
    'options' => $a, 
    'multiple' => 'checkbox', 
    'label' => false, 
    'templates' => [ 
     'inputContainer' => '<div id="scroll_a" class="scrollable_input">{{content}}</div>' 
    ] 
]); 

Was nun

Die HTML wird gedruckt als 'Ebene' text passiert.

Was ich eigentlich gerne haben, ist, dass jedes Kontrollkästchen in einem <div class="row> platziert ist, und dass das Kontrollkästchen in einem <div class="large-3 columns"> und alle drei anderen Werte auch platziert wird.

bearbeiten

So etwas wie dieses

Finale html

<div id="scroll_a" class="scrollable_input"> 
<div class="checkbox"> 

    <div class="row"> 
     <label for="users-ids-221"> 
      <div class="large-3 columns"> 
       <input id="users-ids-221" type="checkbox" value="221" name="users[_ids][]"> 
      </div> 
      <div class="large-3 columns"> 
       ' . $row['_matchingData']['A']->name . ' 
      </div> 
      <div class="large-3 columns"> 
       ' . $row['_matchingData']['B']->name . ' 
      </div> 
      <div class="large-3 columns"> 
       ' . $row['C'] . ' 
      </div> 
     </label> 
    </div> 

</div> 

Answer 1

Dies sollte möglich sein, indem die complex value syntax für die Optionen und benutzerdefinierte Vorlagen mit template variables für die einzelnen Label-Komponenten.

Sie müssen die checkboxWrapper und die nestingLabel Vorlage ändern, die erstere die Reihe Wrapper und diese hinzufügen, um die Spalten hinzufügen, etwas entlang der Linien von

'checkboxWrapper' => '<div class="checkbox"><div class="row">{{label}}</div></div>', 
'nestingLabel' => 
    '{{hidden}}<label{{attrs}}>' . 
     '<div class="large-3 columns">{{input}}</div>' . 
     '<div class="large-3 columns">{{text1}}</div>' . 
     '<div class="large-3 columns">{{text2}}</div>' . 
     '<div class="large-3 columns">{{text3}}</div>' . 
    '</label>', 

nun das Label-Widget kann mit der benutzerdefinierten Vorlage vars text1, text2 und text3 gefüttert werden. Um dies zu erreichen, dass die Optionen, die Sie in dem Formular Helfer sind vorbei müßten wie diese

[ 
    [ 
     // the `text` and `value` keys are required in order for the widget to properly 
     // recognize this syntax, the `text` key will not be used in the custom template 
     // but it must still exist and is not allowed to be `null`, so just fill it with 
     // something else 
     'text' => false, 
     'value' => 1, 
     'templateVars' => [ 
      'text1' => 'text 1', 
      'text2' => 'text 2', 
      'text3' => 'text 3' 
     ] 
    ], 
    [ 
     'text' => false, 
     'value' => 2, 
     'templateVars' => [ 
      // ... 
     ] 
    ], 
    // ... 
] 

strukturiert werden, wo value die Zeilen-ID sein würde und text 1, text 2 und text 3 würden Ihre andere Zeilenwerte sein .

Da dies rein zu Präsentationszwecken und sehr form helperspezifisch ist, sollten Sie die Optionen im View-Layer zum Beispiel direkt in der Vorlage erstellen und von Ihrem Controller einfach die nicht formatierte Abfrage ($a) an übergeben die Aussicht, so etwas wie

$options = $a->map(function ($row) { 
    return [ 
     'text' => false, 
     'value' => $row['id'], 
     'templateVars' => [ 
      // template variables are not going to be escaped, so don't forget to 
      // apply it on your own when necessary 
      'text1' => h($row['_matchingData']['A']->name), 
      'text2' => h($row['_matchingData']['B']->name), 
      'text3' => h($row['C']), 
     ] 
    ]; 
}); 

echo $this->Form->input('a._ids', [ 
    'options' => $options, 
    'multiple' => 'checkbox', 
    'label' => false, 
    'templates' => [ 
     'checkboxWrapper' => /* ... */, 
     'nestingLabel' => /* ... */, 
     'inputContainer' => /* ... */, 
    ] 
]); 

Siehe auch

• Cookbook > Views > Helpers > Form > Creating Select Pickers
• Cookbook > Views > Helpers > Form > Adding Additional Template Variables to Templates
• Cookbook > Collections > Iterating > Cake\Collection\Collection::map()
• API > \Cake\View\Widget\MultiCheckboxWidget::render()