2016-11-17 71 views
0

我想改变这在目前看起来复选框模板像CakePHP的3表单辅助复选框模板

'checkbox' => '<input type="checkbox" name="{{name}}" value="{{value}}"{{attrs}}>', 
'checkboxWrapper' => '{{label}}', 

生成HTML像

<div class="form-group"> 
<input class="form-control" type="hidden" name="active" value="0"> 
    <label for="active"> 
    <input type="checkbox" name="active" value="1" id="active"> 
    Active 
    </label> 
</div> 
</div> 

但我需要的是代码应该看起来像

<div class="checkbox m-b-15"> 
<input class="form-control" type="hidden" name="active" value="0"> 
<label> 
    <input type="checkbox" name="active" value="1" id="active"> 
    <i class="input-helper"></i> 
    Active 
</label> 
</div> 

我应该如何真正改变表单助手的模板和模板以便代码看起来像我需要的?

+1

你大概读[自定义表单助手采用模板(http://book.cakephp.org/3.0/en/views/助手/形式。html#customizing-the-templates-formhelper-uses)文档。向我们展示您尝试过的代码,并告诉我们有关不适用的具体细节。 –

回答

2

您可以使用nestingLabel表单模板来格式化您的复选框布局。 使用{{input}}{{hidden}}和标签

请在复选框之前使用以下代码。

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

参考:vendor/cakephp/cakephp/src/View/Helper/FormHelper.php
protected $_defaultConfig = [...]

0

您可以通过使用自定义窗口小部件编写自定义复选框,输入文字等! 请在这里阅读:https://book.cakephp.org/3.0/en/views/helpers/form.html#using-widgets

如果你仍然有麻烦,你可以随时使用我的例子。请记住,我正在使用完全成本的复选框css没有提供,这只是一个例子,以帮助您了解它是如何工作的。

你需要什么:

  1. 创建窗口小部件
  2. 装入小部件
  3. 负载在表单视图模板
  4. 渲染的复选框:)

为了编写自定义复选框,您需要创建一个扩展BasicWidget的CustomCheckboxWidget类。现在,您需要做的就是自定义您的渲染功能。

这是一个完整的例子:CustomCheckboxWidget

*使用您的自定义模板,你需要通过添加下面的几行App.View.php

'Form' => [ 
    'widgets' => [ 
    'custom' => ['App\View\Widget\CustomCheckboxWidget'] 
    ], 
], 

在初始化函数加载部件。 ..

在您查看的形式example.ctp只需添加:

$this->Form->setTemplates([ 
    'checkbox' => '<div class="{{checkboxstyle}}">'. 
    '<input type="checkbox" name="{{name}}" id="{{name}}" value="{{value}}"{{attrs}}>'. 
    '<label for="{{name}}"><span class="{{bold}}">{{text}}{{icon}}</span></label>'. 
    '{{error}}'. 
    '</div>' 
]); 

并呈现明显的自定义复选框:

<?= $this->Form->custom('field',[ 
    'hiddenField' => false, 
    'displayMessage' => true, 
    'checkboxstyle' => 'checkbox checkbox-danger', 
    'text' => 'Some label' 
    ]); 
?> 

问候,