## 獲取構建器實例
1. `ViewBuilder`中獲取
```php
$viewBuilder = $this->viewBuilder;
$tab = $viewBuilder->tab;
```
2. `instance()`自身方法
```php
$tabBuilder = TabBuilder::instance();
```
3. `new`關鍵詞
```php
$formBuilder= new TabBuilder([
'id' => '__admin_tab',
]);
```
##完整示例
~~~
<?php
/**
* @link https://ym2.cleverstone.top
* @copyright Copyright (c) 2020 Yii Manager Software LLC
*/
namespace backend\controllers;
use builder\helper\D;
use builder\table\TableBuilder;
use common\models\Admin;
use Yii;
use builder\base\BaseController;
use yii\base\UserException;
use yii\helpers\Json;
/**
* 首頁
* @author cleverstone
* @since ym2.0
*/
class IndexController extends BaseController
{
public $actionVerbs = [
'index' => ['GET', 'POST'],
'link' => ['GET'],
'quit' => ['GET', 'POST'],
];
public $guestActions = [
'index',
'link',
];
/**
* @return string
* @throws \builder\base\InvalidInstanceException
* @throws \builder\base\NotFoundParamsException
* @throws \yii\base\InvalidConfigException
*/
public function actionIndex()
{
// 選項卡 - 表格1
$table1 = TableBuilder::instance([
'id' => 'table1_1',
]);
// 選項卡 - 表格2
$table2 = TableBuilder::instance([
'id' => 'table2_1',
]);
if ($this->isAjax) { // AJAX
switch ($table1->builderId) {
case $table1->id: // 表格1
return $table1->setQuery(function () {
return Admin::find();
})
->setOrderBy(['id' => SORT_DESC])
->setColumns([
'id',
'username',
'password_hash',
'email',
'mobile',
'status',
'group',
'created_at',
'updated_at',
'ro_delete3' => function ($row) {
return $row['id'] % 2;
},
])->render();
case $table2->id: // 表格2
return $table2->setQuery(function () {
return Admin::find();
})
->setOrderBy(['id' => SORT_DESC])
->setColumns([
'id',
'username',
'password_hash',
'email',
'mobile',
'status',
'group',
'created_at',
'updated_at',
'ro_delete3' => function ($row) {
return $row['id'] % 2;
},
])->render();
}
} else { // HTML
// 表格1
$table1->setTitle('管理員列表1')
->setAutoRequest(false)
//->registerPointcut(H5::alert('測試一下', 'success'))
//->registerPointcut(H5::alert('測試一下'), TableBuilder::POS_END)
->setTableHead([
$this->tableHead->checkbox(),
$this->tableHead->field('id')->title('ID_1'),
$this->tableHead->field('username')->title('賬號_1')->editText('admin/edit'),
$this->tableHead->field('password_hash')->title('密碼_1'),
$this->tableHead->field('email')->title('郵箱_1'),
$this->tableHead->field('mobile')->title('手機號_1'),
$this->tableHead->field('status')->title('狀態_1'),
$this->tableHead->field('group')->title('分組_1'),
$this->tableHead->field('created_at')->title('添加時間_1'),
$this->tableHead->field('updated_at')->title('更新時間_1'),
$this->tableHead->toolbar()->title('操作項_1'),
])
->setRowOperation([
// 詳情
$this->rowOperation->modal()->title('詳情_1')->icon('bi bi-plus-lg f15')->route('admin/detail')->closeBtn(),
$this->rowOperation->ajax()->title('刪除_1')->icon('bi bi-x-lg')->route('admin/delete')->method('POST')->group(),
$this->rowOperation->ajax()->title('我要刪除1_1')->icon('bi bi-x-lg')->route('admin/delete')->method('POST')->group(),
$this->rowOperation->ajax()->title('我要刪除2_1')->icon('bi bi-x-lg')->route('admin/delete')->method('POST')->group(),
$this->rowOperation->ajax()->title('我要刪除3_1')->id('ro_delete3')->icon('bi bi-x-lg')->route('admin/delete')->method('POST')->group(),
])
->setToolbarCustom([
// 表單
$this->toolbarCustom->modal()->title('表單_1')->icon('bi bi-plus-lg f15')->route('admin/add')->params(['_bid' => $table1->id]),
// 列表
$this->toolbarCustom->modal()->title('列表_1')->icon('bi bi-plus-lg f15')->route('admin/detail')->closeBtn(),
// 選項卡
$this->toolbarCustom->modal()->title('選項卡_1')->icon('bi bi-pencil-square f13')->route('admin/edit')->closeBtn(),
// AJAX
$this->toolbarCustom->page()->title('AJAX_1')->icon('bi bi-lock')->targetBlank()->params(['id'])->route('admin/add'),
])
->setToolbarFilter([
'keyword' => $this->toolbarFilter->text()->label('關鍵詞')->placeholder('請輸入賬號/姓名')->defaultValue()->attribute(['test' => 1]),
//'username' => $this->toolbarFilter->datetime()->style(['width' => '800px'])->label('注冊時間')->placeholder('請選擇注冊時間'),
//'username' => $this->toolbarFilter->datetime()->label('注冊時間_1')->placeholder('請選擇注冊時間'),
//'status' => $this->toolbarFilter->select()->label('用戶狀態_1')->placeholder('請選擇用戶狀態')->options(['normal' => '正常', 'deny' => '禁用',]),
//'link1' => $this->toolbarFilter->selectLink()->label('聯動1_1')->placeholder('請選擇')->route('admin/link')->initOptions(['a' => 'A', 'b' => 'B'])->targetLink('link2')->start(),
//'link2' => $this->toolbarFilter->selectLink()->label('聯動2_1')->placeholder('請選擇')->route('admin/link')->targetLink('link3')->through(),
//'link3' => $this->toolbarFilter->selectLink()->label('聯動3_1')->placeholder('請選擇')->route('admin/link')->targetLink('link4')->through(),
//'link4' => $this->toolbarFilter->selectLink()->label('聯動2_1')->placeholder('請選擇')->end(),
]);
// 表格2
$table2->setTitle('管理員列表2')
->setAutoRequest(false)
//->registerPointcut(H5::alert('測試一下', 'success'))
//->registerPointcut(H5::alert('測試一下'), TableBuilder::POS_END)
->setTableHead([
$this->tableHead->checkbox(),
$this->tableHead->field('id')->title('ID_2'),
$this->tableHead->field('username')->title('賬號_2')->editText('admin/edit'),
$this->tableHead->field('password_hash')->title('密碼_2'),
$this->tableHead->field('email')->title('郵箱_2'),
$this->tableHead->field('mobile')->title('手機號_2'),
$this->tableHead->field('status')->title('狀態_2'),
$this->tableHead->field('group')->title('分組_2'),
$this->tableHead->field('created_at')->title('添加時間_2'),
$this->tableHead->field('updated_at')->title('更新時間_2'),
$this->tableHead->toolbar()->title('操作項_2'),
])
->setRowOperation([
// 詳情
$this->rowOperation->modal()->title('詳情_2')->icon('bi bi-plus-lg f15')->route('admin/detail')->closeBtn(),
$this->rowOperation->ajax()->title('刪除_2')->icon('bi bi-x-lg')->route('admin/delete')->method('POST')->group(),
$this->rowOperation->ajax()->title('我要刪除1_2')->icon('bi bi-x-lg')->route('admin/delete')->method('POST')->group(),
$this->rowOperation->ajax()->title('我要刪除2_2')->icon('bi bi-x-lg')->route('admin/delete')->method('POST')->group(),
$this->rowOperation->ajax()->title('我要刪除3_2')->id('ro_delete3')->icon('bi bi-x-lg')->route('admin/delete')->method('POST')->group(),
])
->setToolbarCustom([
// 表單
$this->toolbarCustom->modal()->title('表單_2')->icon('bi bi-plus-lg f15')->route('admin/add')->params(['_bid' => $table2->id]),
// 列表
$this->toolbarCustom->modal()->title('列表_2')->icon('bi bi-plus-lg f15')->route('admin/detail')->closeBtn(),
// 選項卡
$this->toolbarCustom->modal()->title('選項卡_2')->icon('bi bi-pencil-square f13')->route('admin/edit')->closeBtn(),
// AJAX
$this->toolbarCustom->page()->title('AJAX_2')->icon('bi bi-lock')->targetBlank()->params(['id'])->route('admin/add'),
])
->setToolbarFilter([
'keyword' => $this->toolbarFilter->text()->label('關鍵詞')->placeholder('請輸入賬號/姓名')->defaultValue()->attribute(['test' => 1]),
//'username' => $this->toolbarFilter->datetime()->style(['width' => '800px'])->label('注冊時間')->placeholder('請選擇注冊時間'),
//'username' => $this->toolbarFilter->datetime()->label('注冊時間_2')->placeholder('請選擇注冊時間'),
//'status' => $this->toolbarFilter->select()->label('用戶狀態_2')->placeholder('請選擇用戶狀態')->options(['normal' => '正常', 'deny' => '禁用',]),
//'link1' => $this->toolbarFilter->selectLink()->label('聯動1_2')->placeholder('請選擇')->route('admin/link')->initOptions(['a' => 'A', 'b' => 'B'])->targetLink('link2')->start(),
//'link2' => $this->toolbarFilter->selectLink()->label('聯動2_2')->placeholder('請選擇')->route('admin/link')->targetLink('link3')->through(),
//'link3' => $this->toolbarFilter->selectLink()->label('聯動3_2')->placeholder('請選擇')->route('admin/link')->targetLink('link4')->through(),
//'link4' => $this->toolbarFilter->selectLink()->label('聯動2_2')->placeholder('請選擇')->end(),
]);
}
// 視圖構建器開始
$viewBuilder = $this->viewBuilder;
// 選項卡
$tab = $viewBuilder->tab;
$tab->setTheme('column')
->setTitle('選項卡')
->setTabItem([
'自定義' => $this->tabItem->custom('自定義的內容')->switchReloadProperty('')->selected(),
'表格1' => $this->tabItem->builder($table1)->switchReload(),
'表格2' => $this->tabItem->builder($table2)->switchReload(),
]);
return $viewBuilder->render();
}
/**
* 控制臺
* @return string
* @throws \builder\base\InvalidInstanceException
* @throws \builder\base\NotFoundParamsException
*/
/* public function actionIndex()
{
if ($this->isPost) {
// return $this->as403('登錄已失效!');
return $this->asOk('提交成功！');
} else {
$viewBuilder = $this->viewBuilder;
$form = $viewBuilder->form;
$form->setTitle('控制臺')
->setGroup('基本信息', 'base')
->setGroupComment('這是一個基本信息')
->setGroupCol(4)
->setFormControl([
'a' => $this->formControl->text()->label('文本a')->defaultValue('我是文本"\'' . PHP_EOL)->placeholder('請填寫文本a'),
'b' => $this->formControl->number()->label('數字b')->defaultValue(123.15)->placeholder('請填寫數字b'),
'c' => $this->formControl->datetime()->placeholder('請選擇')->defaultValue('2022-02-01 02:00:00')->label('日期')->range(false)->comment('測試一下')->required(false),
'd' => $this->formControl->date()->placeholder('請選擇')->defaultValue('2022-02-01')->label('日期')->range(false)->comment('測試一下')->required(false),
'e' => $this->formControl->year()->placeholder('請選擇')->defaultValue('2022')->label('日期')->range(false)->comment('測試一下')->required(false),
'f' => $this->formControl->month()->placeholder('請選擇')->defaultValue('2022-02')->label('日期')->range(false)->comment('測試一下')->required(false),
'g' => $this->formControl->time()->placeholder('請選擇')->defaultValue('02:00:00')->label('日期')->range(false)->comment('測試一下')->required(false),
'h' => $this->formControl->select()->label('選項')->defaultValue('2')->options(['1' => "正常", '2' => '不正常',]),
'i' => $this->formControl->select()->label('選項多')->multiple()->defaultValue(['1', '2'])->options(['1' => "正常", '2' => '不正常',]),
])
->setGroup('會員信息', 'member')
->setGroupComment('這是一個會員信息')
->setGroupCol(4)
->setFormControl([
'j' => $this->formControl->textarea()->label('文本域')->required()->defaultValue('臥槽我\r\n臥槽"\'' . PHP_EOL),
'k' => $this->formControl->checkbox()->defaultValue(['a'])->options(['a' => '我', 'b' => '是', 'c' => '神',])->required()->label('標簽')->tag(),
'l' => $this->formControl->checkbox()->defaultValue(['e', 'f'])->options(['d' => '我', 'e' => '是', 'f' => '神',])->required()->label('多選'),
'm' => $this->formControl->sw()->label('開關')->required()->checked(),
'n' => $this->formControl->hidden()->defaultValue('沖沖沖'),
'o' => $this->formControl->password()->label('密碼')->required()->defaultValue('123456'),
'p' => $this->formControl->radio()->options(['g' => '我', 'h' => '是', 'i' => '神',])->defaultValue('h')->required()->label('單選'),
'q' => $this->formControl->range()->required()->label('范圍')->defaultValue(1),
'r' => $this->formControl->staticText()->label('靜態文本')->defaultValue('我是一個神!"\''),
])
->setGroup('符合條件', 'where')
->setGroupComment('這是一個符合條件')
->setGroupCol(4)
->setFormControl([
's' => $this->formControl->richText()->label('富文本')->config(['height' => '0'])->defaultValue('<p><a href="##">測試一下</a></p>'),
't' => $this->formControl->file()->label('文件上傳')->required(),
'u' => $this->formControl->section()->required()->label('區間')->placeholder('$', '$')->defaultValue(1, 2),
'v' => $this->formControl->section()->placeholder('$', '$')->defaultValue('1111', 4),
'link1' => $this->formControl->selectLink()->label('聯動1')->placeholder('請選擇')->route('admin/link')->initOptions(['a' => 'A', 'b' => 'B'])->targetLink('link2', 'where')->start(),
'link2' => $this->formControl->selectLink()->label('聯動2')->placeholder('請選擇')->route('admin/link')->targetLink('link3', 'where')->through(),
'link3' => $this->formControl->selectLink()->label('聯動3')->placeholder('請選擇')->route('admin/link')->targetLink('link4', 'where')->through(),
'link4' => $this->formControl->selectLink()->label('聯動2')->placeholder('請選擇')->end(),
]);
return $viewBuilder->render();
// return $this->render('console');
}
}*/
public function actionLink()
{
//return $this->as403('登錄已失效!');
return $this->asOk('success', [
['value' => 0, 'text' => '狗'],
['value' => 0, 'text' => '豬'],
['value' => 0, 'text' => '羊'],
]);
}
/**
* 退出登錄
* @return \yii\web\Response
* @throws UserException
*/
public function actionQuit()
{
$isGuest = $this->user->logout();
if ($isGuest) {
return $this->goLogin();
}
throw new UserException('Logout failure. ');
}
}
~~~
- 簡介
- 安裝和配置
- 常用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
- 手風琴
- 下拉菜單
- 輪播圖
- 模態框
- 媒體列表
- 自定義文件上傳