Yii2.0-ActiveForm 表单组件

xiaoxiao2021-03-01  63

视图(view)

首先在模板头部引入ActiveForm和Html这里两个是很重要的

<?php use yii\bootstrap\ActiveForm; use yii\helpers\Html; ?>

文本框: textInput(); 密码框: passwordInput(); 单选框: radio() , radioList(); 复选框: checkbox() , checkboxList(); 下拉框: dropDownList(); 隐藏域: hiddenInput(); 文本域: textarea(['rows'=>3]); 文件上传:fileInput(); 提交按钮:submitButton(); 重置按钮:resetButtun();

form 头部设置

<?php $form = ActiveForm::begin([ // 传值类型 'method' => 'post', // 默认不写,提交到当前控制器方法,但也可以这么设置 'action' => \yii\helpers\Url::to(['user/index']), // 设置form的样式 'options' => [ // 上传文件设置 注意:与post方法配套使用 'enctype' => 'multipart/form-data', // 设置form的class 'class' => 'form-horizontal', ], // 为每一个input 设置 'fieldConfig' => [ // template是布局标签 是对input标签的重新部署 'template' => "{label}\n<div class=\"col-lg-5\">{input}</div>\n<div class=\"col-lg-5\">{error}</div>", // 设置label 的属性 添加class 'labelOptions' => ['class' => 'col-lg-2 control-label'], ], ]); ?>

text 标签

<?= $form->field($model, 'username')->textInput([ 'maxlength' => 20, // 最多输入20个字符 'minlength' => 6, // 最少输入6个字符 'placeholder' => '输入框描述信息', ]) ?>

在模板中解析后会附带一些布局样式 变成

<div class="form-group field-admin-adminemail"> <p class="help-block help-block-error"></p> <input maxlength =20 minlength=6 class="span12" name="Admin[username]" placeholder="输入框描述信息" type="text"> </div>

密码输入框

<?= $form->field($model, 'password')->passwordInput(['maxlength' => 20]) ?>

在模板中解析后的input变成

<input type="password" name="password" maxlength =20 />

单选框

<?= $form->field($model, 'sex')->radioList(['1' => '男', '0' => '女']) ?>

会根据sex的默认值来选择默认选项变成

<div id="admin-sex"> <div class="radio"><label><input name="Admin[sex]" value="1" checked="" type="radio"></label</div> <div class="radio"><label><input name="Admin[sex]" value="0" type="radio"></label></div></div>

下拉列表

<?php echo $form->field($model, 'edu')->dropDownList(['1' => '大学', '2' => '高中', '3' => '初中'], ['prompt' => '请选择', 'style' => 'width:120px']) ?>

在模板中解析后变成

<div class="form-group field-admin-edu"> <p class="help-block help-block-error"></p> <select id="admin-edu" class="form-control" name="Admin[edu]" style="width:120px"> <option value="">请选择</option> <option value="1" selected="">大学</option> <option value="2">高中</option> <option value="3">初中</option> </select> </div>

文件上传

<?php echo $form->field($model, 'file')->fileInput() ?>

在模板解析后变成

<div class="form-group field-admin-sex"> <p class="help-block help-block-error"></p> <input name="Admin[file]" value="" type="hidden"> <input id="admin-file" name="Admin[file]" value="1" type="file"> </div>

复选框

<?php echo $form->field($model, 'hobby')->checkboxList(['0' => '篮球', '1' => '足球', '2' => '羽毛球', '3' => '乒乓球']) ?>

在模板中解析后变成

<div class="form-group field-admin-sex"> <p class="help-block help-block-error"></p> <input name="Admin[hobby]" value="" type="hidden"> <div id="admin-hobby"> <div class="checkbox"><label><input name="Admin[hobby][]" value="0" type="checkbox"> 篮球</label></div> <div class="checkbox"><label><input name="Admin[hobby][]" value="1" checked="" type="checkbox"> 足球</label></div> <div class="checkbox"><label><input name="Admin[hobby][]" value="2" type="checkbox"> 羽毛球</label></div> <div class="checkbox"><label><input name="Admin[hobby][]" value="3" type="checkbox"> 乒乓球</label></div> </div> </div>

复选框2 有点想单选因为只有0和1两个值,但是可以手动添加多个重复选择

<?php echo $form->field($model, 'basketball')->checkbox(); ?> <?php echo $form->field($model, 'football')->checkbox(); ?>

在模板中解析后变成

<div class="checkbox"> <label for="admin-basketball"> <input name="Admin[basketball]" value="0" type="hidden"><input id="admin-basketball" name="Admin[hobby]" value="1" checked="" type="checkbox"> basketball </label> <p class="help-block help-block-error"></p> </div> <div class="checkbox"> <label for="admin-football"> <input name="Admin[football]" value="0" type="hidden"><input id="admin-football" name="Admin[football]" value="1" checked="" type="checkbox"> football </label> <p class="help-block help-block-error"></p> </div>

文本域

<?php echo $form->field($model, 'sex', [ // 可以自定义,并会覆盖掉form中设置的属性 'template' => '<div class="form-group">{label}<div class="col-lg-6">{input}</div>{error}</div>', 'labelOptions' => ['class' => 'col-lg-2 control-label'], ])->textarea([ 'rows' => 4, // 可输入多少行 'placeholder' => '输入框描述内容' ]) ?>

在模板中解析后变成

<div class="form-group field-admin-info"> <div class="form-group"> <label class="col-lg-2 control-label" for="admin-info">info</label> <div class="col-lg-6"> <textarea id="admin-info" class="form-control" name="Admin[info]" rows="4" placeholder="输入框描述内容">1</textarea> </div> <p class="help-block help-block-error"></p> </div> </div>

隐藏输入域

<?php echo $form->field($model, 'text')->hiddenInput(['value' => 1]) ?>

在模板中解析后 input 变成

<input id="admin-text" class="form-control" name="Admin[text]" value="1" type="hidden" />

表单提交按钮 提示:标签中可以使用三木运算符来改变文字样式 如:$model->isadd ? ‘添加’ : ‘修改’

?php echo Html::submitButton($model->isadd ? '添加' : '修改', ['class' => $model->isadd ? 'btn btn-primary' : ' btn-glow primary login']); ?>

在模板中解析后变成

<button type="submit" class="btn btn-primary">添加</button><button type="submit" class="btn-glow primary login">修改</button>

表单重置按钮

<?php echo Html::resetButton('重置', ['class' => 'btn btn-info']) ?>

在模板中解析后变成

<button type="reset" class="btn btn-info">重置</button>

// 控制器引入ArrayHelper

use yii\helpers\ArrayHelper;

方法中

//从数据库取出数据 $Admin= Admin::find()->all(); $dataList = ArrayHelper::map($Admin, 'id', 'name'); //$dataList 就变成 Array ( [0] => 张三 [1] => 李四 [2] => 王五 )

模板中

<?php echo $form->field($model, 'sex')->radioList($dataList) ?> <?php echo $form->field($model, 'edu')->dropDownList($dataList, ['prompt' => '请选择', 'style' => 'width:120px']) ?>

checkBoxList 自定义样式

方法一

<?php $model->test=($model->test)?:[1,2,3]?> <?= $form->field($model, 'test', [ 'options'=>['class' => 'form-group form-md-checkboxes'], 'template' => '{label}<div class="col-md-9 md-checkbox-inline">{input}</div>{hint}{error}', ] )->checkBoxList($model->test(), [ 'item' => function($index, $label, $name, $checked, $value) { //$index 数组键名 //$label 标签名 //$name 设置checkbox的name //$checked 默认选择 //$value 值 $checked=$checked?"checked":""; $return = '<div class="md-checkbox">'; $return .= '<input type="checkbox" id="' . $name . $value . '" name="' . $name . '" value="' . $value . '" class="md-checkbox" '.$checked.'>'; $return .= '<label for="' . $name . $value . '"><span></span><span class="check"></span><span class="box"></span>' . ucwords($label) . '</label>'; $return .= '</div>'; return $return; } ]) ?>

方法二 item : 在生成每个checkbox表单的时候,都会回调这个函数,如果设置了则使用返回值作为checkbox的表单,否则使用static::checkbox函数来生成每个checkbox表单,函数格式为: function ($index,$label, $name, $checked, $value)

<?php $model->test=($model->test)?:[1,2,3]?> <?= Html::checkboxList('children', [], $model->test, ['class' => 'col-lg-5', 'item' => function ($index, $label, $name, $checked, $value) { //$index 数组键名 //$label 标签名 //$name 设置checkbox的name //$checked 默认选择 //$value 值 $checkStr = $checked ? "checked" : ""; return '<label><input type="checkbox" style="margin:10px" name="' . $name . '" value="' . $value . '" ' . $checkStr . ' class="class' . $index . '" data-uid="user' . $index . '">' . $label . '</label>'; }]); ?>

方法三 最简单

<?php $model->sex=($model->test)?:[1,2,3]?> <?= Html::checkboxList('children', [], $model->test, ['class' => 'col-lg-5','itemOptions'=>array('style'=>'margin:10px')]); ?>
转载请注明原文地址: https://www.6miu.com/read-3650330.html

最新回复(0)