yii2.0 Activeform表单部分组件使用方法
yii2 2017-02-16 14:38:31

ActiveForm 改成ajax提交

ActiveForm 改成Layui的表单风格

ActiveInput / ActiveDropDownList

activeCheckboxList

 

PHP Code复制内容到剪贴板
  1. use yii\widgets\ActiveForm;  
  2.   
  3. $form = ActiveForm::begin([  
  4.     'layout' => 'horizontal', // default / horizontal  
  5.     'fieldConfig' => [  
  6.         'template' => "{label}\n{beginWrapper}\n{input}\n{hint}\n{error}\n{endWrapper}",  
  7.         'horizontalCssClasses' => [  
  8.             'label' => 'col-sm-4',  
  9.             'offset' => 'col-sm-offset-4',  
  10.             'wrapper' => 'col-sm-8',  
  11.             'error' => '',  
  12.             'hint' => '',  
  13.         ],  
  14.     ],  
  15. ]);  
  16.   
  17.   
  18. ActiveForm::end();  

 

 

 

PHP Code复制内容到剪贴板
  1. 文本框:textInput();  
  2. 密码框:passwordInput();  
  3. 单选框:radio(),radioList();  
  4. 复选框:checkbox(),checkboxList();  
  5. 下拉框:dropDownList();  
  6. 隐藏域:hiddenInput();  
  7. 文本域:textarea(['rows'=>3]);  
  8. 文件上传:fileInput();  
  9. 提交按钮:submitButton();  
  10. 重置按钮:resetButtun();   

 

获取当前model的所有属性：

QQ截图20180306104613.jpg

PHP Code复制内容到剪贴板
  1. $model->attributes()  

 

$model->getAttribute("name")  //获取值

 

Html::getInputName($model, 'unzip') // 获取根据active表单生成的name值

$model->getAttributeLabel("password") // 获取指定model下指定字段的label字符串

$model->isAttributeRequired("username")  // 获取是否为必填项

 

use yii\widgets\ActiveForm;
use yii\helpers\Html;

 

PHP Code复制内容到剪贴板
  1. <?php  
  2. $form = ActiveForm::begin(['action' => ['test/getpost'],'method'=>'post',]); ?>  
  3.    
  4. <? echo $form->field($model, 'username')->textInput(['maxlength' => 20]) ?>  
  5.   
  6. <? echo $form->field($model, 'password')->passwordInput(['maxlength' => 20]) ?>  
  7.   
  8. <? echo $form->field($model, 'sex')->radioList(['1'=>'男','0'=>'女']) ?>  
  9.   
  10. <? echo $form->field($model, 'edu')->dropDownList(['1'=>'大学','2'=>'高中','3'=>'初中'], ['prompt'=>'请选择','style'=>'width:120px']) ?>  
  11.   
  12. <? echo $form->field($model, 'file')->fileInput() ?>  
  13.   
  14. <? echo $form->field($model, 'hobby')->checkboxList(['0'=>'篮球','1'=>'足球','2'=>'羽毛球','3'=>'乒乓球']) ?>  
  15.   
  16. <? echo $form->field($model, 'info')->textarea(['rows'=>3]) ?>  
  17.   
  18. <? echo $form->field($model, 'userid')->hiddenInput(['value'=>3]) ?>  
  19.   
  20. <? echo Html::submitButton('提交', ['class'=>'btn btn-primary','name' =>'submit-button']) ?>  
  21.      
  22. <? echo Html::resetButton('重置', ['class'=>'btn btn-primary','name' =>'submit-button']) ?>  
  23.   
  24. <?php ActiveForm::end(); ?>  

 

隐藏label：

PHP Code复制内容到剪贴板
  1. <?= $form->field($model, 'plan_id')->hiddenInput(['value' => $model->plan_id?$model->plan_id:\Yii::$app->request->get("id")])->label(false); ?>  

 

隐藏文本框：

PHP Code复制内容到剪贴板
  1. <?= Html::hiddenInput("input-name", "3") ?>  

 

 

给input替换class名称：

XML/HTML Code复制内容到剪贴板
  1. <?= $form->field($model, 'content',[  
  2.                     'inputOptions' => ['class'=>'comment_content']  
  3.                 ])->textInput()->label(false) ?>  

 

 

