V2.0 - 小部件使用集合
yoyocmf 2020-03-09 16:07:32

目录

1、switch开关

2、单图上传(数据库中有实体字段)

3、选择用户,下拉多选(穿梭框)/  ActiveForm自定义下拉框  

4、本地选择+云端选择 单图上传(数据库中有实体字段)

5、排序(有错误会弹出,正常不弹任何提示)

6、时间选择插件,值为string

7、Bootstrap Select(select扩展及美化),ActiveForm一般用于form表单

8、select2组件

9、ActiveForm Grid 添加操作按钮 (Grid自定义编辑和新增的layer框大小)

10、ActiveForm 添加suffix后缀

11、ActiveForm 添加SEO关键词、描述等

12、ActiveForm 单选按钮在一行显示

13、ActiveForm 美化radio组件 + 颜色选择

14、ActiveForm 美化checkbox

15、ActiveForm 美化input框 + 计量单位

16、Grid 添加操作按钮2,需要confirm确认后执行

17、多值字段,值为array

18、jstree树组件 + 右键菜单

19、Grid 数据列表小部件,基于data-tables组件,水平滚动条,右侧内容超出隐藏,可滚动

20、日期选择插件 / 日期+时间选择插件

21、类似钉钉写日志的多值字段小部件显示

22、echarts图表及API配置 + daterangepicker 小部件

23、选择省市区小部件

 

 

1、switch开关

WX20200427-145758@2x.png

use backend\widgets\switcher\SwitcherWidget;

 

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'status',[  
  2.     "template" => "{label}\n<div class='col-md-6'>{input}</div>\n{hint}\n{error}"  
  3. ])->widget(SwitcherWidget::className(), [  
  4.     "options" => [  
  5.         "data-color" => "#3aa99e",  // 颜色 
  6.         "data-size" =>"large" ,// 大小,large / small
  7.         "data-on" => $model::STATUS_ACTIVE, //原本默认应该是1,这里是10
  8.         "data-off" => $model::STATUS_INACTIVE, //原本默认应该是0,这里是9
  9.     ]  
  10. ]) ?>  

 

 

WX20200427-145936@2x.png

紫色(默认) #526069灰色  #3aa99e绿色 #f2a654橙色 #f96868红色 #926dde深紫色  

 

GridView 使用开关按钮:

PHP Code复制内容到剪贴板
  1. <?= GridView::widget([  
  2.                     'id' => 'article-grid',  
  3.                     'dataProvider' => $dataProvider,  
  4.                     'filterModel' => $searchModel,  
  5.                     'columns' => [  
  6.                         ['class' => 'yii\grid\SerialColumn'],  
  7.                         'id',  
  8.                         [  
  9.                             'class' => 'backend\widgets\grid\SwitcherColumn',  
  10.                             'attribute' => 'is_top'  
  11.                         ],  
  12.                         [  
  13.                             'class' => 'backend\widgets\grid\SwitcherColumn',  
  14.                             'attribute' => 'status'  
  15.                         ],  
  16.                         ...  

 

也可以自定义启用的value和未启用的value,默认是1和0

PHP Code复制内容到剪贴板
  1. [  
  2.     'class' => 'backend\widgets\grid\SwitcherColumn',  
  3.     'attribute' => 'status',  
  4.     'options' => [  
  5.         "data-color" => "#3aa99e",  // 颜色  
  6.         "data-on" => User::STATUS_ACTIVE, //原本默认应该是1,这里是10  
  7.         "data-off" => User::STATUS_INACTIVE, //原本默认应该是0,这里是9  
  8.     ]  
  9. ],  

 

 

 

如果是GridView使用开关按钮,需要在控制器中:

PHP Code复制内容到剪贴板
  1. public function actions()  
  2. {  
  3.     return [  
  4.         'switcher' => [  
  5.             'class' => 'backend\widgets\grid\SwitcherAction'  
  6.         ]  
  7.     ];  
  8. }  

 同时将findModel的属性改为public

 

ActiveForm使用按钮

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'is_top')->switcher() ?>  

 

 

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'is_top')->switcher([  
  2.     "options" => [  
  3.         "data-color" => "#3aa99e",  
  4.         "data-size" => "small"  
  5.     ]  
  6. ]) ?>  

 

单独使用:

PHP Code复制内容到剪贴板
  1. <?= SwitcherWidget::widget([  
  2.                                                 "name" => "org_if_current_inspection",  
  3.                                                 "value" => $vv->org_if_current_inspection,  
  4.                                                 "options" => [  
  5.                                                     "class" => "js-switch org-list-switch",  
  6.                                                     "data-color" => "#3aa99e",  // 颜色  
  7.                                                     "data-size" => "small",  
  8.                                                     "data-url" => Url::to(["switcher"]),  
  9.                                                     "data-params" => [  
  10.                                                         "id" => $vv->id,  
  11.                                                         "attribute" => "org_if_current_inspection"  
  12.                                                     ]  
  13.                                                 ]  
  14.                                             ]) ?>  

 

加change事件:

PHP Code复制内容到剪贴板
  1. $('.js-switch').on('change'function () {  
  2.     var url = $(this).data("url");  
  3.     var reload = false; //修改后是否刷新页面,否  
  4.     var on = 1;  
  5.     var off = 0;  
  6.     var checked = $(this).is(':checked') ? on : off;  
  7.     var data = $(this).data("params");  
  8.     data.value = checked;  
  9.   
  10.     console.log(data);  
  11.     $.post(url, data, function (response) {  
  12.         if (response.code != 200) {  
  13.             $.modal.error(response.message);  
  14.             return;  
  15.         }  
  16.         $.modal.alert(response.message);  
  17.         // 刷新组织信息即可  
  18.         $.pjax.reload({container: orgContainerName, timeout: 0});  
  19.     });  
  20. });  

 

如果有未来元素,把on change事件改为:

PHP Code复制内容到剪贴板
  1. $(document).on('change','.js-switch',function(){  

 

 

 

2、单图上传(数据库中有实体字段)

未标题-1.jpg

PHP Code复制内容到剪贴板
  1. <?= $form->field($moduleModel'avatar')->widget(\common\modules\attachment\widgets\SingleWidget::className(), [  
  2.     'onlyUrl' => true  
  3. ]) ?>  

 onlyUrl 表示仅需要url链接

 

3、选择用户,下拉多选(穿梭框)

WX20200630-224127@2x.png

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'title', [  
  2.     'template' => '{label}<div class="col-md-10">{input}</div>',  
  3.     'labelOptions' => ['class' => 'col-md-2 col-form-label text-right'],  
  4. ])->widget(\backend\widgets\multiselect\MultiSelectWidget::className(), [  
  5.     'data' => [  
  6.          "选项1",  
  7.          "选项2",  
  8.          "选项3",  
  9.          "选项4",  
  10.          "选项5",  
  11.          "选项6",  
  12.          "选项7",  
  13.          "选项8",  
  14.     ]  
  15. ]) ?>  

 

use backend\widgets\multiselect\MultiSelectWidget;

PHP Code复制内容到剪贴板
  1. <?php echo $form->field($model'userids')->widget(MultiSelectWidget::className(), [  
  2.     'data' => User::getListDropDownList(),  
  3.     'options' => [  
  4.         'name' => 'abccc',  
  5.         'value' => explode(","$model->userids)  
  6.     ]  
  7. ]) ?>  

 

 

PHP Code复制内容到剪贴板
  1. <?php  
  2. echo \backend\widgets\multiselect\MultiSelectWidget::widget([  
  3.     'name' => 'choose-user',  
  4.     'value' => [0, 1],  
  5.     'data' => [  
  6.         "选项1",  
  7.         "选项2",  
  8.         "选项3",  
  9.         "选项4",  
  10.         "选项5",  
  11.         "选项6",  
  12.         "选项7",  
  13.         "选项8",  
  14.     ],  
  15.   
  16. ])  
  17. ?>  

 

 如果是model下,那么这个字段的规则,只能是safe,否在提交的时候,无法捕捉到值

 可以使用behavior:

PHP Code复制内容到剪贴板
  1. public function behaviors()  
  2. {  
  3.     return [  
  4.         [  
  5.             'class' => ChooseUserBehavior::className(), // 这里处理beforeSave时转为string  
  6.             'chooseAttribute' => 'userids'//默认字段为username,重复可忽略  
  7.         ],  
  8.         ...  
  9.     ];  
  10. }  

 

也可以自己使用钩子函数写:

PHP Code复制内容到剪贴板
  1. public function beforeSave($insert)  
  2. {  
  3.     parent::beforeSave($insert);  
  4.     if(is_array($this->fields)){  
  5.         $newItems = array_filter($this->fields, function ($item) {  
  6.             return !emptyempty($item);  
  7.         });  
  8.         $this->fields = implode(",",$newItems);  
  9.     }  
  10.     return true;  
  11. }  

 

 自定义ActiveForm下拉选择框插件,在一行显示

未命名.png

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'type')->dropDownListForPlugin($model::getTypeEnum(),['prompt' => '请选择11']) ?>  

 

 也可以使用

PHP Code复制内容到剪贴板
  1. <?=Html::customDropDownList($model,"project_id",\common\modules\project\models\Project::getDropDownList())?>  

 

 

 

 4、本地选择+云端选择 单图上传(数据库中有实体字段)

WX20200317-163251@2x.png

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'avatar')->widget(\common\modules\attachment\widgets\SingleAndChooseWidget::className(), [  
  2.     'chooseUrl' => '/attachment/default/choose-sing-pic',  // 可以自主添加图片的跳转控制器,默认就是这个,可以自主加别的控制器来控制条件  
  3.     'chooseArea' => ["80%","80%"],// 选择框的大小  
  4.     'onlyUrl' => true  
  5. ]) ?>  

 

