buildadmin将普通表格转化为树状表格

将普通表格转化为树状表格

首先创建树状表格的DDL

DROP TABLE IF EXISTS `bro_treetable_example`;
CREATE TABLE `bro_treetable_example`  (
  `id` int UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `pid` int UNSIGNED NOT NULL DEFAULT 0 COMMENT '上级',
  `name` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL DEFAULT '' COMMENT '名称',
  `create_time` int UNSIGNED NULL DEFAULT NULL COMMENT '创建时间',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci COMMENT = '树状表格示例表' ROW_FORMAT = Dynamic;

使用buildadmin后台进行crud生成控制器

buildadmin将普通表格转化为树状表格_第1张图片

寻找树状表格的vue文件

[treetable下的index.vue]







   

{ label: t('treetable.name'), prop: 'name', align: 'left', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },

    

[treetable下的popupForm.vue]






pid: [
    {
        validator: (rule: any, val: string, callback: Function) => {
        if (!val) {
            return callback()
            }
        if (parseInt(val) == parseInt(baTable.form.items!.id)) {
            return callback(new Error(t('auth.menu.The superior menu rule cannot be the rule itself')))
            }
            return callback()
        },
        trigger: 'blur',
    },
],

最后控制器中重写index方法

 /**
     * 重写查看方法
     * @throws Throwable
     */
    public function index(): void
    {
        $this->request->filter(['strip_tags', 'trim']);

        list($where, $alias) = $this->queryBuilder();
        $res = $this->model
            ->field($this->indexField)
            ->alias($alias)
            ->where($where)
            ->select()
            ->toArray();

        /**
         * 树状表格必看注释一
         * 1. 获取表格数据(没有分页,所以简化了以上的数据查询代码)
         * 2. 递归的根据指定字段组装 children 数组,此时直接给前端,表格就可以正常的渲染为树状了,一个方法搞定
         */
        $res = $this->tree->assembleChild($res);

        if ($this->request->param('select')) {

            /**
             * 树状表格必看注释二
             * 1. 在远程 select 中,数据要成树状显示,需要对数据做一些改动
             * 2. 通过已组装好 children 的数据,建立`树枝`结构,并最终合并为一个二维数组方便渲染
             * 3. 简单讲就是把组装好 children 的数据,给以下这两个方法即可
             */
            $res = $this->tree->assembleTree($this->tree->getTreeArray($res));
        }

        $this->success('', [
            'list'   => $res,
            'remark' => get_route_remark(),
        ]);
    }

呈现结果

buildadmin将普通表格转化为树状表格_第2张图片

你可能感兴趣的:(学习,数据库,php,vue.js)