select 给默认值 ，并禁用，不允许选择：（默认值 在controller里面给如：$model->type=1）

PHP Code复制内容到剪贴板
  1. <?=  
  2. $form->field($model, 'participate_type')  
  3.     ->radioList(Plan::getPlanParticipateType(),  
  4.         ['unselect'=>null,'itemOptions'=>['disabled' => 'disabled']]  
  5.     )  
  6.     ->label(false)  
  7. ?>  

 

 阻止表单提交/表单提交之前动作

PHP Code复制内容到剪贴板
  1. <?php $form = ActiveForm::begin(['action' => Url::to(['/comment/create']),'fieldConfig' => [  'template' => "{label}{input}"],'options' => ['data-pjax' => true,'id'=>'create_comment','onsubmit' => 'javascript:return false;'] ]); ?>  

 

 

YII2 activeform样式修改

PHP Code复制内容到剪贴板
  1. <?php $form = ActiveForm::begin([  
  2.     'options' => [  
  3.         'class' => '',  
  4.         'data-ajax' => '1',  
  5.         'data-callback' => 'window.location.href=SITE_URL',  
  6.     ],  
  7.     'fieldConfig' => [  
  8.         'template' => "<div class='ui-form-item ui-form-item-show ui-border-b'>{label}{input}</div>{error}",  
  9.     ],  
  10. ]); ?>  
  11.   
  12. <?= $form->field($model, 'email') ?>  
  13. <?= $form->field($model, 'phone') ?>  
  14. <?= $form->field($model, 'password')->passwordInput() ?>  
  15. <?= $form->field($model, 're_password')->passwordInput() ?>  
  16. <div class="ui-btn-wrap">  
  17.     <?= Html::submitButton('注册', ['class' => 'ui-btn-lg ui-btn-primary']) ?>  
  18. </div>  
  19. <?php ActiveForm::end(); ?>  

 

 

PHP Code复制内容到剪贴板
  1. <?php $form = ActiveForm::begin([  
  2. 'options'=>['class' => 'form-horizontal'],  
  3. 'fieldConfig' => [  
  4. 'template' => '{label}<div class="col-sm-4">{input}</div><div class="col-sm-5">{error}</div>',  
  5. 'labelOptions' => ['class' => 'col-sm-2 control-label'],  
  6. ],  
  7. ]); ?>  
  8.   
  9. <!--正常表单-->  
  10.                     <?= $form->field($model, 'username')->textInput(['maxlength' => true]) ?>  
  11.   
  12.                     <?= $form->field($model, 'phone')->textInput(['maxlength' => true]) ?>  
  13.   
  14.                     <?= $form->field($model, 'company_name')->textInput(['maxlength' => true]) ?>  
  15.   
  16.                     <?= $form->field($model, 'need')->textarea(['rows' => 6]) ?>  
  17.   
  18.   
  19.   
  20.     <?= $form->field($model, 'title')->textInput(['maxlength' => 255,'placeholder'=>'请输入专题名称'])->label('专题名称') ?>    
  21.     <?= $form->field($model, 'img_path',[      
  22.             'template' => "{label}\n<div class=\"col-lg-3\">{input}</div>\n<div class=\"col-lg-2\"><label for=\"uploadImg\" class=\"btn btn-default forfocus1\" onclick=\"changeImg(1,'forfocus');\">选择图片<img src=\"\"></label></div>\n{error}",      
  23.             'labelOptions' => ['class' => 'col-lg-2 control-label'],    
  24.         ])->textInput(['id'=>'img_path','maxlength' => 255,'placeholder'=>'专题图片','readonly'=>true])->label('专题名称') ?>    
  25.     <?= $form->field($model, 'showImg',[      
  26.             'template' => "{label}\n<div id=\"showImg\" class='col-lg-10'></div>",      
  27.             'labelOptions' => ['class' => 'col-lg-2 control-label'],    
  28.         ])->label('图片预览') ?>    
  29.     <?= $form->field($model, 'link_to')->textInput(['maxlength' => 255,'placeholder'=>'请输入专题链接'])->label('专题链接') ?>    
  30.     </div>    
  31.             
  32.     <div class="form-group" style="margin-left: 50px;">    
  33.         <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>    
  34.     </div>    
  35.     <?php ActiveForm::end(); ?>    

 

 