单独使用

PHP Code复制内容到剪贴板
  1. <?=SingleAndChooseWidget::widget([  
  2.     'model' => $model,  
  3.     'attribute' => 'qrcode',  
  4. ])?>  

 

多图上传:

model:

PHP Code复制内容到剪贴板
  1. use common\modules\attachment\behaviors\UploadBehavior;  
  2. use common\traits\EntityTrait;  
  3.   
  4. class xxx extends \yii\db\ActiveRecord  
  5. {  
  6.     use EntityTrait;  
  7.   
  8.     public function rules()  
  9.     {  
  10.         return [  
  11.             [['files'],'safe'],  
  12.         ];  
  13.     }  
  14.   
  15.     public function attributeLabels()  
  16.     {  
  17.         return [  
  18.             ...  
  19.             'files' => '项目附件'  
  20.         ];  
  21.     }  
  22.   
  23.     public function behaviors()  
  24.     {  
  25.         return [  
  26.             TimestampBehavior::className(),  
  27.             [  
  28.                 'class' => UploadBehavior::className(),  
  29.                 'attribute' => 'files',// 字段名,喜欢什么写什么,不要中文就行,  
  30.                 'multiple' => true, // 是否多图,true为是,去掉这条为false,默认为false,单图上传  
  31.                 'entity' => __CLASS__  
  32.             ],  
  33.         ];  
  34.     }  

 

使用:

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'files', [  
  2.     'template' => '{label}<div class="col-md-10">{input}</div>',  
  3.     'labelOptions' => ['class' => 'col-md-2 col-form-label text-right'],  
  4. ])->widget(\common\modules\attachment\widgets\MultipleAndChooseWidget::className(), [  
  5.     'onlyImage' => false,   // 是否只允许上传图片,默认true,为false表示支持上传文件  
  6. ]) ?>  

 

 

默认upload上传引擎从配置项获取,也可指定上传到本地

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'files', [    
  2.     'template' => '{label}<div class="col-md-10">{input}</div>',    
  3.     'labelOptions' => ['class' => 'col-md-2 col-form-label text-right'],    
  4. ])->widget(\common\modules\attachment\widgets\MultipleAndChooseWidget::className(), [    
  5.     'onlyImage' => false,   // 是否只允许上传图片,默认true,为false表示支持上传文件   
  6.     "url" => ["/upload/file-upload-local"// local上传到本地,可以看一下配置文件有哪些参数   
  7. ]) ?>    

 

 

 

 

5、排序(有错误会弹出,正常不弹任何提示)

WX20200410-161732@2x.png

视图文件采用GridView的写法:

PHP Code复制内容到剪贴板
  1. [  
  2.     "label" => "排序",  
  3.     "value" => function ($model) {  
  4.         return Html::sort($model->sort,[  
  5.             "data" => [  
  6.                 "id"=>$model->classid,//需要改变的主键ID  
  7.                 "name" => "sort"// 需要改变的字段名,默认就是sort  
  8.                 "url" => Url::to(["change-sort"]) //ajax动态改变值的url  
  9.             ],  
  10.         ]);  
  11.     },  
  12.     "format" => "raw",  
  13.     'headerOptions' => ['style' => 'width:80px'],  
  14. ],  

 

2020.8.16支持callback,callback支持js方法名,也支持string,直接执行

PHP Code复制内容到剪贴板
  1. return Html::sort($model->sort, [  
  2.     "data" => [  
  3.         "id" => $model->id,//需要改变的主键ID  
  4.         "name" => "sort"// 需要改变的字段名,默认就是sort  
  5.         "url" => Url::to(["/organization-member/change-sort"]), //ajax动态改变值的url  
  6.         "callback" => "pjaxRefresh()"  
  7.     ],  
  8. ]);  

 

 

控制器添加:

PHP Code复制内容到剪贴板
  1. public function actions()  
  2. {  
  3.     return [  
  4.         'change-sort' => [  
  5.             'class' => 'backend\\actions\\AjaxUpdateFieldAction',  
  6.         ], // change-sort与上面的url一致  
  7.     ];  
  8. }  

控制器最后一个方法findModel给public

 

用到的视图页面需要改:

PHP Code复制内容到剪贴板
  1.         <div class="page-main">  
  2.             <?php Pjax::begin(['id' => 'container-organization']) ?>  
  3.             </div>  
  4.             <?php Pjax::end() ?>  
  5.         </div>  
  6.   
  7.   
  8. <?php $this->beginBlock('js') ?>  
  9.     <script>  
  10.         var containerName = "#container-organization";     
  11.         // pjax刷新  
  12.         function pjaxRefresh() {  
  13.             $.modal.close(); //关闭弹窗  
  14.             $.pjax.reload({container: containerName, timeout: 0});  
  15.         }  
  16.     </script>  
  17. <?php $this->endBlock() ?>  

 

 

 

 

6、时间选择插件,值为string

WX20200427-224212@2x.png

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'created_at')->widget(\backend\widgets\timepicker\TimePickerWidget::className(), [  
  2.     'options' => [  
  3.          "data-min-time" => "上午9:00",  
  4.          "data-max-time" => "下午2:30",  
  5.          "data-show-duration" => "true"  
  6.     ]  
  7. ]) ?>  

 

 7、Bootstrap Select(select扩展及美化),一般用于form表单

