视图构建器用来映射和组合其他构建组件，实现构建组件内容组合渲染呈现；同时，支持独立布局和主布局以及内容渲染三种模式，支持中间视图继承； ## 构建组件映射 + `$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(); ```