activeForm生成的表单中，每行field都会加一个div：<div class='form-group'>，

想让它不生成的选项：

PHP Code复制内容到剪贴板
  1. <?php $form = ActiveForm::begin([  
  2.         'id' => 'form-signup',  
  3.         'options' => [  
  4.             'class' => 'layui-form',  
  5.         ],  
  6.         'fieldConfig' => [  
  7.             'options' => [  
  8.                 'tag' => false, //不生成上一层的<div class='form-group'>  
  9.             ],  
  10.         ],  
  11.     ]); ?>  

 

如果有错误提示的时候，div会加一个class：has-error ，想让它改一个css名称：

PHP Code复制内容到剪贴板
  1. <?php $form = ActiveForm::begin([  
  2.     'errorCssClass' => 'error'  
  3. ]); ?>  

 

替换掉错误提示的div的样式，替换掉help-block：

PHP Code复制内容到剪贴板
  1. <?php $form = ActiveForm::begin([  
  2.     'fieldConfig' => [  
  3.         'errorOptions' => [  
  4.             'class' => 'layui-form-mid layui-word-aux', //替换掉help-block  
  5.         ]  
  6.     ],  
  7. ]); ?>  

 

 

搜索，一行展示：

WX20180410-141145@2x.png

PHP Code复制内容到剪贴板
  1. <?php  
  2.         Yii::$container->set(\yii\widgets\ActiveField::className(), ['template' => "{label}\n{input}"]);  
  3.         $form = ActiveForm::begin([  
  4.             'action' => ['index'],  
  5.             'method' => 'get',  
  6.             'options' => ['class' => 'form-inline'],  
  7.         ]); ?>  

 

 

 

加自定义模板:

QQ截图20170814113758.jpg

PHP Code复制内容到剪贴板
  1. <?=  
  2. $form->field($model, 'participate_type')  
  3.     ->radioList(  
  4.         Plan::getPlanParticipateType(),  
  5.         [  
  6.             'unselect'=>null,  
  7.             'item' => function ($index, $label, $name, $checked, $value) {  
  8.                 $c = $checked ? "checked" : "";  
  9.                 $template = '<input type="radio" ' . $label . ' name="' . $name . '" value="' . $value . '" title="' . $label . '" ' . $c . ' disabled>';  
  10.                 return $template;  
  11.             }  
  12.         ]  
  13.     )  
  14.     ->label(false)  
  15. ?>  

 

 

 

QQ截图20170619161200.jpg

PHP Code复制内容到剪贴板
  1. <?=  
  2. $form->field($model, 'participate_type')  
  3.     ->radioList(  
  4.         Plan::getPlanParticipateType(),  
  5.         [  
  6.             'item' => function ($index, $label, $name, $checked, $value) {  
  7.                 $c = $checked ? "checked" : "";  
  8.                 $template = '<input type="radio" ' . $label . ' name="' . $name . '" value="' . $value . '" title="' . $label . '" ' . $c . '>';  
  9.                 return $template;  
  10.             }  
  11.         ]  
  12.     )  
  13. ?>  

 

 

PHP Code复制内容到剪贴板
  1. <?php  
  2. $labelOptions = [  
  3.     'class' => 'control-label'  
  4. ];  
  5. $inputOptions = [  
  6.     'class' => 'form-control'  
  7. ];  
  8. ?>  
  9.   
  10. <div class="form-group">  
  11.                         <?= Html::activeLabel($model, 'meta_title', $labelOptions)?>  
  12.                         <?= Html::activeTextInput($model, 'meta_title', $inputOptions)?>  
  13.                     </div>  
  14.                     <div class="form-group">  
  15.                         <?= Html::activeLabel($model, 'meta_keyword', $labelOptions)?>  
  16.                         <?= Html::activeTextInput($model, 'meta_keyword', $inputOptions)?>  
  17.                     </div>  
  18.                     <div class="form-group">  
  19.                         <?= Html::activeLabel($model, 'meta_description', $labelOptions)?>  
  20.                         <?= Html::activeTextarea($model, 'meta_description', $inputOptions)?>  
  21.                     </div>  

 