跳转官网

WX20200622-113434@2x.png

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'group_id')->dropDownList($model::getGroupEnum(),['encode' => false, 'prompt' => '请选择','data-plugin'=>'selectpicker''data-style' => 'btn-select']) ?>  

 

 

加一个属性:"data-live-search"=>"true" 

WX20200629-135116@2x.png

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'leader')->dropDownList(common\modules\user\models\User::getListDropDownList(), ['encode' => false, 'prompt' => '请选择''data-plugin' => 'selectpicker',‘data-live-search’=>‘true’]) ?>  

 

WX20200720-130327@2x.png 

加一个属性:"multiple"=>true

 

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'role')->dropDownList($roleList, ['encode' => false, 'prompt' => '请选择''data-plugin' => 'selectpicker''data-live-search' => 'true','multiple'=>true]) ?>  

 

 

     

可以通过 data-style 属性改变其样式

btn-outline btn-primary

btn-outline btn-info

btn-outline btn-success

btn-outline btn-warning

btn-outline btn-danger

 

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'role')->dropDownList($roleList, ['encode' => false, 'prompt' => '请选择''data-plugin' => 'selectpicker''data-live-search' => 'true','multiple'=>true,'data-style'=>'btn-outline btn-primary']) ?>  
  2.   
  3. <?= $form->field($model'role')->dropDownList($roleList, ['encode' => false, 'prompt' => '请选择''data-plugin' => 'selectpicker''data-live-search' => 'true','multiple'=>true,'data-style'=>'btn-outline btn-info']) ?>  
  4.   
  5. <?= $form->field($model'role')->dropDownList($roleList, ['encode' => false, 'prompt' => '请选择''data-plugin' => 'selectpicker''data-live-search' => 'true','multiple'=>true,'data-style'=>'btn-outline btn-success']) ?>  
  6.   
  7. <?= $form->field($model'role')->dropDownList($roleList, ['encode' => false, 'prompt' => '请选择''data-plugin' => 'selectpicker''data-live-search' => 'true','multiple'=>true,'data-style'=>'btn-outline btn-warning']) ?>  
  8.   
  9. <?= $form->field($model'role')->dropDownList($roleList, ['encode' => false, 'prompt' => '请选择''data-plugin' => 'selectpicker''data-live-search' => 'true','multiple'=>true,'data-style'=>'btn-outline btn-danger']) ?>  

 

没有选中任何项,这里不做placeholder,用作title,如:

WX20200720-133214@2x.png

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'role')->dropDownList($roleList, [  
  2.     'encode' => false,  
  3.     'prompt' => '请选择',  
  4.     'data-plugin' => 'selectpicker',  
  5.     'multiple'=>true,  
  6.     'title' => '请选择角色',  
  7. ]) ?>  

 

 

 WX20200720-132125@2x.png

可以通过 data-selected-text-format 属性指定选中项如何显示

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'role')->dropDownList($roleList, [  
  2.     'encode' => false,  
  3.     'prompt' => '请选择',  
  4.     'data-plugin' => 'selectpicker',  
  5.     'multiple'=>true,  
  6.     'data-selected-text-format'=>'count'  
  7. ]) ?>  

 

 

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'role')->dropDownList($roleList, [  
  2.     'encode' => false,  
  3.     'prompt' => '请选择',  
  4.     'data-plugin' => 'selectpicker',  
  5.     'multiple'=>true,  
  6.     'data-selected-text-format'=>'count>2'  
  7. ]) ?>  

 

8、select2组件,搜索比下拉更智能,支持过滤过隐藏不必要的选项:

  =>  

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'org_id')->widget(\backend\widgets\select2\Select2Widget::className(), [  
  2.     "options" => [],  
  3.     "data" => [  
  4.         "选项1",  
  5.         "选项2",  
  6.         "选项3",  
  7.         "选项4",  
  8.         "选项5",  
  9.         "选项6",  
  10.         "选项7",  
  11.         "选项8"  
  12.     ]  
  13. ]) ?>  

 

options => 常规选项

data => 下拉选择项

pluginOptions => select2插件选项,用于初始化select2时填充参数

pluginOptions["allowClear"] = true 支持插件删除当前选择项

 

select2单选,添加placeholder:

WX20200723-163040@2x.png

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'classurl')->widget(Select2Widget::className(), [  
  2.     "data" => $selectRoutes,  
  3.     'options' => [  
  4.             'placeholder' => '请选择'  
  5.     ],  
  6. ]) ?>  

 

 

 

分组显示:

 WX20200720-102752@2x.png

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'org_id')->widget(\backend\widgets\select2\Select2Widget::className(), [  
  2.     "options" => [],  
  3.     "data" => [  
  4.         '一级菜单的名称' => [  
  5.             1 => "我是1",  
  6.             2 => "这是2",  
  7.         ],  
  8.         '二级菜单的名称' => [  
  9.             1 => "这是3",  
  10.             2 => "这是5",  
  11.         ],  
  12.     ]  
  13. ]) ?>  

 

分组显示 + 多选

WX20200720-102930@2x.png

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'org_id')->widget(\backend\widgets\select2\Select2Widget::className(), [  
  2.     "options" => [  
  3.         "multiple" => true  
  4.     ],  
  5.     "data" => [  
  6.         '一级菜单的名称' => [  
  7.             1 => "我是1",  
  8.             2 => "这是2",  
  9.         ],  
  10.         '二级菜单的名称' => [  
  11.             1 => "这是3",  
  12.             2 => "这是5",  
  13.         ],  
  14.     ]  
  15. ]) ?>  

 

在外层添加一层class,改变tag颜色,支持

.select2-primary

.select2-success

.select2-info

.select2-waring

.select2-danger 来改变其颜色

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'org_id',[  
  2.         "options"=>[  
  3.                 "class"=>"form-group row select2-primary"  
  4.         ]  
  5. ])->widget(\backend\widgets\select2\Select2Widget::className(), [  
  6.     "options" => [  
  7.         "multiple" => true,  
  8.     ],  
  9.     "data" => [  
  10.         '一级菜单的名称' => [  
  11.             1 => "我是1",  
  12.             2 => "这是2",  
  13.         ],  
  14.         '二级菜单的名称' => [  
  15.             1 => "这是3",  
  16.             2 => "这是5",  
  17.         ],  
  18.     ]  
  19. ]) ?>  

 

WX20200720-105344@2x.png

WX20200720-104126@2x.png

WX20200720-104157@2x.png

WX20200720-110723@2x.png

WX20200720-110916@2x.png

 

select2支持多选以及自定义输入,可以参考一下common/modules/document/backend/views/document/_form.php

PHP Code复制内容到剪贴板
  1. <!-- 'pluginOptions' => ['tags'=>true] 表示 如果没有当前TAG,则输入的文字为TAG值 -->  
  2. <?= $form->field($model, TagBehavior::$formName, [  
  3.     "options" => [  
  4.         "class" => "form-group row select2-primary"  
  5.     ]  
  6. ])->label(TagBehavior::$formLable)->widget(TagsInput::className(), [  
  7.     "pluginOptions" => [  
  8.         'tags' => true,  
  9.         'placeholder' => '标签 ...',  
  10.         'maximumInputLength' => 10  
  11.     ],  
  12.     "options" => [  
  13.         'multiple' => true,  
  14.     ]  
  15. ]) ?>  

 

 

