数据表格 - 字段组件库

areaChina 中国地区

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

audio 音频

$grid->audio('field', '字段名');

captcha 验证码

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

checkbox 多选

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

code 代码

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

color 颜色

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

currency 货币

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

date 日期

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

datetime 日期时间

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

decimal 小数

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

// 是否显示颜色（正数绿色，负数红色）
$field->autoColor(true);
// 是否总是显示正负号
$field->signShow(true);

display 显示

// 基础使用
$field = $grid->display('field','名称');

// 显示为链接
$field->asLink(modstart_web_url('doc/{id}'), $openInBlank = true);

file 文件

$grid->file('field', '字段名');

fileTemp 临时文件

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

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

files 多文件

$grid->files('field', '字段名');

hidden 隐藏域

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

html HTML

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

icon 图标

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

id ID

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

image 单张图片

$grid->image('field', '字段名');

images 多张图片

$grid->images('field', '字段名');

imagesTemp 多张图片（临时路径）

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

$grid->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);

条目选择接口需要返回

{
    "code": 0,
    "data": {
        "records": [
            {"id": 1, "title": "选项1", "cover": "http://xxx.com/xxx.jpg"},
            {"id": 2, "title": "选项2", "cover": "http://xxx.com/xxx.jpg"}
        ]
    }
}

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

keyValueList 键值对列表

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

link 链接

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

markdown Markdown

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

multiSelect 下拉多选

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

number 数字

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

// 是否显示颜色（正数绿色，负数红色）
$field->autoColor(true);
// 是否总是显示正负号
$field->signShow(true);

password 密码

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

percent 百分比

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

radio 单选

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

richHtml 富文本

$grid->richHtml('field', '字段名');

select 下拉

// 基础使用
$field = $grid->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']);
// 使用模型作为备选项，并渲染为树状结构
$field->optionModelTree('forum_category','id','title');

selectRemote 下拉（远程）

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

远程数据源接口需要返回

{
    "code": 0,
    "data": {
        "options": [
            {"value": 1, "label": "选项1"},
            {"value": 2, "label": "选项2"}
        ]
    }
}

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

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

switch 开关

// 基础使用
$field = $grid->switch('field', '字段名');

// 在表格中快速编辑
$field->gridEditable(true);

tags 标签

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

text 单行文本

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

textarea 多行文本

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

time 时间

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

tree 树状组件

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

type 类型

// 基础使用
$field = $grid->type('field', '字段名');

// 在表格中快速编辑
$field->gridEditable(true);
// 定义BaseType，同时指定类型颜色
$field->type(XxxStatus::class, [
    XxxStatus::SUCCESS => 'success',
    XxxStatus::FAIL => 'danger',
])

values 多值

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

video 视频

$grid->video('field', '字段名');

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