# 数据表格

# 快速入门

ModStart\Grid\Grid 类用于生成基于数据模型的表格,先来个例子,数据库中有 blog

CREATE TABLE `blog` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `title` varchar(200) DEFAULT NULL,
  `cover` varchar(200) DEFAULT NULL,
  `summary` varchar(200) DEFAULT NULL,
  `content` text,
  `created_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  `updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
1
2
3
4
5
6
7
8
9
10

使用下面的代码可以生成 blog 的数据表格。

<?php
namespace App\Admin\Controller;

use Illuminate\Routing\Controller;
use ModStart\Admin\Concern\HasAdminDetail;
use ModStart\Admin\Concern\HasAdminForm;
use ModStart\Admin\Concern\HasAdminGrid;
use ModStart\Detail\Detail;
use ModStart\Form\Form;
use ModStart\Grid\Grid;
use ModStart\Grid\GridFilter;

class BlogController extends Controller
{
    // 设置当前 Controller 包含 Grid、Form、Detail 三种特性
    use HasAdminGrid;
    use HasAdminForm;
    use HasAdminDetail;
  
    // 定义当前页面主标题
    public $pageTitle = '博客';

    public function grid()
    {
        $grid = Grid::make('blog');
        // 定义显示ID列
        $grid->id('id', 'ID');
        // 定义标题字段,格式为单行文本
        $grid->text('title', '标题');
        // 定义封面字段,格式为单张图片
        $grid->image('cover', '封面');
        // 定义摘要字段,格式为多行文本
        $grid->textarea('summary', '摘要');
        // 定义内容字段,格式为富文本
        $grid->richHtml('content', '内容');
        // 定义创建时间字段,格式为简单显示
        $grid->display('created_at', '创建时间');
        // 定义搜索过滤字段
        $grid->gridFilter(function (GridFilter $filter) {
            // 定义ID可搜索
            $filter->eq('id', 'ID');
            // 定义标题可模糊查找
            $filter->like('title', '标题');
        });
        // 定义整体增删改查标题为「博客」
        $grid->title('博客');
        return $grid;
    }

    public function form()
    {
        return Form::make('blog', function (Form $form) {
            // 定义标题字段,格式为单行文本
            $form->text('title', '标题');
            // 定义封面字段,格式为单张图片
            $form->image('cover', '封面');
            // 定义摘要字段,格式为多行文本
            $form->textarea('summary', '摘要');
            // 定义内容字段,格式为富文本
            $form->richHtml('content', '内容');
        });
    }