自定义select2组件的input name,value,或其它属性等,ID轻易不要自定义,以防如果当前页面有多个同样的组件时,ID重复:

PHP Code复制内容到剪贴板
  1. <?php  
  2. echo \backend\widgets\select2\Select2Widget::widget([  
  3.     'id' => 'abc',  
  4.     'name' => $provinceName,  
  5.     'value' => $provinceDefault,  
  6.     'options' => [  
  7.         'class' => 'province'  
  8.     ]  
  9. ])  
  10. ?>  

 

 

 

 9、Grid 添加操作按钮

WX20200624-223637@2x.png

PHP Code复制内容到剪贴板
  1. [  
  2.     'class' => 'backend\widgets\grid\ActionColumnLayer',  
  3.     'template' => '{create} {view} {update} {delete}',  
  4.     'buttons' => [  
  5.         'create' => function ($url$model$key) {  
  6.             return Html::createLayer(['create''id' => $model->id], '<span class="icon wb-plus"></span>', ['class' => 'btn btn-sm btn-flat''data-toggle' => 'tooltip''title' => '添加子分类']);  
  7.         }  
  8.     ]  
  9. ],  

 

未命名.png

同时修改layer的宽和高

PHP Code复制内容到剪贴板
  1. [  
  2.     'class' => 'backend\widgets\grid\ActionColumnLayer',  
  3.     'template' => '{create} {view} {update} {delete}',  
  4.     'buttons' => [  
  5.         'create' => function ($url$model$key) {  
  6.             return Html::createLayer(['create''parent_id' => $model->schedule_id], '添加', ['data' => ['width' => '80%''height' => '80%'],'class'=>'btn btn-info btn-xs']);  
  7.         },  
  8.         'update' => function ($url$model$key) {  
  9.             return Html::createLayer($url'<span class="icon wb-edit"></span>', ['data' => ['width' => '80%''height' => '80%']]);  
  10.         }  
  11.     ]  
  12. ],  

 

 

 

 

 10、form展示,input加后缀按钮:

WX20200624-230835@2x.png

PHP Code复制内容到剪贴板
  1. use backend\widgets\ActiveForm;  
  2.   
  3.   
  4.   
  5. <?= $form->field($model'module')->suffix(Html::a('管理内容模型', ['/document/document-module/index'], ['class' => 'btn btn-primary''target' => '_blank']), 'btn')->dropDownList(DocumentModule::getTypeEnum(), ['prompt' => '请选择']) ?>  

 

WX20200730-092607@2x.png

PHP Code复制内容到剪贴板
  1. <?= $form->field($moduleModel'money')->append('<span class="input-group-text">元</span>') ?>  

 

点击弹出layer框的按钮,data-width控制layer的宽度(默认为800px),data-height控制layer的高度(默认为520px)

PHP Code复制内容到剪贴板
  1. <?= Html::a('<i class="icon fa-plus" aria-hidden="true"></i> 添加项目', ['create'], ['class' => 'btn btn-inverse btn-round''data-ajax' => '1''data-target' => '_blank''data-title' => '新增','data-width'=>'80%','data-height'=>'90%']) ?>  

 

在Grid的列表中,点击编辑的时候同样需要将layer框放大

PHP Code复制内容到剪贴板
  1. [  
  2.     'class' => 'backend\widgets\grid\ActionColumnLayer',  
  3.     'template' => '{update} {delete}',  
  4.     'buttons' => [  
  5.         'update' => function ($url$model$key) {  
  6.             return Html::createLayer(['create''id' => $model->id], '<span class="icon wb-edit"></span>', ['data'=>['width'=>'80%','height'=>'500px']]);  
  7.         }  
  8.     ]  
  9. ],  

 

 

 

 

11、添加SEO关键词、描述等

WX20200625-000405@2x.png 

PHP Code复制内容到剪贴板
  1. use backend\widgets\ActiveForm;  
  2.   
  3.                     <?= $form->boxField($model'meta', [  
  4.                         "collapsed" => true, // true展开,false收起  
  5.                         "template" => "<div class='panel'>{header}\n{body}\n{footer}</div>" //如果ActiveForm没有设置template的话,可忽略  
  6.                     ])->widget(MetaForm::className())->header("SEO"); ?>  

 

model中添加行为和获取

PHP Code复制内容到剪贴板
  1. public function behaviors()  
  2. {  
  3.     return [  
  4.         TimestampBehavior::className(),  
  5.         [  
  6.             'class' => MetaBehavior::className(),  
  7.         ],  
  8.     ];  
  9. }  
  10.   
  11. /** 
  12.  * 获取分类的关键词、描述 
  13.  * @return array 
  14.  */  
  15. public function getMetaData()  
  16. {  
  17.     $model =  $this->getMetaModel();  
  18.     $title = $model->title ? : $this->title;  
  19.     $keywords = $model->keywords;  
  20.     $description =$model->description ? : $this->description;  
  21.     return [$title$keywords$description];  
  22. }  

 

12、ActiveForm 单选按钮是否在一行:

WX20200625-000900@2x.png

WX20200625-000922@2x.png

 

PHP Code复制内容到剪贴板
  1. use backend\widgets\ActiveForm;  
  2.   
  3.   
  4. <?= $form->field($model'allow_publish')->inline()->radioList($model::getAllowPublishEnum())->label("发布") ?>  

 

13、美化radio组件 

WX20200626-150441@2x.png

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'allow_publish')->customInlineRadioList($model::getAllowPublishEnum())->label("发布") ?>  

 

重写activeRadioList 

PHP Code复制内容到剪贴板
  1. <?= Html::customInlineRadioList($model,'gender', [0=>"男",1=>"女"]) ?>  

 

如果是自定义name和value,支持:

PHP Code复制内容到剪贴板
  1. <?= Html::customInlineRadioListNoActive("gender", 1, [0=>"男",1=>"女"]) ?>  

 

1.png

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'color')->customInlineColorList([  
  2.     "#3e8ef7"=>"primary",  
  3.     "#997b71" => "brown",  
  4.     "#0bb2d4" => "cyan",  
  5.     "#11c26d" => "green",  
  6.     "#757575" => "grey",  
  7.     "#667afa" => "indigo",  
  8.     "#eb6709" => "orange",  
  9.     "#f74584" => "pink",  
  10.     "#9463f7" => "purple",  
  11.     "#ff4c52" => "red",  
  12.     "#17b3a3" => "teal",  
  13.     "#ffcd17" => "yellow",  
  14. ]) ?>  

 

 

 

14、美化checkbox 

WX20200720-141902@2x.png

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'executive')->customCheckboxList([1 => "开启"]) ?>  

 

PHP Code复制内容到剪贴板
  1. <?= Html::customCheckboxList($model,'executive', [1 => "开启"]) ?>  

 

上面同样适用于多个复选框,如果仅单个,可使用:

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'executive')->customCheckbox() ?>  

 

 

15、美化input框 + 计量单位

2.png

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'amount')->append('<span class="input-group-text">万元</span>')->label("项目金额") ?>  

 

 

16、Grid 添加操作按钮2,需要confirm确认后执行:

WX20200627-130750@2x.png

