### 方法
單頁實例:
```php
$page = $rowOperation->page();
```
行操作按鈕和頁標題:
```php
$page->title('詳情');
```
行操作按鈕`icon`:
```php
$page->icon('bi bi-plus-lg f15');
```
頁面路由:
```php
$page->route('user/detail');
```
路由參數:
```php
// 直接指定query中的字段
$page->params(['id']);
```
```php
// key-value, 字段指定值
$page->params(['id' => 1]);
```
```php
// key-占位符, 字段+字段占位符
$page->params(['action' => ':status']);
```
操作ID:
> 注:操作ID在`setColumns`中使用,用于動態控制`當前操作項`展示隱藏!
```php
$page->id('actionEdit');
```
設置內部鏈接模式:
```php
$page->targetSelf();
```
設置外部鏈接模式:
```php
$page->targetBlank();
```
設置操作項分組:
~~~
$page->group();
~~~
### 鏈式調用
~~~
$tableBuilder->setRowOperation([
// 詳情
$this->rowOperation->modal()->title('詳情')->icon('bi bi-plus-lg f15')->route('admin/detail'),
$this->rowOperation->page()->title('測試')->icon('bi bi-x')->route('admin/detail')->params(['id' => 1])->targetBlank(),
$this->rowOperation->ajax()->title('刪除')->icon('bi bi-x-lg')->route('admin/delete')->method('POST')->group(),
$this->rowOperation->ajax()->title('我要刪除1')->icon('bi bi-x-lg')->route('admin/delete')->method('POST')->group(),
$this->rowOperation->ajax()->title('我要刪除2')->icon('bi bi-x-lg')->route('admin/delete')->method('POST')->group(),
$this->rowOperation->ajax()->title('我要刪除3')->id('ro_delete3')->icon('bi bi-x-lg')->route('admin/delete')->method('POST')->group(),
])
~~~
### 代碼示例
~~~
/**
* 列表
* @return string
* @throws \Throwable
* @throws \builder\base\InvalidInstanceException
* @throws \builder\base\NotFoundParamsException
*/
public function actionIndex()
{
$viewBuilder = $this->viewBuilder;
$table = $viewBuilder->table;
$table->setId('_admin_list');
if ($this->isAjax) { // AJAX
$table->setQuery(function () {
$params = $this->filteredGet;
$query = Admin::find();
$query->filterWhere([
'like', 'username', isset($params['keyword']) ? $params['keyword'] : null,
]);
return $query;
})
->setOrderBy(['id' => SORT_DESC])
->setColumns([
'id',
'username',
'password_hash' => function($row) {
return $row['password_hash'];
// return MediaList::widget([
// 'media' => [
// 'https://buerzz.damanzj.com/upload/image/goods_manager/G20230406163045884/album_images/20230411112406L0K9PC73oN.jpg',
// 'https://buerzz.damanzj.com/upload/image/goods_manager/G20230720164108385/album_images/20230720164331DNcGzFHn7d.png',
// 'https://buerzz.damanzj.com/upload/image/goods_manager/G20230331142909667/album_images/202303311628517pMZoWtdEd.jpg',
// ],
// 'mediaHeader' => '佳能g7x2微單入門相機美顏自拍旅游',
// 'mediaBody' => [
// '姓名:' => '楊心怡',
// '性別:' => '女',
// ],
// 'mediaList' => [
// '所在地:' => '河南新鄉',
// '微信:' => 'wx+15032785',
// 'QQ:' => '654874554452',
// '年齡:' => '1歲半',
// '大學:' => '清華大學',
// '愛好:' => '睡覺',
// '成績:' => '100分',
// '班級:' => '九年級',
// '理想:' => '讓這個世界因為我而變得不一樣!',
// '信念:' => '計算機信息網絡技術研究中心',
// ],
// ]);
},
'email',
'mobile',
'status',
'group',
'created_at',
'updated_at',
'ro_delete3' => function ($row) {
return $row['id'] % 2;
},
])
->setExtraData(function (Query $query) {
return [
'tol' => $query->count(),
'a' => 100000,
];
});
$render = $viewBuilder->render();
//return $table->data;
return $render;
} else { // HTML
$table->setTitle('管理員列表')
->setExtraDataTpl([
'tol' => '當前總數量',
'a' => '所在院校',
])
//->registerPointcut(H5::alert('測試一下', 'success'))
//->registerPointcut(H5::alert('測試一下'), TableBuilder::POS_END)
->setAjaxRoute('admin/index')
// ->setLineStyle([
// 'height' => '350px',
// ])
->setTableHead([
$this->tableHead->checkbox()->style([]),
$this->tableHead->field('password_hash')->title('密碼')->minWidth(300),
$this->tableHead->field('username')->title('賬號')->editText('admin/edit'),
$this->tableHead->field('email')->title('郵箱')->maxWidth(220),
$this->tableHead->field('mobile')->title('手機號'),
$this->tableHead->field('created_at')->title('添加時間'),
$this->tableHead->field('updated_at')->title('更新時間'),
$this->tableHead->toolbar()->title('操作項')->maxWidth(180),
])
->setRowOperation([
// 詳情
$this->rowOperation->modal()->title('詳情')->icon('bi bi-plus-lg f15')->route('admin/detail'),
$this->rowOperation->ajax()->title('刪除')->icon('bi bi-x-lg')->route('admin/delete')->method('POST')->group(),
$this->rowOperation->ajax()->title('我要刪除1')->icon('bi bi-x-lg')->route('admin/delete')->method('POST')->group(),
$this->rowOperation->ajax()->title('我要刪除2')->icon('bi bi-x-lg')->route('admin/delete')->method('POST')->group(),
$this->rowOperation->ajax()->title('我要刪除3')->id('ro_delete3')->icon('bi bi-x-lg')->route('admin/delete')->method('POST')->group(),
])
->setToolbarCustom([
// 表單
$this->toolbarCustom->modal()->btnClass('layui-btn-primary layui-border')->title('表單')->icon('bi bi-plus-lg f15')->route('__upload/index')->width(916)->height(655),
// 列表
$this->toolbarCustom->modal()->btnClass('layui-btn-primary layui-border-green')->title('列表')->icon('bi bi-plus-lg f15')->route('admin/detail')->closeBtn(),
// 選項卡
$this->toolbarCustom->modal()->btnClass('layui-btn-primary layui-border-blue')->title('選項卡')->icon('bi bi-pencil-square f13')->route('admin/edit')->closeBtn(),
// AJAX
$this->toolbarCustom->page()->btnClass('layui-btn-primary layui-border-orange')->title('AJAX')->icon('bi bi-lock')->targetBlank()->params(['id'])->route('admin/add'),
])
->setToolbarFilter([
'keyword' => $this->toolbarFilter->text()->label('關鍵詞')->placeholder('請輸入賬號/姓名')->defaultValue()->attribute(['test' => 1])->uiClass('w-330 mr-3'),
//'username' => $this->toolbarFilter->datetime()->style(['width' => '800px'])->label('注冊時間')->placeholder('請選擇注冊時間'),
//'username' => $this->toolbarFilter->datetime()->label('注冊時間')->placeholder('請選擇注冊時間'),
/*'status' => $this->toolbarFilter->select()->label('用戶狀態')->uiClass(['layui-col-sm12'])->placeholder('請選擇用戶狀態')->options([
'分組1' => [
'normal' => '正常',
'deny' => '禁用',
],
'分組2' => [
'A' => '不可以',
'B' => '可以',
],
])->disabled(['deny'])->uiClass('w-330 mr-3'),*/
'link1' => $this->toolbarFilter->selectLink()->label('聯動1')->placeholder('請選擇')->route('admin/link')->initOptions([
'測試1' => [
'a' => 'A',
'b' => 'B'
],
'測試2' => [
'c' => 'C',
'd' => 'D'
],
])->disabled(['d'])->targetLink('link2')->start()->uiClass('w-330'),
'link2' => $this->toolbarFilter->selectLink()->label('')->placeholder('請選擇')->route('admin/link')->targetLink('link3')->through()->uiClass('w-330'),
'link3' => $this->toolbarFilter->selectLink()->label('')->placeholder('請選擇')->end()->uiClass('w-330'),
])
->setAutoRequest(true);
return $viewBuilder->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
- 手風琴
- 下拉菜單
- 輪播圖
- 模態框
- 媒體列表
- 自定義文件上傳