# 数据展示

# 快速入门

用于快速构架系统的配置页面，

class ConfigController extends Controller
{
    public function setting(AdminConfigBuilder $builder)
    {
        $builder->pageTitle('文章投稿系统');
        $builder->text('Xxx_Title','配置项名称');
        return $builder->perform();
    }
}

1
2
3
4
5
6
7
8
9

# 字段组件库

# areaChina 中国地区

$form->areaChina('field', '字段名');

# audio 音频

$form->audio('field', '字段名');
// 使用用户音频库
$form->audio('field', '字段名')
     ->server(modstart_web_url('member_data/file_manager/audio'));

1
2
3
4

# captcha 验证码

$form->captcha('field', '字段名');

# checkbox 多选

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

# code 代码

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

# color 颜色

$form->color('field', '字段名');

# currency 货币

$form->currency('field', '字段名');

# date 日期

$form->date('field', '字段名');

# datetime 日期时间

$form->datetime('field', '字段名');

# decimal 小数

$form->decimal('field', '字段名');

# display 显示

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

# file 文件

$form->file('field', '字段名');
// 使用用户文件库
$form->file('field', '字段名')
     ->server(modstart_web_url('member_data/file_manager/file'));

1
2
3
4

# fileTemp 临时文件

临时路径指上传到临时表 data_temp 中的图片，正式保存时会将临时图片移动到正式表 data 中。

$form->fileTemp('field', '字段名');

# files 多文件

$form->files('field', '字段名');
// 使用用户文件库
$form->files('field', '字段名')
     ->server(modstart_web_url('member_data/file_manager/file'));

1
2
3
4

# hidden 隐藏域

$form->hidden('field', '字段名');

# html HTML

$form->html('field', '字段名');

# icon 图标

$form->icon('field', '字段名');

# id ID

$form->id('field', '字段名');

# image 单张图片

$form->image('field', '字段名');
// 使用用户图库
$form->image('field', '字段名')
     ->server(modstart_web_url('member_data/file_manager/image'));

1
2
3
4

# images 多张图片

$form->images('field', '字段名');
// 使用用户图库
$form->image('field', '字段名')
     ->server(modstart_web_url('member_data/file_manager/image'));

1
2
3
4

# imagesTemp 多张图片（临时路径）

临时路径指上传到临时表 data_temp 中的图片，正式保存时会将临时图片移动到正式表 data 中。

$form->imagesTemp('field', '字段名');

# 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

条目选择接口需要返回

{
    "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

条目预览接口接收 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

# keyValueList 键值对列表

$form->keyValueList('field', '字段名');

# link 链接

$form->link('field', '字段名');

# markdown Markdown

$form->markdown('field', '字段名');

# multiSelect 下拉多选

$form->multiSelect('field', '字段名')->options([
    'a' => '选项1',
    'b' => '选项2',
    'c' => '选项3',
]);

1
2
3
4
5

# number 数字

$form->number('field', '字段名');

# password 密码

$form->password('field', '字段名');

# percent 百分比

$form->percent('field', '字段名');

# radio 单选

$form->radio('field', '字段名');

// 使用数组
$form->radio('field', '字段名')
     ->options(['a'=>'选项1','b'=>'选项2']);
// 使用BaseType枚举类
$form->radio('field', '字段名')
     ->optionType(XxxType::class);
// 使用数据表
$form->radio('field', '字段名')
     ->optionModel('xxxx','id','name');

// 条件
$form->radio('field', '字段名')
     ->when('=', 1, function ($form) {
         $form->text('xxx', '条件1配置项');
     })
     ->when('=', 2,function ($form) {
         $form->text('xxx', '条件2配置项');
     });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# richHtml 富文本

// 基础使用
$form->richHtml('field', '字段名');

// 简单版富文本
// default 默认的富文本编辑框，包含所有功能
// simple  精简的富文本编辑框，只包含基础功能
$field->editorMode('simple');
// 保存时不经过XSS过滤
// 默认系统保存时会经过XSS过滤，如果是后台应用为了更灵活丰富的样式可选择不过滤XSS
$field->htmlFilter(false);
// 自定义UEditorPlus的属性
$filter->editorOption([
    'allowDivTransToP' => false,
    'xxx' => 'xxx'
]);
// 设置富文本后台接口
// 后台默认为 modstart_admin_url('data/ueditor')
// 前台用户默认 modstart_web_url('member_data/ueditor')
$field->server('xxx');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# select 下拉

// 基本使用
$form->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(ForumCategory::class,'id','title');
// 使用模型作为备选项（简单条件筛选）
$field->optionModel(ForumCategory::class,'id','title',['status'=>1]);
// 使用模型作为备选项，并渲染为树状结构
$field->optionModelTree(ForumCategory::class);
// 使用模型作为备选项，并渲染为树状结构（简单条件筛选）
$field->optionModelTree(ForumCategory::class,'id','pid','title','sort',['status'=>1]);

// 条件
$form->select('field', '字段名')
     ->when('=', 1, function ($form) {
         $form->text('xxx', '条件1配置项');
     })
     ->when('=', 2,function ($form) {
         $form->text('xxx', '条件2配置项');
     });

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

# selectRemote 下拉（远程）

$form->selectRemote('seriesId', '剧集')
     // 指定远程数据源
     ->server(modstart_admin_url('path/to/select_remote'))
     // 显示时查找的数据字段
     ->viewWithModel(XxxModel::class,'id','title');

1
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

系统封装好了参数可以直接试用，远程数据源可以直接调用以下方法返回

class XxxController extends Controller
{
    public function selectRemote()
    {
        return SelectRemote::handleModel(XxxModel::class,'id','title');
    }
}

1
2
3
4
5
6
7

# switch 开关

$form->switch('field', '字段名');
// 条件判断
$form->switch('field', '字段名')
     ->when('=',true, function ($form) {
         $form->text('xxx', '开启配置项');
     })
     ->when('=', false,function ($form) {
         $form->text('xxx', '关闭配置项');
     });

1
2
3
4
5
6
7
8
9

# tags 标签

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

# text 单行文本

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

# textarea 多行文本

$form->textarea('field', '字段名');

# time 时间

$form->time('field', '字段名');

# tree 树状组件

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

# type 类型

// 基础用法
$form->type('field', '字段名');

// 定义BaseType，同时指定类型颜色
$field->type(XxxStatus::class)

1
2
3
4
5

# values 多值

$form->values('field', '字段名');

# video 视频

$form->video('field', '字段名');
// 使用用户视频库
$form->video('field', '字段名')
     ->server(modstart_web_url('member_data/file_manager/video'));

1
2
3
4