# 数据展示
# 快速入门
ModStart\Detail\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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 获取当前模型数据
在闭包内可以获取到当前模型的数据
return Detail::make('blog', function (Detail $detail) {
dd($detail->item());
});
1
2
3
2
3
# 字段组件库
# areaChina 中国地区
$detail->areaChina('field', '字段名');
1
# audio 音频
$detail->audio('field', '字段名');
1
# captcha 验证码
$detail->captcha('field', '字段名');
1
# checkbox 多选
$detail->checkbox('field', '名称');
1
# code 代码
$detail->code('field', '名称');
1
# color 颜色
$detail->color('field', '字段名');
1
# currency 货币
$detail->currency('field', '字段名');
1
# date 日期
$detail->date('field', '字段名');
1
# datetime 日期时间
$detail->datetime('field', '字段名');
1
# decimal 小数
$field = $detail->decimal('field', '字段名');
// 是否显示颜色(正数绿色,负数红色)
$field->autoColor(true);
// 是否总是显示正负号
$field->signShow(true);
1
2
3
4
5
6
2
3
4
5
6
# display 显示
$detail->display('field','名称');
1
# file 文件
$detail->file('field', '字段名');
1
# fileTemp 临时文件
临时路径指上传到临时表 data_temp
中的图片,正式保存时会将临时图片移动到正式表 data
中。
$detail->fileTemp('field', '字段名');
1
# files 多文件
$detail->files('field', '字段名');
1
# hidden 隐藏域
$detail->hidden('field', '字段名');
1
# html HTML
$detail->html('field', '字段名');
1
# icon 图标
$detail->icon('field', '字段名');
1
# id ID
$detail->id('field', '字段名');
1
# image 单张图片
$detail->image('field', '字段名');
1
# images 多张图片
$detail->images('field', '字段名');
1
# imagesTemp 多张图片(临时路径)
临时路径指上传到临时表 data_temp
中的图片,正式保存时会将临时图片移动到正式表 data
中。
$detail->imagesTemp('field', '字段名');
1
# jsonIdItems 条目列表
字段存储的是 JSON 格式的 ID 列表,通过 ID 列表获取对应的条目名称
$grid->jsonIdItems('field', '字段名');
// 条目选择接口
->selectUrl(modstart_admin_url('path/to/select'))
// 指定预览接口
->previewUrl(modstart_admin_url('path/to/preview'))
// 指定条目样式,ITEM_STYLE_TITLE、ITEM_STYLE_COVER_TITLE
->itemStyle(JsonIdItems::ITEM_STYLE_TITLE);
1
2
3
4
5
6
7
2
3
4
5
6
7
条目选择接口需要返回
{
"code": 0,
"data": {
"records": [
{"id": 1, "title": "选项1", "cover": "http://xxx.com/xxx.jpg"},
{"id": 2, "title": "选项2", "cover": "http://xxx.com/xxx.jpg"}
]
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
条目预览接口接收 ids
参数,该参数使用 ,
分隔的多个ID,返回的数据格式如下
{
"code": 0,
"data": {
"records": [
{"id": 1, "title": "选项1", "cover": "http://xxx.com/xxx.jpg"},
{"id": 2, "title": "选项2", "cover": "http://xxx.com/xxx.jpg"}
]
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# keyValueList 键值对列表
$detail->keyValueList('field', '字段名');
1
# link 链接
$detail->link('field', '字段名');
1
# markdown Markdown
$detail->markdown('field', '字段名');
1
# multiSelect 下拉多选
$detail->multiSelect('field', '字段名')->options([
'a' => '选项1',
'b' => '选项2',
'c' => '选项3',
]);
1
2
3
4
5
2
3
4
5
# number 数字
$field = $detail->number('field', '字段名');
// 是否显示颜色(正数绿色,负数红色)
$field->autoColor(true);
// 是否总是显示正负号
$field->signShow(true);
1
2
3
4
5
6
2
3
4
5
6
# password 密码
$detail->password('field', '字段名');
1
# percent 百分比
$detail->percent('field', '字段名');
1
# radio 单选
$detail->radio('field', '字段名');
1
# richHtml 富文本
$detail->richHtml('field', '字段名');
1
# select 下拉
// 基本使用
$field = $detail->select('field', '字段名');
// 使用Type作为备选项,XxxType是继承BaseType的类
$field->optionType(XxxType::class);
// 使用数组作为备选项
$field->options(['1' => '选项1', '2' => '选项2']);
// 使用数组作为备选项
$field->optionArray([['id' => 1, 'name' => '选项1'], ['id' => 2, 'name' => '选项2']],'id','name');
// 使用模型作为备选项
$field->optionModel('forum_category','id','title');
// 使用模型作为备选项(简单条件筛选)
$field->optionModel('forum_category','id','title',['xxx'=>'xxx']);
// 使用模型作为备选项,并渲染为树状结构
$detail->select('position', '位置')->optionModelTree('forum_category','id','title');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# selectRemote 下拉(远程)
$detail->selectRemote('seriesId', '剧集')
// 指定远程数据源
->server(modstart_admin_url('path/to/select_remote'))
// 显示时查找的数据字段
->viewWithModel(XxxModel::class,'id','title');
1
2
3
4
5
2
3
4
5
远程数据源接口需要返回
{
"code": 0,
"data": {
"options": [
{"value": 1, "label": "选项1"},
{"value": 2, "label": "选项2"}
]
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
系统封装好了参数可以直接试用,远程数据源可以直接调用以下方法返回
class XxxController extends Controller
{
public function selectRemote()
{
return SelectRemote::handleModel(XxxModel::class,'id','title');
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# switch 开关
$detail->switch('field', '字段名');
1
# tags 标签
$detail->tags('field', '名称');
1
# text 单行文本
$detail->text('field', '名称');
1
# textarea 多行文本
$detail->textarea('field', '字段名');
1
# time 时间
$detail->time('field', '字段名');
1
# tree 树状组件
$detail->tree('field', '名称');
1
# type 类型
// 基础使用
$field = $grid->type('field', '字段名');
// 在表格中快速编辑
$field->gridEditable(true);
// 定义BaseType,同时指定类型颜色
$field->type(XxxStatus::class, [
XxxStatus::SUCCESS => 'success',
XxxStatus::FAIL => 'danger',
])
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# values 多值
$detail->values('field', '字段名');
1
# video 视频
$detail->video('field', '字段名');
1
更多内置组件请参照 ModStart\Support\Manager\FieldManager
中的定义