### 方法
動態下拉選擇控件實例:
```php
$select2= $formControl->selectDynamic();
```
select2配置項:
1. 選擇后,不關閉選項內容
```php
$select2->unCloseOnSelect();
```
2. 其他配置項設置
~~~
$select2->uiConfig($key, $value);
// 示例 1
$select2->uiConfig('allowClear', false); // 是否允許清除選中
// 示例 2
$select2->uiConfig('width', '120px'); // 控件寬
// 示例 3
$select2->uiConfig('selectedInOrder', false); // 多選時,是否按選擇順序排序
// 示例 4
$select2->uiConfig('selectedHideOption', false); // 多選時,是否隱藏已選擇過的選項
~~~
設置刷新按鈕:
```php
$select2->refreshBtn()
```
設置新增按鈕位置:`left|right`
```php
$select2->additionBtnPosition('left');
```
設置刷新按鈕位置:`left|right`
```php
$select2->refreshBtnPosition('right');
```
設置動態數據選項:
```php
$select2->dataUrl('admin/link')
```
> 動態數據選項格式
```php
public function actionLink()
{
$res = [
'中國' => [
['value' => 'D', 'text' => '鄭州市', 'disabled' => true],
['value' => 'E', 'text' => '東莞市'],
['value' => 'F', 'text' => '北京市'],
],
'美國' => [
['value' => 'G', 'text' => '西安市', 'disabled' => true],
['value' => 'H', 'text' => '新鄉市'],
['value' => 'I', 'text' => '洛陽市'],
],
];
$res2 = [
['value' => 'D', 'text' => '鄭州市', 'disabled' => false],
['value' => 'E', 'text' => '東莞市'],
['value' => 'F', 'text' => '北京市'],
['value' => 'G', 'text' => '新鄉市'],
['value' => 'H', 'text' => '洛陽市'],
['value' => 'I', 'text' => '開封市'],
['value' => 'IE', 'text' => '開封市2222'],
];
return $this->asOk('success', $res2);
}
```
動態新增
1. 依賴注入
```php
$select->additionBtn(function(DselectModal $model) {
return $modal->route('form/addition')->title('新增')->height(230);
})
```
2. DsType
```php
$dselectModel = new DselectModal;
$select->additionBtn($dselectModel->route('form/addition')->title('新增')->height(230))
```
3. array數組
```php
// modal模態框
$select->additionBtn([
'type' => 'modal',
'route' => Url::to('admin/get-all', ''),
'width' => '620px', // 指定modal的寬;
'height' => '750px',// 指定modal的高;
'title' => '',//指定modal標題
'closeBtn' => 0,//是否顯示底部關閉按鈕
])
// page單頁
$select->additionBtn([
'type' => 'page',
'route' => Url::to('admin/get-all', ''),
'target' => '_blank',
//支持有效的JS窗口對象
'window' => 'top',
])
```
設置多選分組選項:
```php
$select2->options([
// 分組名稱
'會員列表' => [
'A' => '數字1', // 選擇項
'B' => '數字2',
'C' => '數字3',
],
'日志列表' => [
'D' => '日志1',
'E' => '日志2',
'F' => '日志3',
],
]);
```
設置禁用項:
```php
$select->disabled([
'A', 'D',
]);
```
設置多選:
```php
$select->multiple();
```
設置控件標簽:
```php
$select2->label('下拉選擇');
```
設置占位提示:
```php
$select2->placeholder('請選擇');
```
設置默認值:
```php
$select2->defaultValue('B');
```
設置為必填:
```php
$select2->required(true);
```
設置注釋文本:
```php
$select2->comment('這里是一個注釋文本');
```
設置柵欄布局 (默認:12`):
```php
$select2->layout(6);
```
設置ui類:
```php
$select2->uiClass(['f13']);
```
設置style樣式:
```php
$select2->style();
```
設置html屬性:
```php
$select2->attribute();
```
### 鏈式調用
~~~
$formBuilder->setFormControl([
'a' => $this->formControl->text()->label('普通文本'),
'b' => $this->formControl->selectDynamic()
->label('動態下拉1')
->layout(12)
->required()
->placeholder('請填寫一下')
->defaultValue(['F'])
->unCloseOnSelect()
->multiple()
//->refreshBtn()
//->refreshBtnPosition()
->additionBtn(function (DselectModal $modal) {
return $modal->route('form/addition')->title('新增')->height(230);
})
//->additionBtnPosition()
->dataUrl('form/link')
->comment(''),
]);
~~~
### 代碼示例
~~~
/**
* @return string
* @throws \ReflectionException
* @throws \builder\base\UndefinedParamsException
* @throws \yii\base\InvalidConfigException
*/
public function actionDynamicSelect()
{
if ($this->isPost) {
return $this->asOk('提交成功');
} else {
$formBuilder = FormBuilder::instance();
$formBuilder->setTitle('動態下拉框')
->setRequiredStyle()
->setFormControl([
'a' => $this->formControl->text()->label('普通文本'),
'b' => $this->formControl->selectDynamic()
->label('動態下拉1')
->layout(12)
->required()
->placeholder('請填寫一下')
->defaultValue(['F'])
->unCloseOnSelect()
->multiple()
//->refreshBtn()
//->refreshBtnPosition()
->additionBtn(function (DselectModal $modal) {
return $modal->route('form/addition')->title('新增')->height(230);
})
//->additionBtnPosition()
->dataUrl('form/link')
->comment(''),
])
->setResetBtn()
->setSubmitBtn();
return $formBuilder->render();
}
}
~~~
- 簡介
- 安裝和配置
- 常用CLI命令
- 接口文檔生成工具
- 代碼提交
- 視圖構建器
- 表格 Table
- HTML
- 繼承布局 partial
- 表格標題 title
- ajax路由 ajaxRoute
- 表格根布局 rootLayout
- 表格主容器 classname
- 表格寬度 width
- 表格高度 height
- 表格最大高度 maxHeight
- 普通單元格的最小寬度 cellMinWidth
- 普通單元格的最大寬度 cellMaxWidth
- 開啟表格多行樣式 lineStyle
- 表格主鍵 primaryKey
- 設置額外的靜態資源包 extraAssetBundle
- 設置額外的CSS extraCss
- 設置額外的JS extraJs
- 分頁 page
- limits 頁碼選項
- limit 默認數據條數
- 工具篩選 toolbarFilter
- 工具篩選助手 toolbarFilter
- text文本
- select下拉框
- selectLink下拉聯動
- number 數字
- datetime/date/year/month/time 日期
- 表格行頭 tableHead
- 行頭助手 tableHead
- checkbox 多選列
- field 普通列
- toolbar 工具列
- 自定義工具欄 toolbarCustom
- 自定義工具欄助手 toolbarCustom
- 工具欄 - modal模態框
- 工具欄 - page單頁
- 工具欄 - ajax異步
- 表格行操作 rowOperation
- 行操作助手 rowOperation
- modal模態框
- page單頁
- AJAX調用
- 列篩選工具項 columnFilter
- 打印工具項 toolbarPrint
- 導出工具項 toolbarExports
- 窗口刷新工具項 toolbarRefresh
- (前端)是否開啟行合計 openTotalRow
- 初始請求 autoRequest
- 數據統計(額外的數據模板) HTML
- 設置表格切點內容 registerPointcut
- AJAX異步
- 設置表格數據或Query實例 query
- 數據統計(額外的數據模板) extraData
- Query排序 orderBy
- 表格數據列 columns
- 列依賴 columnDependency
- (后端)是否開啟行合計 totalRow
- 分頁 page
- 樹表格 TreeTable
- HTML~
- 繼承布局 partial
- 樹表格標題 title
- ajax路由 ajaxRoute
- children路由 treeAsyncOption
- 自定義屬性名選項 treeCustomNameOption
- 視圖相關的屬性集合 treeViewOption
- 數據相關屬性集合 treeDataOption
- 樹形表格根布局 rootLayout
- 樹表格主容器 classname
- 樹形表格寬度 width
- 樹形表格高度 height
- 樹形表格最大高度 maxHeight
- 普通單元格的最小寬度 cellMinWidth
- 普通單元格的最大寬度 cellMaxWidth
- 開啟多行樣式 lineStyle
- 設置主鍵 primaryKey
- 分頁 page
- limits 頁碼選項~
- limit 默認數據條數~
- 工具篩選 ttToolbarFilter
- 工具篩選助手 ttToolbarFilter
- text文本~
- select下拉框~
- selectLink下拉聯動
- number 數字~
- datetime/date/year/month/time 日期~
- 樹表格行頭 treeTableHead
- 行頭助手 treeTableHead
- checkbox 多選列
- field 普通列
- toolbar 工具列
- 頭部自定義工具欄 ttToolbarCustom
- 自定義工具欄助手 ttToolbarCustom
- 工具欄 - modal模態框~
- 工具欄 - page單頁~
- 工具欄 - ajax異步~
- 樹形表格行操作 ttRowOperation
- 行操作助手 ttRowOperation
- modal模態框
- page單頁~
- AJAX調用
- 列篩選工具項 ttColumnFilter
- 打印工具項 ttToolbarPrint
- 導出工具項 ttToolbarExports
- 窗口刷新工具項 ttToolbarRefresh
- (前端)是否開啟行合計 openTotalRow
- 初始請求 autoRequest~
- 數據統計(額外的數據模板) HTML
- 設置表格切點內容 registerPointcut
- 設置額外的靜態資源包 extraAssetBundle
- 設置額外的CSS extraCss~
- 設置額外的JS extraJs~
- AJAX
- 設置數據或Query實例 query
- 數據統計(額外的數據模板) extraData
- Query排序 orderBy
- 樹形表格數據列 ttColumns
- 列依賴 ttColumnDependency
- 自定義行合計(后端) totalRow
- 分頁 page~
- 表單 Form
- 表單布局 partial
- 提交鏈接 submitUrl
- 表單標題 title
- 表單根布局 rootLayout
- 表單尾部布局 footerLayout
- 表單分組 group
- 組柵欄格 groupCol
- 組布局 groupLayout
- 組注釋 groupComment
- 必填標記 requiredStyle
- 設置提交按鈕 submitBtn
- 設置重置按鈕 resetBtn
- 設置彈窗關閉按鈕 closeBtn
- 設置表單返回按鈕 backBtn
- 設置額外的按鈕 extraBtn
- 提交后自動關閉 autoClose
- 提交后自動返回 autoBack
- 提交確認 submitConfirm
- 提交后回調 submittedCalls
- 提交后重定向 submittedRedirect
- 設置額外的CSS extraCss
- 設置額外的JS extraJs
- 設置額外的資源包 extraAssetBundle
- 表單控件項 formControl
- 表單控件助手 formControl
- 文本 text
- 文本域 textarea
- 數字 number
- 密碼 password
- 隱藏控件 hidden
- 靜態文本 staticText
- 日期 datetime/date/year/month/time
- 滑塊 range
- 富文本 richText
- 單選 radio
- 多選(標簽)控件 checkbox / tag
- 開關 sw
- 文件 file
- (select2)下拉選擇 Select
- (select2)下拉聯動 SelectLink
- (select2)動態下拉 selectDynamic
- 區間 section
- 動態標簽 tag
- 交互 - 觸發器 trigger
- 交互 - 值連接 valueLink
- 交互 - 動態控件dynamicControl
- 控件項助手dynamicControl
- 文本 text~
- 文本域 textarea~
- 多選 checkbox~
- 開關 sw~
- 日期 datetime/date/year/month/time~
- 數字 number~
- 密碼 password ~
- 單選 radio ~
- 滑塊 range~
- 文件 file~
- 區間 section~
- (select2)下拉選擇 select~
- 下拉擴展 xselect
- 下拉樹 xselectTree
- 自定義(遠程)下拉 xselectRemote
- 下拉級聯 xselectCascader
- 注冊HTML切點+
- 分步表單 FormStep
- 局部繼承 partial
- 提交路由 submitUrl
- 標題 title
- 根布局 rootLayout
- 分步項 stepItem
- 提交按鈕 submitBtn
- 彈窗關閉按鈕 closeBtn
- 頁面返回按鈕 backBtn
- 設置額外的按鈕 extraBtn~
- 設置自動關閉 autoClose
- 設置自動返回 autoBack
- 設置提交確認框 submitConfirm
- 提交后回調 submittedCalls~
- 提交后重定向 fssRedirect
- 設置額外的CSS extraCss~~
- 設置額外的JS extraJs~~
- 設置額外的資源包 extraAssetBundle~
- 注冊HTML切點~
- 選項卡 Tab
- 選項卡局部繼承 partial
- 選項卡標題 title
- 選項卡根布局 rootLayout
- 選項卡風格 theme
- 選項卡內容項 tabItem
- 內容注冊助手 tabItem
- 注入構建器實例 builder
- 注入自定內容
- 設置額外的CSS extraCss~~~~
- 設置額外的JS extraJs~~~~
- 設置額外的資源包 extraAssetBundle~~~
- 注冊HTML切點
- 詳情列表 Lists
- 局部布局 partial
- 列表標題 title
- 根布局 rootLayout~
- 列表布局 listLayout
- 設置行數據 listRows
- 行數據助手 listRows
- 設置行
- 設置額外的CSS extraCss~~~
- 設置額外的JS extraJs~~~
- 設置額外的資源包 extraAssetBundle~~
- 注冊內容切點~
- 樹組件 Tree
- HTML方法
- 獨立繼承 partial
- AJAX路由 ajaxRoute
- 樹組件標題 title
- 樹組件根布局 rootLayout
- 樹布局 treeLayout
- 復選框 showCheckbox
- 手風琴模式 accordion
- 僅左側圖標伸縮 onlyIconControl
- 是否新窗口跳轉 isJump
- 是否開啟節點連接線 showLine
- 是否顯示全選/反選按鈕 switchCheckedBtn
- 是否顯示展開/折疊按鈕 switchSpreadBtn
- 是否初始化數據請求 autoRequest
- 額外的CSS extraCss
- 額外的JS extraJs
- 額外的資源包 extraAssetBundle
- 注冊內容切點
- 自定義操作項 operationItem
- 助手 operationItem
- 模態框 modal
- 單頁 page
- 異步 ajax
- AJAX.異步
- 設置數據 data
- 助手類
- 應用助手 App
- 數組助手 Arr
- 打印輸出 D
- 函數助手 Func
- HTML助手 H5
- HTTP助手 Http
- 數學 Math
- 數字助手 Num
- 正則 RegEx
- 字符串助手 Str
- 日期助手 T
- URL助手 Url
- 工具 Util
- Xml助手 Xml
- HTML組件
- yii小部件輸出轉return
- 手風琴
- 下拉菜單
- 輪播圖
- 模態框
- 媒體列表
- 自定義文件上傳