简介
开关组件用于在表格列中实现快速切换功能,适用于布尔值类型的字段。
用法示例
基础用法
use plugin\xbCode\builder\Builder;
// 创建表格
Builder::crud(function($builder) {
// 必须先设置快速保存接口
$builder->useCRUD()->quickSaveItemApi('POST:/api/update');
// 添加开关列
$builder->addColumnSwitch('status', '状态');
});
自定义配置
Builder::crud(function($builder) {
// 设置快速保存接口
$builder->useCRUD()->quickSaveItemApi('POST:/api/save');
// 使用回调函数自定义配置
$builder->addColumnSwitch('is_show', '是否显示', [
'onText' => '显示',
'offText' => '隐藏',
'trueValue' => 1,
'falseValue' => 0
], function($component) {
$component->width(100);
});
// 字符串类型的开关
$builder->addColumnSwitch('enabled', '启用状态', [
'onText' => '启用',
'offText' => '禁用',
'trueValue' => 'yes',
'falseValue' => 'no'
]);
});
组件参数
| 参数名 | 类型 | 默认值 | 说明 |
|---|
| name | string | 必填 | 字段名称,对应数据库字段 |
| label | string | 必填 | 列标题,显示在表格头部 |
| quickEdit | array | [] | 快速编辑配置 |
| option | callable|array | [] | 配置选项,可以是回调函数或数组 |
快速编辑配置(quickEdit)
| 属性名 | 类型 | 默认值 | 说明 |
|---|
| type | string | switch | 组件类型,固定为 'switch' |
| mode | string | inline | 显示模式,默认为 'inline' |
| saveImmediately | bool | true | 是否立即保存 |
| onText | string | - | 开启时显示的文本 |
| offText | string | - | 关闭时显示的文本 |
| trueValue | mixed | 1 | 开启时的值 |
| falseValue | mixed | 0 | 关闭时的值 |
开关组件属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|
| width | int|string | 120 | 列宽度(默认120px) |
| actionType | string | ajax | 操作类型 |
| align | string | center | 水平对齐方式(默认居中) |
| vAlign | string | middle | 垂直对齐方式(默认居中) |
| className | string | - | CSS 类名 |
使用场景
- 状态开关(启用/禁用)
- 显示隐藏控制
- 是否推荐
- 热门标识
- 审核通过状态
注意事项
- 必须先设置
quickSaveItemApi 接口地址,否则会抛出异常 - 默认启用立即保存(saveImmediately: true)
- 切换后会自动触发保存请求
- 默认宽度为 120px,居中对齐
- trueValue 和 falseValue 可以是数字、字符串等类型
- 支持自定义开关显示文本