PHP Code复制内容到剪贴板
  1. [  
  2.                             'class' => '\backend\widgets\grid\ActionColumn',  
  3.                             'template' => '{update} {delete} {refresh}',  
  4.                             'buttons' => [  
  5.                                     'delete' => function ($url$model$key) {  
  6.                                     return Html::createAjaxBtn($url"<i class='icon wb-close'></i>", [  
  7.                                         "data-confirm" => "确定要删除吗?删除后可在回收站恢复",  
  8.                                         "data-method" => "post",  
  9.                                         'data-toggle' => 'tooltip',  
  10.                                         'data-original-title' => '删除'  
  11.                                     ]);  
  12.   
  13.                                 },  
  14.                                 'refresh' => function ($url$model$key) {  
  15.                                     return Html::createAjaxBtn($url,"刷新",['class' => 'btn btn-primary btn-xs']);  
  16.   
  17.                                 },  
  18.                             ]  
  19.                         ],  

 

WX20200627-130802@2x.png

PHP Code复制内容到剪贴板
  1. [  
  2.     'class' => '\backend\widgets\grid\ActionColumn',  
  3.     'template' => '{reduction} {delete}',  
  4.     'buttons' => [  
  5.         'reduction' => function ($url$model) {  
  6.             return Html::createAjaxBtn(['reduction'], '还原', [  
  7.                 "class" => "btn btn-success btn-xs",  
  8.                 "data-method" => "post",  
  9.                 "data-confirm" => "是否确认还原?",  
  10.                 'data-params' => ['id' => $model->id],  
  11.             ]);  
  12.         },  
  13.         'delete' => function ($url$model$key) {  
  14.             return Html::createAjaxBtn(['hard-delete'], "清除", ['class' => 'btn btn-danger btn-xs',"data-confirm" => "确定要彻底删除吗?不可恢复!"]);  
  15.   
  16.         }  
  17.     ]  
  18. ],  

 

WX20200930-103610@2x.png