PHP Code复制内容到剪贴板
  1. <div class="box box-primary">  
  2.     <div class="box-body">  
  3.         <?php $form = ActiveForm::begin([  
  4.             'action' => ['index'],  
  5.             'method' => 'get',  
  6.         ]); ?>  
  7.         <div class="row">  
  8.             <div class="col-md-3">  
  9.                 <?= Html::activeDropDownList($model, 'user_name', User::getDropDownListUsers(), ['class' => 'form-control','placeholder' => '请输入标题名称','prompt'=>'请选择']) ?>  
  10.             </div>  
  11.   
  12.             <div class="col-md-3">  
  13.                 <?= Html::activeDropDownList($model, 'published', ['0' => '未发布','1' => '已发布'], ['class' => 'form-control','placeholder' => '请输入标题名称','prompt'=>'请选择'])?>  
  14.             </div>  
  15.             <div class="col-md-3"><?= Html::activeTextInput($model, 'title', ['class' => 'form-control','placeholder' => '请输入标题名称'])?></div>  
  16.             <div class="col-md-3"></div>  
  17.         </div>  
  18.         <div class="form-group text-center content-header">  
  19.             <?= Html::submitButton('Search', ['class' => 'btn btn-primary btn-flat']) ?>  
  20.             <?= Html::resetButton('Reset', ['class' => 'btn btn-default btn-flat']) ?>  
  21.         </div>  
  22.         <?php ActiveForm::end(); ?>  
  23.   
  24.     </div>  
  25. </div>  

 

 1.jpg

PHP Code复制内容到剪贴板
  1. <div class="layui-form-item required">  
  2.     <label class="layui-form-label control-label">房屋楼层</label>  
  3.     <div class="layui-input-block">  
  4.   
  5.         <div class="layui-inline">  
  6.   
  7.             <label class="layui-form-label" style="width: 30px; padding:9px 10px;">第</label>  
  8.             <div class="layui-input-inline" style="width: 60px">  
  9.                 <?= Html::activeTextInput($moduleModel, 'house_floor', [  
  10.                     'class' => 'layui-input',  
  11.                     'lay-verify' => 'required',  
  12.                     'autocomplete' => 'off'  
  13.                 ]) ?>  
  14.             </div>  
  15.             <label class="layui-form-label" style="width: 20px; padding:9px 0px;">层</label>  
  16.         </div>  
  17.   
  18.         <div class="layui-inline">  
  19.   
  20.             <label class="layui-form-label" style="width: 30px; padding:9px 10px;">共</label>  
  21.             <div class="layui-input-inline" style="width: 60px">  
  22.                 <?= Html::activeTextInput($moduleModel, 'house_zonglouceng', [  
  23.                     'class' => 'layui-input',  
  24.                     'size' => 5  
  25.                 ]) ?>  
  26.             </div>  
  27.             <label class="layui-form-label" style="width: 20px; padding:9px 0px;">层</label>  
  28.         </div>  
  29.   
  30.     </div>  
  31. </div>  

 

 2.jpg

