如何在CakePHP 4中自定义多个复选框

ne5o7dgx  于 2022-11-11  发布在  PHP
关注(0)|答案(1)|浏览(164)

我正在添加多个复选框,但面临的问题,添加类到父div。
HTML输出应如下所示

<div class="custom-control custom-control-primary custom-checkbox"> 
    <input type="checkbox" class="custom-control-input" id="colorCheck1" checked=""> 
    <label class="custom-control-label" for="colorCheck1">Primary</label> 
</div>

我正在尝试使用此代码

<?php 
$list = ['1'=>'Select 1','2'=>'Select 2']; /*Array of list */

echo $this->Form->select('profile_ids', $list, [ 
    'multiple' => 'checkbox',
    'class'=>'custom-control-input', 
    'label' => [
        'class' => 'custom-control-label'
    ], 
    'templates' => [
        'inputContainer' => '<div class="custom-control custom-control-primary custom-checkbox">{{content}}</div>'
    ] 
]);

而我得到的html代码不是我想要的

<div class="checkbox">
    <label class="custom-control-label" for="profile-ids-13">
        <input type="checkbox" name="profile_ids[]" value="13" id="profile-ids-13" class="custom-control-input" templates="<div class=&quot;custom-control custom-control-primary custom-checkbox&quot;>{{content}}</div>">default
    </label>
</div>

请帮助如何获取所需的复选框。
谢谢

vhipe2zx

vhipe2zx1#

templates选项只能与FormHelper::control()方法一起使用,特定于元素的方法将无法识别它,并且通常只使用为表单帮助器配置的内容,并且只使用生成特定控件所需的内容。
此外,多复选框控件使用与单个复选框不同的模板。对于多复选框,inputContainer将是整个复选框集的 Package 器,而不是单个复选框本身的 Package 器,为此,您必须改为自定义checkboxWrapper。最重要的是,需要对nestingLabel模板进行更改,以便将输入放置在标签之外。

直接创建特定元素

因此,如果您想直接使用select(),那么您必须配置表单助手的全局模板:

$this->Form->setTemplates([
    'checkboxWrapper' => '<div class="custom-control custom-control-primary custom-checkbox">{{label}}</div>',
    'nestingLabel' => '{{hidden}}{{input}}<label{{attrs}}>{{text}}</label>',
]);

$list = [
    1 => 'Select 1',
    2 => 'Select 2',
];

echo $this->Form->select('profile_ids', $list, [
    'multiple' => 'checkbox',
    'class'=>'custom-control-input',
    'label' => [
        'class' => 'custom-control-label'
    ],
]);

这将创建以下HTML:

<input type="hidden" name="profile_ids" id="profile-ids" value=""/>
<div class="custom-control custom-control-primary custom-checkbox">
    <input type="checkbox" name="profile_ids[]" value="1" id="profile-ids-1" class="custom-control-input">
    <label class="custom-control-label" for="profile-ids-1">Select 1</label>
</div>
<div class="custom-control custom-control-primary custom-checkbox">
    <input type="checkbox" name="profile_ids[]" value="2" id="profile-ids-2" class="custom-control-input">
    <label class="custom-control-label" for="profile-ids-2">Select 2</label>
</div>

如果你想让模板只应用于这个select()调用,那么你可以在设置模板之前调用$this->Form->templater()->push();,在调用$this->Form->select(...)之后调用$this->Form->templater()->pop();,这样当前的模板状态会被预先缓冲,并在你生成元素之后恢复。

使用control()创建元素

如果您想使用control(),那么您需要注意label选项不会影响单个复选框的标签,但会影响 Package 器的标签。为了配置嵌套标签,您必须在选择选项中传递标签选项,或者在nestingLabel模板中硬编码属性。无论如何您都必须修改它:

$list = [
    [
        'label' => [
            'class' => 'custom-control-label'
        ],
        'value' => 1,
        'text' => 'Select 1',
    ],
    [
        'label' => [
            'class' => 'custom-control-label'
        ],
        'value' => 2,
        'text' => 'Select 2',
    ],
];

echo $this->Form->control('profile_ids', [
    'type' => 'select',
    'multiple' => 'checkbox',
    'options' => $list,
    'class' => 'custom-control-input',
    'templates' => [
        'checkboxWrapper' => '<div class="custom-control custom-control-primary custom-checkbox">{{label}}</div>',
        'nestingLabel' => '{{hidden}}{{input}}<label{{attrs}}>{{text}}</label>',
    ]
]);

或使用模板中的硬编码标签属性:

$list = [
    1 => 'Select 1',
    2 => 'Select 2',
];

echo $this->Form->control('profile_ids', [
    'type' => 'select',
    'multiple' => 'checkbox',
    'options' => $list,
    'class' => 'custom-control-input',
    'templates' => [
        'checkboxWrapper' => '<div class="custom-control custom-control-primary custom-checkbox">{{label}}</div>',
        'nestingLabel' => '{{hidden}}{{input}}<label class="custom-control-label"{{attrs}}>{{text}}</label>',
    ]
]);

这两种方法都将生成以下HTML:

<div class="input select">
    <label for="profile-ids">Profile Ids</label>
    <input type="hidden" name="profile_ids" id="profile-ids" value=""/>
    <div class="custom-control custom-control-primary custom-checkbox">
        <input type="checkbox" name="profile_ids[]" value="1" id="profile-ids-1" class="custom-control-input">
        <label class="custom-control-label" for="profile-ids-1">Select 1</label>
    </div>
    <div class="custom-control custom-control-primary custom-checkbox">
        <input type="checkbox" name="profile_ids[]" value="2" id="profile-ids-2" class="custom-control-input">
        <label class="custom-control-label" for="profile-ids-2">Select 2</label>
    </div>
</div>

ps.你可能想 checkout 像friendsofcake/bootstrap-ui这样的插件,它可以透明地为你做所有这些。

另请参阅

*Cookbook〉视图〉帮助程序〉表单〉自定义模板FormHelper使用
*Cookbook〉视图〉帮助程序〉表单〉控件选项

相关问题