PHP Code复制内容到剪贴板
  1. [  
  2.     'class' => '\backend\widgets\grid\ActionColumn',  
  3.     'template' => '{view} {update} {delete} {deleteAll}',  
  4.     'buttons' => [  
  5.         'view' => function ($url$model) {  
  6.             return Html::tag("span""查看", ["class" => "btn btn-primary btn-sm createTab""title" => "查看" . $model->profile->true_name . "资料""target" => "_blank""data-url" => Url::to(["/organization-member/view""user_id" => $model->user_id, "org_id" => $model->org_id])]);  
  7.         },  
  8.         'update' => function ($url$model$key)use($rightOrg) {  
  9.             return Html::createLayer(["/organization-member/update""user_id" => $model->user_id, "org_id" => Yii::$app->request->get("org_id"), 'parent_tree_init' => 1], "<span class='btn btn-info btn-sm'>编辑</span>", ["data-title" => "编辑【".$rightOrg->title."】成员【".$model->profile->true_name."】资料" ]);  
  10.         },  
  11.         'delete' => function ($url$model$keyuse ($org_id) {  
  12.             return Html::createAjaxBtn(["/organization-member/delete""id" => $model->id], "<span class='btn btn-warning btn-sm'>删</span>", [  
  13.                 "data-confirm" => "确定要删除吗?该操作仅删除此用户在当前组织的信息,基础资料与其他组织的关联关系不受影响",  
  14.                 "data-method" => "post",  
  15.                 'data-toggle' => 'tooltip',  
  16.                 'data-original-title' => '删除当前关联关系',  
  17.                 'data-refresh-pjax-container' => 'container-organization'  
  18.             ]);  
  19.         },  
  20.         'deleteAll' => function ($url$model$keyuse ($org_id) {  
  21.             return Html::createAjaxBtn(["delete-member""user_id" => $model->user_id, "org_id" => $org_id], "<i class='icon wb-close text-danger'></i>", [  
  22.                 "data-confirm" => "确定要删除吗?该操作将会删除此用户全部资料,包括所在组织与基础资料,且不可恢复",  
  23.                 "data-method" => "post",  
  24.                 'data-toggle' => 'tooltip',  
  25.                 'data-original-title' => '删除',  
  26.                 'data-refresh-pjax-container' => 'container-organization'  
  27.             ]);  
  28.         },  
  29.     ]  
  30. ],  

 

 

 

17、多值字段

WX20200629-222624@2x.png 

文档模块中,扩展model支持添加:

PHP Code复制内容到剪贴板
  1. public function behaviors()  
  2. {  
  3.     return [  
  4.         [  
  5.             'class' => UploadBehavior::className(),  
  6.             'attribute' => 'attachment',  
  7.             'entity' => __CLASS__  
  8.         ],  
  9.         [  
  10.             'class' => DynamicFormBehavior::className(),  
  11.             'formAttributes' => [  
  12.   
  13.                 'attachment' => [  
  14.                     'type' => 'fileAndChoose',  
  15.                     'options' => ['widgetOptions' => ['onlyUrl' => false]]  
  16.                 ],  
  17.                 'content' => [  
  18.                     'type' => 'multipleInput',  
  19.                     'items' => [  
  20.                         "title" => "标题",  
  21.                         "value" => "值",  
  22.                     ],  
  23.                     'options' => [  
  24.                         "max" => 20  
  25.                     ]  
  26.                 ],  
  27.                 'lng' => 'text',  
  28.                 'lat' => 'text',  
  29.             ]  
  30.         ]  
  31.     ];  
  32. }  

 

在options中添加额外的属性

PHP Code复制内容到剪贴板
  1.     public function behaviors()  
  2.     {  
  3.         return [  
  4.             [  
  5.                 'class' => DynamicFormBehavior::className(),  
  6.                 'formAttributes' => [  
  7.                     'start_at' => [  
  8.                         'type' => 'datetime',  
  9.                         'options' => [  
  10.                             'style' => 'width:20px;',  
  11. //                            'widgetOptions' => [  
  12. //                                'style' => 'width:20px;'  
  13. //                            ]  
  14.                         ]  
  15.                     ],  
  16.                     //'start_at' => 'datetime',  
  17.                     'end_at' => 'datetime',  
  18.                     'city' => 'text',  
  19.                     'address' => 'text'  
  20.                 ]  
  21.             ]  
  22.         ];  
  23.     }  

 

 

 

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'routers')->widget(\unclead\multipleinput\MultipleInput::className(),[  
  2. 'max' => 4,  
  3. 'iconSource' => 'fa',  
  4. 'cloneButton' => true,  
  5. 'allowEmptyList' => true,  
  6. 'columns' => [  
  7.     [  
  8.         'name'  => 'user_id',  
  9.         'type'  => 'dropDownList',  
  10.         'title' => 'User',  
  11.         'defaultValue' => 1,  
  12.         'items' => [  
  13.            1 => 'User 1',  
  14.             2 => 'User 2'  
  15.         ]  
  16.     ],  
  17.     [  
  18.         'name'  => 'day',  
  19.         'type'  => \kartik\date\DatePicker::class,  
  20.         'title' => 'Day',  
  21.         'value' => function($data) {  
  22.             return $data['day'];  
  23.         },  
  24.         'items' => [  
  25.             '0' => 'Saturday',  
  26.             '1' => 'Monday'  
  27.         ],  
  28.         'options' => [  
  29.             'pluginOptions' => [  
  30.                 'format' => 'dd.mm.yyyy',  
  31.                 'todayHighlight' => true  
  32.             ]  
  33.         ]  
  34.     ],  
  35.     [  
  36.         'name'  => 'priority',  
  37.         'title' => 'Priority',  
  38.         'enableError' => true,  
  39.         'options' => [  
  40.             'class' => 'input-priority'  
  41.         ]  
  42.     ]  
  43.    ],  
  44. ]) ?>  

 

 

 

 

 

 

18、jstree树组件:

WX20200707-165230@2x.png

PHP Code复制内容到剪贴板
  1. <?php echo \backend\widgets\jstree\JstreeWidget::widget([  
  2.     "name" => "departmentJstree",  
  3.     "nodes" => \common\models\Organization::treeList(),  
  4.     "options" => [  
  5.             "id" => "departmentJstree"  
  6.     ]  
  7. ]) ?>  

 

 

格式固定,id,pid,title,options是选项

如果需要展开,需要加data-jstree = {opened:true}

如果需要选中,需要加data-jstree = {selected:true}

PHP Code复制内容到剪贴板
  1. /**  
  2.  * 返回组织机构的全部树结构  
  3.  * @return array  
  4.  */    
  5. static function treeList(){    
  6.     $list = self::find()->select(['id''parent_id as pid''title'])->orderBy('sort asc,id asc')->asArray()->all();    
  7.         $list = self::find()->select(['id''parent_id as pid''title'])->orderBy('sort asc,id asc')->asArray()->all();  
  8.         $list = array_map(function ($itemuse ($selected) {  
  9.             $item["options"] = [  
  10.                 "data-jstree" => [  
  11.                     'icon' => 'fa-building-o',  
  12.                     'id' => $item["id"],  
  13.                     'parent_id' => $item["pid"]  
  14.                 ]  
  15.             ];  
  16.             if ($item["parent_id"] == 0) {  
  17.                 // 第一层展开  
  18.                 $item["options"]["data-jstree"]["opened"] = true;  
  19.             }  
  20.             // 指定id高亮显示  
  21.             if ($item["id"] == $selected) {  
  22.                 $item["options"]["data-jstree"]["selected"] = true;  
  23.             }  
  24.             return $item;  
  25.         }, $list);  
  26.     
  27.       p(Json::encode($list));    
  28.     return Tree::build($list,"id","pid","children",0);    
  29. }    

 

 

PHP Code复制内容到剪贴板
  1. [  
  2.     {  
  3.         "id""1",  
  4.         "pid""0",  
  5.         "title""南京xxx公司",  
  6.         "options": {  
  7.             "data-jstree": {  
  8.                 "opened": true  
  9.             }  
  10.         }  
  11.     },  
  12.     {  
  13.         "id""2",  
  14.         "pid""1",  
  15.         "title""技术部",  
  16.         "options": {  
  17.             "data-jstree": {  
  18.                 "selected": true  
  19.             }  
  20.         }  
  21.     },  
  22.     {  
  23.         "id""3",  
  24.         "pid""1",  
  25.         "title""财务部",  
  26.         "options": {  
  27.             "data-jstree": {  
  28.                 "opened": true  
  29.             }  
  30.         }  
  31.     },  
  32.     {  
  33.         "id""4",  
  34.         "pid""1",  
  35.         "title""业务部",  
  36.         "options": {  
  37.             "data-jstree": {  
  38.                 "opened": true  
  39.             }  
  40.         }  
  41.     },  
  42.     {  
  43.         "id""5",  
  44.         "pid""1",  
  45.         "title""总经办",  
  46.         "options": {  
  47.             "data-jstree": {  
  48.                 "opened": true  
  49.             }  
  50.         }  
  51.     },  
  52.     {  
  53.         "id""6",  
  54.         "pid""1",  
  55.         "title""营销中心",  
  56.         "options": {  
  57.             "data-jstree": {  
  58.                 "opened": true  
  59.             }  
  60.         }  
  61.     },  
  62.     {  
  63.         "id""7",  
  64.         "pid""6",  
  65.         "title""市场部",  
  66.         "options": {  
  67.             "data-jstree": {  
  68.                 "opened": true  
  69.             }  
  70.         }  
  71.     },  
  72.     {  
  73.         "id""8",  
  74.         "pid""6",  
  75.         "title""公关部",  
  76.         "options": {  
  77.             "data-jstree": {  
  78.                 "opened": true  
  79.             }  
  80.         }  
  81.     },  
  82.     {  
  83.         "id""9",  
  84.         "pid""6",  
  85.         "title""技术支持部",  
  86.         "options": {  
  87.             "data-jstree": {  
  88.                 "opened": true  
  89.             }  
  90.         }  
  91.     }  
  92. ]  

 

需要添加自定义图标,则:

PHP Code复制内容到剪贴板
  1. {  
  2.     "id""9",  
  3.     "pid""6",  
  4.     "title""技术支持部",  
  5.     "options": {  
  6.         "data-jstree": {  
  7.             "opened": true,  
  8.             "icon""fa-building-o"  
  9.         }  
  10.     }  
  11. }  

 

添加点击事件:

PHP Code复制内容到剪贴板
  1. <?php $this->beginBlock('js') ?>  
  2. <script>  
  3.     $('#departmentJstree').on("changed.jstree"function (e, data) {  
  4.         // if(data.selected.length) {  
  5.         console.log(data.instance.get_node(data.selected[0]).data.jstree);  
  6.         // console.log(data.instance.get_node(data.selected[0]).id);  
  7.         // alert('The selected node is: ' + data.instance.get_node(data.selected[0]).text);  
  8.         // }  
  9.     });  
  10. </script>  
  11. <?php $this->endBlock() ?>  

 

添加右键菜单,plugin = "contextmenu"

WX20200726-191941@2x.png

PHP Code复制内容到剪贴板
  1. <?php echo \backend\widgets\jstree\JstreeContextmenuWidget::widget([  
  2.     "id" => "departmentJstree"//div的id命名,唯一值  
  3.     "dataUrl" => Url::to(["get-tree""org_id" => $org_id]),// 源数据的ajax请求地址  
  4.     "create" => [  
  5.         "url" => Url::to(["create"]),// 创建的请求地址  
  6.         "label" => "添加组织机构",  
  7.         "area" => ["800px","520px"], // 新增的layer宽、高  
  8.     ],  
  9.     "update" => [  
  10.         "url" => Url::to(["update"]),  
  11.         "label" => "修改组织机构",  
  12.         "area" => ["800px","520px"], // 编辑的layer宽、高  
  13.     ],  
  14.     "delete" => [  
  15.         "url" => Url::to(["delete"]),  
  16.         "label" => "删除组织机构"  
  17.     ],  
  18.     "clickCallback" => "clickDepartmentHandle"  
  19. ]) ?>  
  20. v>  

 

 

PHP Code复制内容到剪贴板
  1. <?php $this->beginBlock('js') ?>  
  2.     <script>  
  3.         var containerName = "#container-organization";   // 成员列表容器  
  4.         var orgId = 0;  
  5.   
  6.         // 点击左侧菜单  
  7.         function clickDepartmentHandle(e,data) {  
  8.             if (data.selected.length) {  
  9.                 //当前选中节点的Id--多选时只能得到第一个被选中的值  
  10.                 var domId = data.instance.get_node(data.selected[0]).id;  
  11.                 //当前选中节点的文本值-和上面方法一样只能的得到第一个被选中的值  
  12.                 var value = data.instance.get_node(data.selected[0]).text;  
  13.                 // console.log(domId,value);  
  14.                 var url = "<?=Url::to(["index"])?>?org_id=" + domId;  
  15.                 $.pjax.reload({url: url, container: containerName, timeout: 0});  
  16.             }  
  17.         }  
  18.   
  19.     </script>  
  20. <?php $this->endBlock() ?>  

 

支持搜索框:

WX20200730-181107@2x.png

这里的id一定要是tree组件的id 加 _q,否则js无效

XML/HTML Code复制内容到剪贴板
  1. <input type="text" class="form-control" id="departmentJstree_q" name="" placeholder="搜索部门">  

 

PHP Code复制内容到剪贴板
  1. <?php echo \backend\widgets\jstree\JstreeContextmenuWidget::widget([  
  2.      "id" => "departmentJstree"//div的id命名,唯一值  
  3.      "dataUrl" => Url::to(["get-tree""org_id" => $org_id]),// 源数据的ajax请求地址  
  4.      "create" => [  
  5.          "url" => Url::to(["create"]),// 创建的请求地址  
  6.          "label" => "添加部门",  
  7.          "area" => ["800px","520px"], // 新增的layer宽、高  
  8.      ],  
  9.      "update" => [  
  10.          "url" => Url::to(["update"]),  
  11.          "label" => "修改部门",  
  12.          "area" => ["800px","520px"], // 编辑的layer宽、高  
  13.      ],  
  14.      "delete" => [  
  15.          "url" => Url::to(["delete"]),  
  16.          "label" => "删除部门"  
  17.      ],  
  18.      "clickCallback" => "clickDepartmentHandle",  
  19.      "plugin" => ["contextmenu","search"], // 重点在这里,多添加一个search  
  20.  ]) ?>  

 

 

 

 

19、基于data-tables组件,水平滚动条,右侧内容超出隐藏,可滚动

 WX20200722-221057@2x.png

PHP Code复制内容到剪贴板
  1. use backend\widgets\grid\GridViewX;  
  2.   
  3.   
  4.                 <?= GridViewX::widget([  
  5.                     'dataProvider' => $dataProvider,  
  6.                     //'filterModel' => $searchModel,  
  7. //                    'id' => 'article-grid',  
  8. //                    'tableOptions' => [  
  9. //                        'class' => 'table table-hover dataTable table-striped w-full text-nowrap',  
  10. //                        'data-plugin' => 'dataTable',  
  11. //                        'data-scroll-x' => 'true',  
  12. //                        'data-responsive' => 'false',  
  13. //                        'style'=>'width:800px'  
  14. //                    ],  
  15.                     'columns' => [  
  16.                         ['class' => 'yii\grid\SerialColumn'],  
  17.                         'id',  
  18.                         [  
  19.                             'attribute' => 'title',  
  20.                             'value' => function ($model) {  
  21.                                 return Html::a($model->title, Yii::$app->config->get('SITE_URL') . '/' . $model->id . '.html', ['target' => '_blank''no-iframe' => '1']);  
  22.                             },  
  23.                             'format' => 'raw',  
  24.                             'enableSorting' => false  
  25.                         ],  
  26.                         'category.title:text:分类',  
  27.                         [  
  28.                             'label' => '标签',  
  29.                             'value' => function ($model) {  
  30.                                 $html = '';  
  31.                                 foreach ($model->tags as $tag) {  
  32.                                     $html .= ' <span class="badge badge-' . $tag->level . '">' . $tag->name . '</span>';  
  33.                                 }  
  34.                                 return $html;  
  35.                             },  
  36.                             'format' => 'raw'  
  37.                         ],  
  38.                         'trueView',  
  39.                         [  
  40.                             'class' => 'backend\widgets\grid\SwitcherColumn',  
  41.                             'attribute' => 'is_top'  
  42.                         ],  
  43.                         [  
  44.                             'class' => 'backend\widgets\grid\SwitcherColumn',  
  45.                             'attribute' => 'status'  
  46.                         ],  
  47.                         'profile.nickname:text:作者',  
  48.                         [  
  49.                             'class' => '\backend\widgets\grid\ActionColumn',  
  50.                             'template' => '{update} {delete} {comment} {refresh}',  
  51.                             'buttons' => [  
  52.                                 'update' => function ($url$model$key) {  
  53.                                     return Html::a("<i class='icon wb-edit'></i>",$url,["target"=>"_blank","data-title"=>"编辑"]);  
  54.                                 },  
  55.                                 'delete' => function ($url$model$key) {  
  56.                                     return Html::createAjaxBtn($url"<i class='icon wb-close'></i>", [  
  57.                                         "data-confirm" => "确定要删除吗?删除后可在回收站恢复",  
  58.                                         "data-method" => "post",  
  59. //                                        'data-toggle' => 'tooltip',  
  60. //                                        'data-original-title' => '删除'  
  61.                                     ]);  
  62.                                 },  
  63.                                 'comment' => function ($url$model$key) {  
  64.                                     return Html::a("去评论", ["/comment/default/list""module" => "document""id" => $model->id], ['class' => 'btn btn-info btn-xs''target' => '_blank''data-title' => '评论']);  
  65.                                 },  
  66.                                 'refresh' => function ($url$model$key) {  
  67.                                     return Html::createAjaxBtn($url"刷新", ['class' => 'btn btn-primary btn-xs']);  
  68.   
  69.                                 },  
  70.                             ]  
  71.                         ],  
  72.                     ],  
  73.                 ]); ?>  

 

编辑和删除,在数量只有一两条的时候不能加tooltip,由于滚动条的缘故,会有闪现的现象,测试了一下,数量超过10条就正常了,可以加tooltip,也不会发生闪现的现象

 

20、日期选择插件 / 日期+时间选择插件

WX20200825-101916@2x.png

PHP Code复制内容到剪贴板
  1. <?= $form->field($moduleModel'birthday')->widget(DatePicker::className(), [  
  2.     'options' => [  
  3.         'placeholder' => '输入出生年月',  
  4.         'autocomplete' => 'off',  
  5.     ],  
  6.     'pluginOptions' => [  
  7.         'autoclose' => true,  
  8.         'format' => 'yyyy-mm-dd',  
  9.         'todayHighlight' => true  
  10.     ]  
  11. ]) ?>  

 

 

 

自定义name与value

PHP Code复制内容到剪贴板
  1. <?= \kartik\date\DatePicker::widget([  
  2.     "name" => "inspection_time",  
  3.     "value" => $vv->inspection_time,  
  4.     'options' => [  
  5.         'placeholder' => '输入年检日期',  
  6.         'autocomplete' => 'off',  
  7.         'class' => 'update-inspection-time',  
  8.         'data-url' => Url::to(["update-inspection-time""id" => $vv->id]),  
  9.     ],  
  10.     'pluginOptions' => [  
  11.         'autoclose' => true,  
  12.         'format' => 'yyyy-mm-dd',  
  13.         'todayHighlight' => true  
  14.     ]  
  15. ]) ?>  

 

可选的日期格式:

yyyy-mm-dd
yyyy-mm-dd hh:ii
yyyy-mm-dd hh:ii:ss

pluginOptions支持:

'startDate' =>date('Y-m-d'), //设置今天之前的日期不能选择 

'startView'=>2, //其实范围(0:日 1:天 2:年)

'maxViewMode'=>2, //最大选择范围(年)

'minViewMode'=>2, //最小选择范围(年)

'todayHighlight' => true, // 今日高亮

'autoclose' => true, // 选择后自动关闭

'todayBtn' => true, // 今日按钮显示

 

可以添加callback回调:

JavaScript Code复制内容到剪贴板
  1. pluginEvents = [  
  2.     "show" => "function(e) {  # `e` here contains the extra attributes }",  
  3.     "hide" => "function(e) {  # `e` here contains the extra attributes }",  
  4.     "clearDate" => "function(e) {  # `e` here contains the extra attributes }",  
  5.     "changeDate" => "function(e) {  # `e` here contains the extra attributes }",  
  6.     "changeYear" => "function(e) {  # `e` here contains the extra attributes }",  
  7.     "changeMonth" => "function(e) {  # `e` here contains the extra attributes }",  
  8. ];  

 

例:

PHP Code复制内容到剪贴板
  1. "changeDate" => "function(e) { updateInspectionTime(e,this) }"  
  2.   
  3.   
  4. <script>  
  5.   
  6.         function updateInspectionTime(e,obj){  
  7.             var date = Date.parse(e.date); //毫秒级时间戳  
  8.             date = YYformatDate(date,"Y-m-d");  
  9.             var dom = e.target.getElementsByTagName("input")[0]; //第一个input,即输入框  
  10.             var url = dom.getAttribute("data-url"); //获取属性的data-url  
  11.             // console.log(date);  
  12.             // console.log(url);  
  13.               
  14.         }  
  15.   
  16. </script>  

 

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'collectionTime')->widget(\kartik\datetime\DateTimePicker::class, [  
  2.     'options' => [  
  3.         'placeholder' => ''  
  4.     ],  
  5.     'pluginOptions' => [  
  6.         'autoclose' => true,  
  7.         'todayHighlight' => true,  
  8.         'format' => 'yyyy-mm-dd HH:ii:ss'  
  9.     ]  
  10. ]) ?>  

 

 

 

 

21、类似钉钉写日志的多值字段小部件显示

21.png

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'content', ['template' => "{label} 
  2. ss='col-md-6'>{input}</div>"])->widget(\backend\widgets\multitextarea\MultiTextareaWidget::class, [  
  3.     'columns' => [  
  4.         [  
  5.             'name'  => 'field',  
  6.             'options' => [  
  7.                 'class' => 'title'  
  8.             ]  
  9.         ],  
  10.         [  
  11.             'name'  => 'value',  
  12.             'options' => [  
  13.                 'class' => 'form-control'  
  14.             ]  
  15.         ],  
  16.     ]  
  17. ])->label("") ?>  

 