PHP Code复制内容到剪贴板
  1.                 <div class="layui-form-item required">  
  2.                     <label class="layui-form-label control-label">房屋户型</label>  
  3.                     <div class="layui-input-block">  
  4.   
  5.                         <div class="layui-inline">  
  6.                             <div class="layui-input-inline">  
  7. <!--                                --><?//= Html::activeTextInput($moduleModel, 'house_shi', [  
  8. //                                    'class' => 'layui-input',  
  9. //                                    'required' => '',  
  10. //                                    'lay-verify' => 'required|number',  
  11. //                                    'autocomplete' => 'off'  
  12. //                                ]) ?>  
  13.   
  14.                                 <?= Html::activeDropDownList($moduleModel, 'house_shi', $moduleModel->getHouseRoom(), [  
  15.                                     'class' => 'layui-input',  
  16.                                 ]) ?>  
  17.                             </div>  
  18.                         </div>  
  19.   
  20.                         <div class="layui-inline">  
  21.                             <div class="layui-input-inline" style="width: 60px">  
  22.                                 <?= Html::activeTextInput($moduleModel, 'house_ting', [  
  23.                                     'class' => 'layui-input',  
  24.                                     'required' => '',  
  25.                                     'lay-verify' => 'required|number',  
  26.                                     'autocomplete' => 'off'  
  27.                                 ]) ?>  
  28.                             </div>  
  29.                             <label class="layui-form-label" style="width: 10px; padding:9px 0px;">厅</label>  
  30.                         </div>  
  31.   
  32.                         <div class="layui-inline">  
  33.                             <div class="layui-input-inline" style="width: 60px">  
  34.                                 <?= Html::activeTextInput($moduleModel, 'house_wei', [  
  35.                                     'class' => 'layui-input',  
  36.                                     'required' => '',  
  37.                                     'lay-verify' => 'required|number',  
  38.                                     'autocomplete' => 'off'  
  39.                                 ]) ?>  
  40.                             </div>  
  41.                             <label class="layui-form-label" style="width: 10px; padding:9px 0px;">卫</label>  
  42.                         </div>  
  43.   
  44.                         <div class="layui-inline">  
  45.   
  46.                             <label class="layui-form-label" style="width: 80px; padding:9px 10px;">共</label>  
  47.                             <div class="layui-input-inline" style="width: 60px">  
  48.                                 <?= Html::activeTextInput($moduleModel, 'house_area', [  
  49.                                     'class' => 'layui-input',  
  50.                                     'required' => '',  
  51.                                     'lay-verify' => 'required|isFloat',  
  52.                                     'autocomplete' => 'off'  
  53.                                 ]) ?>  
  54.                             </div>  
  55.                             <label class="layui-form-label" style="width: 60px; padding:9px 0px;">㎡面积</label>  
  56.                         </div>  
  57.   
  58.                     </div>  
  59.                 </div>  

 

3.jpg

PHP Code复制内容到剪贴板
  1. <div class="layui-form-item required">  
  2.     <label class="layui-form-label control-label">房屋参数</label>  
  3.     <div class="layui-input-block">  
  4.   
  5.         <div class="layui-input-inline">  
  6.   
  7.             <?= Html::activeDropDownList($moduleModel, 'house_object_type', $moduleModel->getHouseObjectType(), [  
  8.                 'class' => 'layui-input'  
  9.             ]) ?>  
  10.   
  11.         </div>  
  12.   
  13.         <div class="layui-input-inline">  
  14.             <?= Html::activeDropDownList($moduleModel, 'house_fit_type', $moduleModel->getHouseFitType(), [  
  15.                 'class' => 'layui-input'  
  16.             ]) ?>  
  17.         </div>  
  18.   
  19.         <div class="layui-input-inline">  
  20.             <?= Html::activeDropDownList($moduleModel, 'house_toward', $moduleModel->getHouseToward(), [  
  21.                 'class' => 'layui-input'  
  22.             ]) ?>  
  23.         </div>  
  24.   
  25.     </div>  
  26. </div>  
  27.   
  28.   
  29. <?=  
  30. $form->field($moduleModel, 'house_want_type')  
  31.     ->radioList(  
  32.         $moduleModel->getHouseWantType(),  
  33.         [  
  34.             'item' => function ($index, $label, $name, $checked, $value) {  
  35.                 $c = $checked ? "checked" : $index == 0 ? "checked" : "";  
  36.                 $template = '<input type="radio" ' . $label . '" name="' . $name . '" value="' . $index . '" title="' . $label . '" ' . $c . '>';  
  37.                 return $template;  
  38.             }  
  39.         ]  
  40.     )  
  41. ?>  
  42.   
  43. <?=  
  44. $form->field($moduleModel, 'house_pay_way')  
  45.     ->radioList(  
  46.         $moduleModel->getHousePayWay(),  
  47.         [  
  48.             'item' => function ($index, $label, $name, $checked, $value) {  
  49.                 $c = $checked ? "checked" : $index == 0 ? "checked" : ""; 
  50.                 $template = '<input type="radio" ' . $label . '" name="' . $name . '" value="' . $index . '" title="' . $label . '" ' . $c . '>';  
  51.                 return $template;  
  52.             }  
  53.         ]  
  54.     )  
  55. ?>  
  56.   
  57. <?=  
  58. $form->field($moduleModel, 'house_type')  
  59.     ->radioList(  
  60.         $moduleModel->getHouseType(),  
  61.         [  
  62.             'item' => function ($index, $label, $name, $checked, $value) {  
  63.                 $c = $checked ? "checked" : $index == 0 ? "checked" : "";  
  64.                 $template = '<input type="radio" ' . $label . '" name="' . $name . '" value="' . $index . '" title="' . $label . '" ' . $c . '>';  
  65.                 return $template;  
  66.             }  
  67.         ]  
  68.     )  
  69. ?>  
  70.   
  71.   
  72. <?= $form->field($moduleModel, 'house_address')->textInput(['maxlength' => true, 'required' => '', 'lay-verify' => 'required', 'autocomplete' => 'off', 'placeholder' => '可记录几号楼几室、房主信息等（仅内部系统展示）']) ?>  

 

 