    public function detail()
    {
        return Detail::make('blog', function (Detail $detail) {
            // 定义显示ID列
            $detail->id('id', 'ID');
            // 定义标题字段,格式为单行文本
            $detail->text('title', '标题');
            // 定义封面字段,格式为单张图片
            $detail->image('cover', '封面');
            // 定义摘要字段,格式为多行文本
            $detail->textarea('summary', '摘要');
            // 定义内容字段,格式为富文本
            $detail->richHtml('content', '内容');
            // 定义创建时间字段,格式为简单显示
            $detail->display('created_at', '创建时间');
            // 定义更新时间字段,格式为简单显示
            $detail->display('updated_at', '更新时间');
        });
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

定义Routes

<?php
Route::group(
    [
        'prefix' => env('ADMIN_PATH', '/admin/'),
        'middleware' => ['admin.bootstrap', 'admin.auth'],
        'namespace' => '\App\Admin\Controller',
    ], function () {
    Route::match(['get', 'post'], 'blog', 'BlogController@index');
    Route::match(['get', 'post'], 'blog/add', 'BlogController@add');
    Route::match(['get', 'post'], 'blog/edit', 'BlogController@edit');
    Route::match(['get', 'post'], 'blog/delete', 'BlogController@delete');
    Route::match(['get', 'post'], 'blog/show', 'BlogController@show');
});
1
2
3
4
5
6
7
8
9
10
11
12
13

# 数据表格仓库

# 使用MySQL表名

使用数据表名称创建数据表格

$grid = Grid::make('blog');
1

# 使用数据模型类

使用数据模型类来创建数据表格

$grid = Grid::make(Blog::class);
1

其中 Blog 定义如下

<?php
namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Blog extends Model
{
    protected $table = 'blog';
}
1
2
3
4
5
6
7
8
9

# 列的配置和使用

一个基础列

$grid->display('field','名称');
1

设定宽度

$grid->display('field','名称')->width(100);
1

自定义渲染

$grid->display('field','自定义列')->hookRendering(function (AbstractField $field, $item, $index) {
    return '<span>自定义内容:'.$item->field.'</span>';
});
1
2
3

# 行的配置和使用

数据表格行默认有 3 个操作:编辑删除查看,可以通过如下方式关闭。

// 关闭编辑
$grid->canEdit(false);
// 关闭删除
$grid->canDelete(false);
// 关闭查看
$grid->canShow(false);
// 一键关闭编辑、删除、查看
$grid->disableCUD();
1
2
3
4
5
6
7
8

自定义渲染行操作

$grid->hookItemOperateRendering(function (ItemOperate $itemOperate) {
    // 当前行数据
    $item = $itemOperate->item();
    // 在默认操作之前增加操作
    $itemOperate->prepend('<a href="#">其他操作</a>');
    // 在默认操作之后增加操作
    $itemOperate->push('<a href="#">其他操作</a>');
});
1
2
3
4
5
6
7
8

不显示操作列

$grid->disableItemOperate();
1

# 筛选条件的配置

定义表格筛选条件

$grid->gridFilter(function (GridFilter $filter) {
    $filter->eq('id', 'ID');
    $filter->like('title', '标题');
})
1
2
3
4

# 工具栏配置使用

在右上角工具栏增加操作

$grid->gridOperateAppend('<a href="#" class="btn btn-primary">操作</a>');
1

# 字段支持

# 显示 display

$grid->display('field','名称');
1

# 单行文本 text

$grid->text('field', '名称');
1

# 多选 checkbox

$grid->checkbox('field', '名称');
1

# 标签 tags

$grid->tags('field', '名称');
1

# 代码 code

$grid->code('field', '名称');
1

# 树状组件 tree

$grid->tree('field', '名称');
1

# 类型 type

$grid->type('field', '类型');
1

# 密码 password

$grid->password('field', '类型');
1

# 单张图片 image

$grid->image('field', '类型');
1

# 多张图片 images

$grid->type('field', '类型');
1

# 多张图片(临时路径) imagesTemp

$grid->type('field', '类型');
1
$grid->link('field', '类型');
1

# 开关 switch

$grid->switch('field', '类型');
1

# 多行文本 textarea

$grid->textarea('field', '类型');
1

# 颜色 color

$grid->color('field', '类型');
1

# 日期 date

$grid->date('field', '类型');
1

# 日期时间 datetime

$grid->datetime('field', '类型');
1

# 时间 time

$grid->time('field', '类型');
1

# 单选 radio

$grid->radio('field', '类型');
1

# 下拉 select

$grid->select('field', '类型');
1

# 富文本 richHtml

$grid->richHtml('field', '类型');
1

# Markdown markdown

$grid->markdown('field', '类型');
1

# 键值对列表 keyValueList

$grid->keyValueList('field', '类型');
1

# 多值 values

$grid->values('field', '类型');
1

# HTML html

$grid->html('field', '类型');
1

# 数字 number

$grid->number('field', '类型');
1

# 百分比 percent

$grid->percent('field', '类型');
1

# 小数 decimal

$grid->decimal('field', '类型');
1

# 货币 currency

$grid->currency('field', '类型');
1

# ID id

$grid->id('field', '类型');
1

# 验证码 captcha

$grid->captcha('field', '类型');
1

# 临时文件 fileTemp

$grid->fileTemp('field', '类型');
1

# 文件 file

$grid->file('field', '类型');
1

# 视频 video

$grid->video('field', '类型');
1

# 音频 audio

$grid->audio('field', '类型');
1

# 中国地区 areaChina

$grid->areaChina('field', '类型');
1

# 隐藏域 hidden

$grid->hidden('field', '类型');
1

# 图标 icon

$grid->icon('field', '类型');
1

更多内置组件请参照 ModStart\Support\Manager\FieldManager 中的定义

Last Updated: 23 days ago