单独使用: 

PHP Code复制内容到剪贴板
  1. <?= \backend\widgets\multitextarea\MultiTextareaWidget::widget([  
  2.     "name" => "content",  
  3.     "columns" => [  
  4.         [  
  5.             "name" => "field"  
  6.         ],  
  7.         [  
  8.             "name" => "value"  
  9.         ]  
  10.     ],  
  11.     "value" => [  
  12.         [  
  13.             "field" => "待办任务",  
  14.             "value" => "标题12"  
  15.         ],  
  16.         [  
  17.             "field" => "需协调的任务",  
  18.             "value" => "任务xxx"  
  19.         ]  
  20.     ],  
  21. ]) ?>  

 

22、echarts图表及API配置

 未命名.png

PHP Code复制内容到剪贴板
  1. <?= \common\widgets\echarts\Echarts::widget([  
  2.     'config' => [  
  3.         'server' => Url::to(['echarts']),  
  4.         'height' => '315px'  
  5.     ]  
  6. ]) ?>  

 

路由返回的数据为:

code: "201"

data: {

      fieldsName: ["test"]

      seriesData: [{field: "price", name: "test", type: "line",…}]

      xAxisData: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00",…]

}

message: "ok" 

 

未命名.png

PHP Code复制内容到剪贴板
  1. <?= \backend\widgets\daterangepicker\DateRangePickerWidget::widget([  
  2.                             'name' => 'queryDate-' . $boxId,  
  3.                             'value' => '',  
  4.                             'startAttribute' => 'start_time',  
  5.                             'endAttribute' => 'end_time',  
  6.                             'options' => [  
  7.                                 'class' => 'form-control choose-picker-input',  
  8.                                 'placeholder' => '开始时间 - 结束时间'  
  9.                             ],  
  10.                             'pluginOptions' => [  
  11.                                 'locale' => ['format' => 'YYYY-MM-DD'],  
  12.     //        'timePicker' => true, //显示时间  
  13.     //        'timePicker24Hour' => true, //时间制  
  14.     //        'timePickerSeconds' => true, //时间显示到秒  
  15.                             ],  
  16.                             'pluginEvents' => [  
  17.                                 "apply.daterangepicker" => "function(ev, picker) { 
  18.                                     var startDate = picker.startDate.format('YYYY-MM-DD'); 
  19.                                     var endDate = picker.endDate.format('YYYY-MM-DD'); 
  20.                                     // 更新当前input的日期显示 
  21.                                     $(this).val(startDate +' - '+endDate); 
  22.                                 }",  
  23.                             ],  
  24.                             'callback' => ' 
  25.                                 var boxID = "'.$boxId.'"; 
  26.                                 // 触发点击 
  27.                                 console.log("触发点击") 
  28.                                 let startDate = start.format(\'YYYY-MM-DD\'); 
  29.                                 let endDate = end.format(\'YYYY-MM-DD\'); 
  30.                                 $(\'#freedom-\' + boxID).attr(\'data-start\', startDate);// 更新按钮开始日期 
  31.                                 $(\'#freedom-\' + boxID).attr(\'data-end\', endDate);// 更新按钮结束日期 
  32.                                 // 触发点击 
  33.                                 $(\'#freedom-\' + boxID).trigger(\'click\'); 
  34.                             '  
  35.                         ]) ?>  

 

 

23、选择省市区小部件

行政区划划代码:http://www.mca.gov.cn/article/sj/xzqh/1980/

 

PHP Code复制内容到剪贴板
  1. <?= backend\widgets\choose\ChooseRegionWidget::widget(  
  2.     [  
  3.         'province' => [  
  4.             "name" => Html::getInputName($moduleModel"province"),  
  5.             "value" => $moduleModel->province  
  6.         ],  
  7.         'city' => [  
  8.             "name" => Html::getInputName($moduleModel"city"),  
  9.             "value" => $moduleModel->city  
  10.         ],  
  11.         'district' => [  
  12.             "name" => Html::getInputName($moduleModel"district"),  
  13.             "value" => $moduleModel->district  
  14.         ],  
  15.         'field' => 'area_name'  
  16.     ]  
  17. ) ?>  

 

参数说明:

province 省份

--name 生成的select的name名称,为了实现form表单的增改
--value 生成的select的默认选择项,实现默认选择项

city 城市

--name
--value

district 区/县

--name
--value

field 表单存储的值,如:

--id 地区唯一一ID,但是如果该项被删除,会影响较多数据(不建议)
--area_name 地区名称,数据比较清晰
--area_code 地区编号


小部件默认存储【地区名称】

label 默认是“选择地区”,支持自定义

showLable 默认是true,是否显示左侧的label,可以不显示

 

本文来自于:http://www.yoyo88.cn/note/yoyocmf/499.html

下一篇 V2.0 - API
Powered by yoyo苏ICP备15045725号