下拉菜单 支持按钮(单选)小部件
yoyocmf 2019-09-05 22:13:16

 不需要新增按钮,只要引入layui的css库,即支持,无需使用form的js初始化

下拉框小部件.png

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'farm_block_area_id', [  
  2.     'template' => '{label}<div class="col-sm-4">{input}</div><div class="col-sm-2">{error}</div>',  
  3.     'labelOptions' => ['class' => 'col-sm-2 control-label'],  
  4. ])->widget(\backend\widgets\dropDown\SingleDropDownAndAddWidget::className(), [  
  5.     'list' => \backend\modules\basic\models\FarmBlockArea::getDropDownList(),  
  6.     'search' => false,                  // 是否允许搜索,默认true 允许搜索  
  7.     'options' => [  
  8.         'input_tips' => '请选择分区',         // 选择框默认文字提示  
  9.         'select_tips' => '请选择分区tips',    // 下拉列表第一行文字提示  
  10.     ]  
  11. ])->label("选择分区") ?>  

 

 

如果有model和attribute,样式需要自定义,可以:

PHP Code复制内容到剪贴板
  1. <?= SingleDropDownAndAddWidget::widget(  
  2.     [  
  3.         'model' => $model,  
  4.         'attribute' => 'unit_id',  
  5.         'list' => Unit::getDropDownList(),  
  6.         'options' => [  
  7.             // 'input_tips' => '请选择分区',         // 选择框默认文字提示  
  8.             // 'select_tips' => '请选择分区tips',    // 下拉列表第一行文字提示  
  9.             'button_txt' => '添加分区',           // 显示最下方的添加按钮的文字  
  10.             'button_url' => \yii\helpers\Url::to(["/basic/farm-block-area/create-simple"]),// 点击添加按钮弹窗的url  
  11.             'dialog_title' => '弹窗的标题',  
  12.             'dialog_width' => '700px',  // 默认为700px,支持百分比与像素  
  13.             'dialog_height' => '300px'// 默认为90%,支持百分比与像素  
  14.         ]  
  15.     ]  
  16. ) ?>  

 

 

下拉框小部件2.png 

PHP Code复制内容到剪贴板
  1. <?= \backend\widgets\dropDown\SingleDropDownAndAddWidget::widget(  
  2.     [  
  3.         'name' => 'choose-drop-down-list',  
  4.   'list' => \backend\modules\basic\models\FarmBlockArea::getDropDownList(),  
  5.         'list' => [  
  6.             0 => "A区域",  
  7.             1 => "    A-1区域",  
  8.             2 => "B区域",  
  9.             3 => "    B-1区域",  
  10.             4 => "    B-2区域",  
  11.             5 => "    B-4区域",  
  12.         ],  
  13.         'options' => [  
  14.             'value' => '3',                     // 默认选择下拉项  
  15.             'input_tips' => '请选择分区',         // 选择框默认文字提示  
  16.             'select_tips' => '请选择分区tips',    // 下拉列表第一行文字提示  
  17.         ]  
  18.     ]  
  19. ) ?>  

 这里的list里面空格传&nbsp;

 

 下拉框小部件3.png

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'farm_block_area_id', [  
  2.     'template' => '{label}<div class="col-sm-4">{input}</div><div class="col-sm-2">{error}</div>',  
  3.     'labelOptions' => ['class' => 'col-sm-2 control-label'],  
  4. ])->widget(\backend\widgets\dropDown\SingleDropDownAndAddWidget::className(), [  
  5.     'list' => \backend\modules\basic\models\FarmBlockArea::getDropDownList(),  
  6.     'search' => false,                  // 是否允许搜索,默认true 允许搜索  
  7.     'options' => [  
  8.         'input_tips' => '请选择分区',         // 选择框默认文字提示  
  9.         'select_tips' => '请选择分区tips',    // 下拉列表第一行文字提示  
  10.         'button_txt' => '添加分区',           // 显示最下方的添加按钮的文字  
  11.         'button_url' => \yii\helpers\Url::to(["/basic/farm-block-area/create"]),// 点击添加按钮弹窗的url  
  12.         'dialog_title' => '弹窗的标题'  
  13.     ]  
  14. ])->label("选择分区") ?>  

 