添加一个默认值 和写一个form的表单就不再使用Html来拼接div了：

PHP Code复制内容到剪贴板
  1. <?php  
  2. $model->phone = Yii::$app->user->identity->username;  
  3. $model->house_price = $price;  
  4. $model->house_address = $address;  
  5. ?>  
  6.   
  7.                         <?php $form = ActiveForm::begin([  
  8.                             'enableAjaxValidation' => true,  
  9.                             'options' => ['class' => 'form-horizontal form-padding'],  
  10.                             'fieldConfig' => [  
  11.                                 'template' => "{label}\n<div class=\"col-md-8\">{input}</div>\n<div class=\"col-md-8 col-md-offset-3\">{error}</div>",  
  12.                                 'labelOptions' => ['class' => 'col-sm-3 control-label'],  
  13.                             ],  
  14.                         ]); ?>  
  15.                         <?= Html::activeHiddenInput($model, 'apply_id', ['value' => Yii::$app->request->get("id", 0)]) ?>  
  16.                         <?= Html::activeHiddenInput($model, 'user_id', ['value' => Yii::$app->user->id]) ?>  
  17.   
  18.                         <fieldset>  
  19.   
  20.                             <div class="form-group">  
  21.                                 <label for="house" class="col-sm-3 control-label">申请房源</label>  
  22.                                 <div class="col-md-8">  
  23.                                     <?= $area ? $area . " - " : "" ?><?= $district ? $district . " - " : "" ?><?= $title ?>  
  24.                                 </div>  
  25.                             </div>  
  26.   
  27.                             <?= $form->field($model, 'truename') ?>  
  28.                             <?= $form->field($model, 'phone') ?>  
  29.                             <?= $form->field($model, 'house_address') ?>  
  30.                             <?= $form->field($model, 'house_price_type')->dropDownList($model->getHousePriceType()) ?>  
  31.                             <?= $form->field($model, 'house_price') ?>  
  32.   
  33.                             <?= $form->field($model, 'pay_datetime')->textInput(['data-toggle' => 'datepicker']) ?>  
  34.                             <?= $form->field($model, 'employer') ?>  
  35.   
  36.                             <?= $form->field($model, 'mark')->textarea(['rows'=>5]) ?>  
  37.   
  38.                             <div class="form-group">  
  39.                                 <div class="col-md-8 col-md-offset-3">  
  40.                                     <?= Html::submitButton('立即提交', ['class' => 'btn btn-success btn-lg']) ?>  
  41.                                 </div>  
  42.                             </div>  
  43.                         </fieldset>  
  44.                         <?php ActiveForm::end(); ?>  

 

ActiveForm 改成ajax提交

