Question

我正在尝试更改目前看起来像

的复选框模板

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

我应该如何实际更改模板以及FormHelper的哪些模板，以便代码看起来像我需要的？

Answer 1

您可以使用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 = [...]

Answer 2

您可以使用自定义小部件编写自定义复选框，输入文本等！请在此处阅读：https://book.cakephp.org/3.0/en/views/helpers/form.html#using-widgets

如果你仍然遇到麻烦，你可以随时使用我的例子。请记住，我没有提供完全经过验证的复选框css，这只是一个示例，以帮助您了解它的工作原理。

你需要什么：

创建小部件
加载小部件
在表单视图中加载模板
渲染复选框：）

为了编写自定义复选框，您需要创建一个扩展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'
   ]);
?>

此致

Cakephp 3表单助手复选框模板

2 个答案: