ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、视频、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
![](https://img.kancloud.cn/ab/4a/ab4aa7c5bb860006fcaf8411c0a54fb5_1723x571.png) 视图构建器用来映射和组合其他视图组件,实现视图组件内容组合渲染;同时,支持独立布局和主布局以及内容渲染三种模式! ## 视图组件映射 + [ `$table` 表格视图组件(`$this->viewBuilder->table`)](https://ihavenolimitations.xyz/cleverstone/ymb2/3190344) + [`$treeTable` 树表格视图组件(`$this->viewBuilder->treeTable`)](https://ihavenolimitations.xyz/cleverstone/ymb2/3192931) + [`$form` 表单视图组件(`$this->viewBuilder->form`)](https://ihavenolimitations.xyz/cleverstone/ymb2/3192439) + [ `$formStep`分步表单视图组件(`$this->viewBuilder->formStep`)](https://ihavenolimitations.xyz/cleverstone/ymb2/3193045) + [`$lists`列表视图组件(`$this->viewBuilder->lists`)](https://ihavenolimitations.xyz/cleverstone/ymb2/3193072) + [`$tab`选项卡视图组件(`$this->viewBuilder->tab`)](https://ihavenolimitations.xyz/cleverstone/ymb2/3193445) + [`$tree`树视图组件(`$this->viewBuilder->tree`)](https://ihavenolimitations.xyz/cleverstone/ymb2/3193490) + `$meni`菜单视图组件(`$this->viewBuilder->menu`) + `$card`卡片视图组件(`$this->viewBuilder->card`) ## 属性 + @property `$version` string 视图构建器框架版本号 (默认`2.0.0`) + @property `$partial` boolean 是否独立渲染视图 (默认: `false`) + @property `$alignThemePath` string 中间视图继承文件路径(默认: `空`) + @property-write `$render` callable|Builder|string 注册渲染内容(默认: `空`) + @property-write `$renders` array 批量注册渲染内容(默认: `空`) ## 示例 ```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(); ```