PHP Code复制内容到剪贴板
  1.             <?php $form = ActiveForm::begin([  
  2.                 'action' => ['test/getpost'], //可以忽略  
  3.                 'method' => 'post',  
  4.                 'id' =>'staffForm',  
  5.                 'enableAjaxValidation' => true, //必须设置，表示该表单以ajax提交  
  6.             ]); ?>  
  7.   
  8. <!-- 两种隐藏文本框写法-->  
  9. <?= Html::activeHiddenInput($model, 'id') ?>  
  10. <?= Html::hiddenInput("aid", Yii::$app->request->get("aid")) ?>  
  11.   
  12.             <?php ActiveForm::end(); ?>  
  13.   
  14. <!-- JS注册到底部 -->  
  15. <?php $this->beginBlock('js') ?>  
  16.     <script>  
  17.         $(function () {  
  18.             $(document).on('beforeSubmit', 'form#staffForm', function () {  
  19.                 var form = $(this);  
  20.   
  21.                 var loading = layer.load(2);  
  22.   
  23.                 //返回错误的表单信息  
  24.                 if (form.find('.has-error').length) {  
  25.                     return false;  
  26.                 }  
  27.                 //表单提交  
  28.                 $.ajax({  
  29.                     url: form.attr('action'),  
  30.                     type: 'post',  
  31.                     data: form.serialize(),  
  32.                     success: function (res) {  
  33.                         layer.close(loading);  
  34.                         if(res.errcode){  
  35.                             layer.open({  
  36.                                 title: '错误'  
  37.                                 ,content: res.errmsg  
  38.                             });  
  39.                         }else{  
  40.   
  41.                             layer.msg(res.errmsg, {  
  42.                                 time: 1000 // 2秒关闭（如果不配置，默认是3秒）  
  43.                             }, function(){  
  44.                                 history.go(-1);  
  45.                             });  
  46.   
  47.                         }  
  48.                     },  
  49.                     error: function () {  
  50.                         layer.open({  
  51.                             title: '错误'  
  52.                             ,content: '系统错误，请联系管理员'  
  53.                         });  
  54.                         return false;  
  55.                     }  
  56.                 });  
  57.                 return false;  
  58.             });  
  59.         });  
  60.     </script>  
  61. <?php $this->endBlock() ?>  

 

ActiveForm 改成Layui的表单风格

WX20181217-210901@2x.png

PHP Code复制内容到剪贴板
  1. <?php $form = ActiveForm::begin([  
  2.     'id' => 'form-signup',  
  3.     'options' => [  
  4.         'class' => 'layui-form',  
  5.     ],  
  6.     'fieldConfig' => [  
  7.         'options' => [  
  8.             'class' => 'layui-form-item',  
  9.         ],  
  10.         'template' => '{label}<div class="layui-input-inline">{input}</div>{error}',  
  11.         'labelOptions' => ['class' => 'layui-form-label control-label'],  
  12.         'errorOptions' => [  
  13.             'class' => 'layui-form-mid layui-word-aux', //替换掉错误提示的help-block  
  14.         ],  
  15.         'inputOptions' => [  
  16.             'class' => 'layui-input',   //替换掉input表单的form-control  
  17.         ]  
  18.     ],  
  19. ]); ?>  
  20. <?= $form->field($model, 'username') ?>  
  21. <?= $form->field($model, 'password')->passwordInput() ?>  
  22. <?= $form->field($model, 'retypePassword')->passwordInput() ?>  
  23.   
  24. <?= $form->field($model, 'email') ?>  
  25. <?= $form->field($model, 'group_id')->dropDownList(\common\modules\user\models\Group::getGroupList()) ?>  
  26. <?= $form->field($model, 'user_fen') ?>  
  27. <?= $form->field($model, 'money') ?>  
  28. <?= $form->field($model, 'user_date') ?>  
  29. <?= $form->field($model, 'z_group_id')->dropDownList(\common\modules\user\models\Group::getGroupList())->label("到期后转向") ?>  
  30. <?= $form->field($model, 'checked')->dropDownList($model->getCheck())->label("状态") ?>  
  31.   
  32.   
  33. <div class="layui-form-item">  
  34.     <label class="layui-form-label control-label"></label>  
  35.     <div class="layui-input-inline">  
  36.         <?= Html::submitButton("新增", ['class' => 'layui-btn', 'name' => 'signup-button']) ?>  
  37.     </div>  
  38. </div>  
  39.   
  40. <?php ActiveForm::end(); ?>  

 

 css，js需要添加：

XML/HTML Code复制内容到剪贴板
  1. <style>  
  2.     .has-error .layui-form-mid.layui-word-aux {  
  3.         color: #a94442 !important;  
  4.     }  
  5.   
  6.     .layui-form-label.control-label {  
  7.         width: 200px;  
  8.     }  
  9. </style>  
  10.   
  11. <?php $this->beginBlock('js') ?>  
  12.     <script>  
  13.         layui.use(['form'], function () {  
  14.             var form = layui.form;  
  15.         });  
  16.     </script>  
  17. <?php $this->endBlock() ?>  

 

activeInput / activeDropDownList

 

