視圖構建器 · Yii Manager 2.0

![](https://img.kancloud.cn/ab/4a/ab4aa7c5bb860006fcaf8411c0a54fb5_1723x571.png) 視圖構建器用來映射和組合其他構建組件，實現構建組件內容組合渲染呈現；同時，支持獨立布局和主布局以及內容渲染三種模式，支持中間視圖繼承； ## 構建組件映射 + `$table` 表格構建組件 + `$treeTable` 樹表格構建組件 + `$form` 表單構建組件 + `$formStep`分步表單構建組件 + `$lists`列表構建組件 + `$tab`選項卡構建組件 + `$tree`樹組件構建器 ## 屬性 `$partial boolean`是否獨立渲染視圖（默認: `false`） `$alignThemePath` 中間視圖繼承文件路徑（默認: `空`） ```php // 選項卡 - 表格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('自定義的內容'), '表格1' => $this->tabItem->builder($table1)->switchProperty(), '表格2' => $this->tabItem->builder($table2)->switchProperty()->selected(), ]); return $viewBuilder->render(); ```