下拉框小部件4.png 

PHP Code复制内容到剪贴板
  1. <?= \backend\widgets\dropDown\SingleDropDownAndAddWidget::widget(  
  2.     [  
  3.         'name' => 'choose-drop-down-list',  
  4.   'list' => \backend\modules\basic\models\FarmBlockArea::getDropDownList(),  
  5.         'list' => [  
  6.             0 => "A区域",  
  7.             1 => "    A-1区域",  
  8.             2 => "B区域",  
  9.             3 => "    B-1区域",  
  10.             4 => "    B-2区域",  
  11.             5 => "    B-4区域",  
  12.         ],  
  13.         'options' => [  
  14.             'value' => '3',                     // 默认选择下拉项  
  15.             'input_tips' => '请选择分区',         // 选择框默认文字提示  
  16.             'select_tips' => '请选择分区tips',    // 下拉列表第一行文字提示  
  17.             'button_txt' => '添加分区',           // 显示最下方的添加按钮的文字  
  18.             'button_url' => \yii\helpers\Url::to(["/basic/farm-block-area/create"]),// 点击添加按钮弹窗的url  
  19.             'dialog_title' => '弹窗的标题'  
  20.         ]  
  21.     ]  
  22. ) ?>  

 

2019.9.6 新增属性

dialog_width 弹窗宽度,默认为700px 

dialog_height 弹窗高度,默认为90%

PHP Code复制内容到剪贴板
  1. <?= $form->field($model'farm_block_area_id')->widget(\backend\widgets\dropDown\SingleDropDownAndAddWidget::className(), [  
  2.     'list' => \backend\modules\basic\models\FarmBlockArea::getDropDownList(),  
  3.     'search' => false,                  // 是否允许搜索,默认true 允许搜索  
  4.     'options' => [  
  5.         'input_tips' => '请选择分区',         // 选择框默认文字提示  
  6.         'button_txt' => '添加分区',           // 显示最下方的添加按钮的文字  
  7.         'button_url' => \yii\helpers\Url::to(["/basic/farm-block-area/create-simple"]),// 点击添加按钮弹窗的url  
  8.         'dialog_title' => '弹窗的标题',  
  9.         'dialog_width' => '700px',  // 默认为700px,支持百分比与像素  
  10.         'dialog_height' => '300px'// 默认为90%,支持百分比与像素  
  11.     ]  
  12. ])->label("选择分区") ?>  

 

choose_list_callback_type 回调类型,默认为空,支持传参func(JS方法名)  /  str (执行JS)

choose_list_callback 回调方法名,或者 执行 js 

PHP Code复制内容到剪贴板
  1. <?= SingleDropDownAndAddWidget::widget(  
  2.     [  
  3.         'model' => $model,  
  4.         'attribute' => 'min_unit_id',  
  5.         'list' => $unitList,  
  6.         'options' => [  
  7.             'button_txt' => '新增单位',           // 显示最下方的添加按钮的文字  
  8.             'button_url' => \yii\helpers\Url::to(["/basic/farm-block-area/create-simple"]),// 点击添加按钮弹窗的url  
  9.             'dialog_title' => '新增单位',  
  10.             // 'dialog_width' => '700px',  // 默认为700px,支持百分比与像素  
  11.             'dialog_height' => '300px'// 默认为90%,支持百分比与像素  
  12.             'choose_list_callback_type' => 'func',  //  
  13.             'choose_list_callback' => 'showText',   //  
  14.         ]  
  15.     ]  
  16. ) ?>  

 

小部件中的js是闭包函数,js只能写在外面,不支持写在块里,返回参数

id => 选择的option的id 

txt => 选择的option的文字

JavaScript Code复制内容到剪贴板
  1. <script>  
  2.     function showText(obj) {  
  3.         var txt = obj.txt;  
  4.         document.getElementById("showMinUnitTxt1").innerHTML = txt;  
  5.         document.getElementById("showMinUnitTxt2").innerHTML = txt;  
  6.     }  
  7. </script>  

 

 

 

 

 

 

 

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

Powered by yoyo苏ICP备15045725号-1