PHP Code复制内容到剪贴板
  1. <?= Html::activeInput('text', $model, 'plan_time', ['class' => 'form-control', 'autocomplete' => 'off','value'=>date("Y-m-d") ]) ?>  

 

PHP Code复制内容到剪贴板
  1. <?= Html::activeInput('text', $model, 'plan_time', ['class' => 'form-control', 'id' => 'layui-input-date0', 'value' => $model->plan_time ? date("Y-m-d", $model->plan_time) : date("Y-m-d")]) ?>  

 

 

PHP Code复制内容到剪贴板
  1. <?= Html::activeHiddenInput($model, 'plan_time', ['value'=>date("Y-m-d")]) ?>  

 

PHP Code复制内容到剪贴板
  1. Html::dropDownList('user_id',$user_id,\backend\modules\user\models\User::getDropDownListAllUser(), ['lay-search' => '']);  
  2.   
  3.   
  4. Html::activeDropDownList($model, 'apply_user_id', \backend\modules\user\models\User::getDropDownListByProjectId(), ['prompt' => '不限', 'lay-search' => '']);   

 

 

PHP Code复制内容到剪贴板
  1. <?= Html::activeTextarea($model, 'reason', ['class' => 'form-control']) ?>  

 

WX20190226-151911@2x.png 

PHP Code复制内容到剪贴板
  1. <?= Html::activeRadioList($model, 'pay_type', [0 => "合同", 1 => "非合同"], [  
  2. //                                'unselect' => null,  
  3.                                 'item' => function ($index, $label, $name, $checked, $value) {  
  4.                                     $c = $checked ? "checked" : "";  
  5.                                     $template = '<input type="radio" ' . $label . ' name="' . $name . '" value="' . $value . '" title="' . $label . '" ' . $c . '>';  
  6.                                     return $template;  
  7.                                 }  
  8.                             ]) ?>  

 

 

WX20190227-220225@2x.png

PHP Code复制内容到剪贴板
  1. <?= $form->field($model, 'project_id')->checkboxList(\backend\models\Project::getAllDropDownList(), [  
  2.         'item' => function ($index, $label, $name, $checked, $value) {  
  3.             $c = $checked ? "checked" : "";  
  4.             $template = '<p class="mb10"><input type="checkbox" ' . $label . ' name="' . $name . '" value="' . $value . '" title="' . $label . '" ' . $c . '></p>';  
  5.             return $template;  
  6.         }  
  7.     ]) ?>  

 

 

activeCheckboxList

QQ20200224-144211@2x.png 

PHP Code复制内容到剪贴板
  1. <div class="form-group row field-enewsclass-islast required">  
  2.      <label class="col-sm-2 col-form-label text-right">是否终极栏目</label>  
  3.      <div class="col-sm-6">  
  4.          <?= Html::activeCheckboxList($model, "islast", ['1' => '是'], [  
  5.              'class'=>'form-check',  
  6.                'tag'=>false,  
  7.              'item' => function ($index, $label, $name, $checked, $value) {  
  8.                  $c = $checked ? "checked" : "";  
  9.                  $template = '<input class="form-check-input" type="checkbox" name="' . $name . '" value="' . $index . '" title="' . $label . '" ' . $c . '><label class="form-check-label"> ' . $label . '</label>';  
  10.                  return $template;  
  11.              },  
  12.          ]); ?>  
  13.      </div>  
  14.  </div>  

 

 

PHP Code复制内容到剪贴板
  1. <?= $form->field($model, 'islast')->checkboxList(  
  2.     ['1' => '是'],  
  3.     [  
  4.         'item' => function ($index, $label, $name, $checked, $value) {  
  5.             $c = $checked ? "checked" : "";  
  6.             $template = '<input class="form-check-input" type="checkbox" name="' . $name . '" value="' . $index . '" title="' . $label . '" ' . $c . '><label class="form-check-label"> ' . $label . '</label>';  
  7.             return $template;  
  8.         },  
  9.         'class' => 'form-check'  
  10.     ]  
  11. ) ?>  

 

 

 

本文来自于：http://www.yoyo88.cn/study/yii2/84.html

上一篇 Packagist 镜像使用方法 / Composer安装
下一篇 yii2-GridView在开发中常用的功能及技巧
相关的文章
Powered by yoyo苏ICP备15045725号