如何创建一个多复选框小部件，其中标签由多个值组成，这些值应放置在单个 HTML 元素中？

Question

待办事项

带有键值对的复选框列表。
密钥 = ID。
值（标签）= 三个值的组合。仅用于向用户显示数据。

我现在拥有的：

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

我试过的：

$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>
            ';
        }
    );
});

当前模板 (.ctp)

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

现在发生了什么

html 打印为 'plain' 文本。

我真正喜欢的是每个复选框都放在 <div class="row> 中，复选框也放在 <div class="large-3 columns"> 中，每隔三个值也是如此。

编辑

像这样

决赛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

这应该可以通过对各个标签组件使用 complex value syntax for the options, and custom templates with template variables 来实现。

您需要修改 checkboxWrapper 和 nestingLabel 模板，前者添加行包装器，后者添加列，类似于[=28] =]

'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>',

现在可以为标签小部件提供自定义模板变量 text1、text2 和 text3。为了实现这一点，您传递给表单助手的选项需要像这样构造

[
    [
        // 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' => [
            // ...
        ]
    ],
    // ...
]

其中 value 是行 ID，text 1、text 2 和 text 3 是您的其他行值。

由于这纯粹是为了演示目的并且高度特定于表单帮助程序，因此您可能应该在视图层中构建选项，例如直接在模板中，并且从您的控制器中传递非格式化查询（$a) 到视图，类似于

$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' => /* ... */,
    ]
]);

另见

如何创建一个多复选框小部件，其中标签由多个值组成，这些值应放置在单个 HTML 元素中？

How to create a multi-checkbox widget, where labels consist of multiple values that should be placed in individual HTML elements?

checkbox

templates

cakephp

widget

cakephp-3.0