树表格构建组件中表格是基于`layui`树形表格接口进行表格构建。为了便于理解表格构建方法可以结合`layui`树形表格文档！ ## 获取构建器实例 1. `ViewBuilder`中获取 ```php $viewBuilder = $this->viewBuilder; $treeTable = $viewBuilder->treeTable; ``` 2. `instance()`自身方法 ```php $treeTable = TreeTableBuilder::instance(); ``` 3. `new`关键词 ```php $treeTable = new TreeTableBuilder([ 'id' => '' ]); ``` ## 示例 ~~~ <?php /** * @link https://ym2.cleverstone.top * @copyright Copyright (c) 2020 Yii Manager Software LLC */ namespace backend\controllers; use builder\base\BaseController; use builder\helper\H5; use builder\tree_table\TreeTableBuilder; use builder\widget\ajax\MediaList; use common\models\Admin; use common\models\Test; use yii\db\Query; use yii\helpers\Json; /** * 树表格demo * @author cleverstone * @since ym2.0 */ class TreeTableController extends BaseController { public $actionVerbs = [ 'index' => ['get'], 'children' => ['get'], ]; public $guestActions = [ 'index', 'children', ]; /** * demo * @return string * @throws \Throwable * @throws \builder\base\InvalidInstanceException * @throws \builder\base\NotFoundParamsException */ public function actionIndex() { $viewBuilder = $this->viewBuilder; $treeTable = $viewBuilder->treeTable; $treeTable->setId('_tree_table_list'); if ($this->isAjax) { // AJAX $treeTable->setQuery(function () { $params = $this->filteredGet; $query = Test::query()->where([ 'pid' => 0, ]); $query->filterWhere([ 'like', 'name', isset($params['keyword']) ? $params['keyword'] : null, ]); return $query; }) ->setOrderBy(['id' => SORT_DESC]) ->setTtColumns([ 'id', 'name', 'pid', 'isParent' => function ($row) { return 1; }, 'ro_delete3' => function ($row) { return $row['id'] % 2; }, ])->setExtraData(function (Query $query) { return [ 'tol' => $query->count(), 'a' => 100000, ]; }); $render = $viewBuilder->render(); //return $treeTable->data; return $render; } else { // HTML $treeTable->setTitle('管理员列表') ->setExtraDataTpl([ 'tol' => '当前总数量', 'a' => '所在院校', ]) ->setOpenTotalRow() ->registerPointcut(H5::alert('测试一下', 'success')) ->registerPointcut(H5::alert('测试一下'), TreeTableBuilder::POS_END) ->setAjaxRoute('tree-table/index') ->setTreeTableHead([ $this->treeTableHead->checkbox(), $this->treeTableHead->field('id')->title('ID')->totalRow(), $this->treeTableHead->field('name')->title('账号')->editText('admin/edit'), $this->treeTableHead->field('pid')->title('PID'), $this->treeTableHead->toolbar()->title('操作项'), ]) ->setTreeAsyncOption('tree-table/children') ->setTreeCustomNameOption([]) ->setTreeViewOption([]) ->setTreeDataOption([]) ->setTtRowOperation([ // 详情 $this->ttRowOperation->modal()->title('详情')->icon('bi bi-plus-lg f15')->route('admin/detail')->closeBtn(), $this->ttRowOperation->ajax()->title('删除')->icon('bi bi-x-lg')->route('admin/delete')->method('POST')->group(), $this->ttRowOperation->ajax()->title('我要删除1')->icon('bi bi-x-lg')->route('admin/delete')->method('POST')->group(), $this->ttRowOperation->ajax()->title('我要删除2')->icon('bi bi-x-lg')->route('admin/delete')->method('POST')->group(), $this->ttRowOperation->ajax()->title('我要删除3')->id('ro_delete3')->icon('bi bi-x-lg')->route('admin/delete')->method('POST')->group(), ]) ->setTtToolbarExpandAll() ->setTtToolbarCustom([ // 表单 $this->ttToolbarCustom->modal()->btnClass('layui-btn-primary layui-border')->title('表单')->icon('bi bi-plus-lg f15')->route('admin/add'), // 列表 $this->ttToolbarCustom->modal()->btnClass('layui-btn-primary layui-border-green')->title('列表')->params(['id'])->icon('bi bi-plus-lg f15')->route('admin/detail')->closeBtn(), // 选项卡 $this->ttToolbarCustom->modal()->btnClass('layui-btn-primary layui-border-blue')->title('选项卡')->icon('bi bi-pencil-square f13')->route('admin/edit')->closeBtn(), // AJAX $this->ttToolbarCustom->page()->btnClass('layui-btn-primary layui-border-orange')->title('AJAX')->icon('bi bi-lock')->targetBlank()->params(['id'])->route('admin/add'), ]) ->setTtToolbarFilter([ 'keyword' => $this->ttToolbarFilter->text()->label('关键词')->placeholder('请输入账号/姓名')->defaultValue()->attribute(['test' => 1]), //'username' => $this->ttToolbarFilter->datetime()->style(['width' => '800px'])->label('注册时间')->placeholder('请选择注册时间'), //'username' => $this->ttToolbarFilter->datetime()->label('注册时间')->placeholder('请选择注册时间'), 'status' => $this->ttToolbarFilter->select()->label('用户状态')->placeholder('请选择用户状态')->options([ '测试' => [ 'normal' => '正常', 'deny' => '禁用', ], '测试2' => [ 'normal1' => '正常1', 'deny1' => '禁用1', ], ])->disabled(['normal']), 'link1' => $this->ttToolbarFilter->selectLink()->label('联动1')->placeholder('请选择')->route('admin/link')->initOptions([ 'AAA' => [ 'a' => 'A', 'b' => 'B' ], 'BBB' => [ 'c' => 'C', 'd' => 'D' ], ])->disabled(['c'])->targetLink('link2')->start(), 'link2' => $this->ttToolbarFilter->selectLink()->label('联动2')->placeholder('请选择')->route('admin/link')->targetLink('link3')->through(), 'link3' => $this->ttToolbarFilter->selectLink()->label('联动3')->placeholder('请选择')->route('admin/link')->targetLink('link4')->through(), 'link4' => $this->ttToolbarFilter->selectLink()->label('联动2')->placeholder('请选择')->end(), ]) ->setAutoRequest(true); return $viewBuilder->render(); } } public function actionChildren() { $data = Test::query([ 'id', 'name', 'pid', ])->where(['pid' => $this->get['parentId']])->all(); foreach ($data as &$item) { $item['isParent'] = 1; } return $this->asOk('success', [ 'count' => count($data), 'list' => $data, ]); } } ~~~