### xm-select插件文檔地址
[xm-select插件文檔](https://maplemei.gitee.io/xm-select)
## 方法
xselect下拉擴展實例:
```php
$xselect = $formControl->xselectCascader();
```
間距: `int`
```php
$xselect->indent()
```
是否嚴格: `boolean` 默認: `true`
```php
$xselect->strict(false)
```
## 公共方法
是否展示三角圖標: `默認 true`
```php
$xselect->showFolderIcon(false);
```
是否顯示虛線: `默認 true`
```php
$xselect->showLine(false);
```
內容文本間距: `默認 20`
```php
$xselect->indent(50);
```
默認展開節點的數組, 為 true 時, 展開所有節點: `默認 false`
```php
$xselect->expandedKeys(true);
```
是否嚴格遵守父子模式: `默認 true`
```php
$xselect->strict(false);
```
是否開啟極簡模式: `默認 false`
```php
$xselect->simple(true);
```
點擊節點是否展開: `默認 false`
```php
$xselect->clickExpand(true);
```
點擊節點是否選中: `默認 true`
```php
$xselect->clickCheck(false);
```
單選模式: `默認是 多選模式`
```php
$xselect->radio();
```
是否重復選: `默認: false`
```php
$xselect->repeat();
```
設置選擇后,關閉選項框:
```php
$xselect->clickClose();
```
超出自動換行:
```php
$xselect->autoRow();
```
新增其他配置項:
```php
$xselect->addPluginOption($filed, $value);
```
是否開啟分頁:`默認 false`
```php
$xselect->paging(true);
```
是否開啟工具欄:`默認 false`
```php
$xselect->toolbar(true);
```
開啟搜索:
```php
$xselect->filterable();
```
搜索延遲 ms: `默認 100`
```php
$xselect->delay(200);
```
搜索占位提示:
```php
$xselect->searchTips('請輸入搜索');
```
設置數據選項:
* 參數 說明 類型 可選值 默認值
* name 顯示名稱 string - name
* value 選中值, 當前多選唯一 string - value
* selected 是否選中 string - selected
* disabled 是否禁用 string - disabled
* children 分組children string - children
* optgroup 分組optgroup string - optgroup
```php
$xselect->data([
['name' => 'name1', 'value' => 1, 'children' => [
['name' => 'name1-2', 'value' => 12, 'children' => []],
['name' => 'name1-3', 'value' => 13, 'children' => []],
['name' => 'name1-4', 'value' => 14, 'children' => []],
['name' => 'name1-5', 'value' => 15, 'children' => []],
['name' => 'name1-6', 'value' => 16, 'children' => []],
['name' => 'name1-7', 'value' => 17, 'children' => []],
]],
['name' => 'name2', 'value' => 2, 'children' => []],
['name' => 'name3', 'value' => 3, 'children' => []],
['name' => 'name4', 'value' => 4, 'children' => [
['name' => 'name4-5', 'value' => 45, 'children' => []],
['name' => 'name4-6', 'value' => 46, 'children' => []],
['name' => 'name4-7', 'value' => 47, 'children' => []],
]],
['name' => 'name5', 'value' => 5, 'children' => []],
['name' => 'name6', 'value' => 6, 'children' => []],
['name' => 'name7', 'value' => 7, 'children' => []],
]);
```
設置站位提示:
```php
$xselect->tips('請選擇');
```
設置默認值:
```php
$xselect->defaultValue(0, 10);
```
設置控件標簽:
```php
$xselect->label('區間');
```
設置為必填:
```php
$xselect->required(true);
```
設置注釋文本:
```php
$xselect->comment('這里是一個注釋文本');
```
設置柵欄布局 (默認:12`):
```php
$xselect->layout(6);
```
設置ui類:
```php
$sw->uiClass(['f13']);
```
設置style樣式:
```php
$sw->style();
```
設置html屬性:
```php
$sw->attribute();
```
## 示例
~~~
/**
* @return string
* @throws \yii\base\InvalidConfigException
*/
public function actionTree()
{
if ($this->isPost) {
return $this->asOk('success');
} else {
$formBuilder = FormBuilder::instance();
$formBuilder->setTitle('xm-select')
->setFormControl([
'a' => $this->formControl->xselect()->label('xm-select')->defaultValue([1])->data($this->getData())->tips('請選擇一哈!')->filterable()->radio()->clickClose(),
'd' => $this->formControl->xselectTree()
->label('xm-select-tree')
->defaultValue(['6'])
->data($this->getTreeData())
->tips('請選擇一哈!')
->filterable()
//->radio()
//->strict(false)
->expandedKeys(true)
->addPluginOption('height', '500px')
/*->clickClose()*/,
'e' => $this->formControl->xselectRemote()
->label('xm-select-remote')
->tips('請選擇一哈!')
->filterable()
->radio()
->clickClose()
->toolbar([
'show' => true,
])
->addPluginOption('tree', [
'show' => true,
])
->url(['form/remote'])
->httpMethod('get'),
'f' => $this->formControl->xselectCascader()
->label('xm-select-cascader')
->defaultValue(['6'])
->data($this->getTreeData())
->tips('請選擇一哈!')
->radio()
->clickClose()
->strict(false),
'g' => $this->formControl->file()
->label('測試一下')
->max(5)
->scenarioImage()
->scenarioVideo()
->scenarioAudio()
->scenarioOther()
->defaultValue('https://tfs.alipayobjects.com/images/partner/TB1TrI3cTVyDuNk6XeaXXXCWXXa'),
])
->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
- 手風琴
- 下拉菜單
- 輪播圖
- 模態框
- 媒體列表
- 自定義文件上傳