SPHP中按钮的数据结构全局统一,数据类型如下:
```
{
title:按钮标题,
flag:按钮标识,用于对按钮进一步操作时的唯一标识。
attr:按钮样式及属性,是一个键值对,具体结构:{
type:default|primary|success|info|warning|danger|text, // 按钮类型,默认 primary
round:true|false, // 按钮是否圆角,默认 false
plain:true|false, // 是否朴素按钮,默认 false
circle:true|false, // 是否圆形按钮,默认 false
icon, // 按钮图标,可选择的图标见icon表单项
flag: 按钮标记,用于对按钮进一步操作
disabled, // 是否禁用,默认 false
},
option:操作属性,用于控制按钮的操作逻辑,结构如下:{
type:操作类型:null-无操作,refresh-刷新页面,relist-重新获取列表(列表页中的按钮才有效),back-返回,link-跳转页面,pop-打开弹框,ajax-ajax请求,
url:按钮的操作地址,页面跳转为跳转地址,pop为弹窗地址,ajax为ajax请求地址。
target: 按钮链接跳转类型(linkType为link时有效, _blank表示新页面打开链接),
confirm: false|true|{title, tips, type:warning}, 按钮点击时是否需要确认框,
extra_data: 附加数据, 表单提交时会把附加数据提交,在列表项中支持'__字段名__'的方式传值,
batch: 是否批量操作(批量操作时会附带当前列表中选中的数据ID),列表页中的按钮才有效
}
}
```
操作类型分别为无操作、刷新页面、刷新列表数据、返回、跳转页面、打开弹框、ajax请求。
所有的操作均可设置是否在操作前进行弹框确认。
## ajax请求返回结果
> 一般情况下,ajax请求的处理结果直接使用控制器的success方法及error方法返回即可,参考[控制器]()一节。
ajax请求后基本都会有下一步的操作,下面介绍一下ajax请求后如何控制后续操作。
- 按钮的ajax请求返回的数据结构说明
```
{
code: 1-成功,非1失败,一般直接用0即可。
msg: 返回结果说明,
data: {
wait:操作等待时间,单位秒,默认为1秒,
type:操作类型:null-无操作,refresh-刷新页面,relist-重新获取列表(列表页中的按钮才有效),back-返回,link-跳转页面,pop-打开弹框,ajax-ajax请求,
url:按钮的操作地址,页面跳转为跳转地址,pop为弹窗地址,ajax为ajax请求地址。
target: 按钮链接跳转类型(linkType为link时有效, _blank表示新页面打开链接),
confirm: false|true|{title, tips, type:warning}, 按钮点击时是否需要确认框,
extra_data: 附加数据, 表单提交时会把附加数据提交,在列表项中支持'__字段名__'的方式传值,
batch: 是否批量操作(批量操作时会附带当前列表中选中的数据ID),列表页中的按钮才有效
}
}
```
> 其实返回的操作除了多了一个`wait`之外,其他结构与按钮的操作时完全一致的。
- type操作类型说明:
1. back:返回上一页
2. relist:重新加载数据列表
3. refresh:刷新页面
4. pop:打开弹框
5. link:打开连接
6. ajax:ajax请求
> 按钮操作思维导图:
![](https://box.kancloud.cn/ed6a41c971f8660fba8cf21d3b986540_743x674.png)
- 序言
- 下载及安装
- 目录结构
- 基础
- 多站点-单入口文件(推荐)
- (旧)多站点-多入口文件方式
- (旧)入口文件
- (旧)站点配置
- 按钮操作
- 区块概念
- 构建器(SBuilder)
- 页面-Page
- 设置页面标题
- 添加页面提示信息
- 设置页面Tab
- 设置页面背景色
- 设置是否点击遮罩关闭
- 添加区块
- 区块-Block
- 设置区块名
- 设置区块布局
- 表单(form)
- 添加表单项通用方法
- 添加表单项
- 单行文本框
- 多行文本框
- 数字输入框
- 密码框
- 数组输入框
- 单选框
- 状态选择器
- 复选框
- 下拉框
- 级联选择器
- 开关
- 日期选择器
- 日期时间选择器
- 日期范围选择器
- 日期时间范围选择器
- 时间选择器
- 时间范围选择器
- Tree 树形组件
- 图标选择器
- 颜色选择器
- 单图片上传
- 多图片上传
- 视频上传
- 单文件上传
- 多文件上传
- 富文本编辑器-QEditor
- 富文本编辑器-UEditor
- 小程序富文本
- 静态文本
- 隐藏表单项
- 表格数据输入框
- 分组
- 地图选择器(未实现)
- 地区选择器(未实现)
- 穿梭框(未实现)
- 图片裁剪(未实现)
- 邮箱输入框(未实现)
- 设置表单LabelWidth
- 设置表单提交地址
- 设置默认按钮标题
- 提交表单确认框
- 隐藏默认按钮
- 添加额外按钮
- 设置触发器
- 设置表单数据
- 表单布局
- 模板
- 表格(table)
- 设置表名
- 添加顶部按钮
- 添加时间段筛选
- 设置搜索栏
- 添加列
- text
- byte
- status
- tags
- yesno
- datetime
- icon
- image
- images
- external_image[已废弃]
- external_images[已废弃]
- link
- html
- select
- text.edit
- group
- 多选框栏
- 数量索引栏
- 操作栏
- 右侧操作按钮
- 设置多选框
- 设置显示数量索引
- 设置列表数据地址
- 直接设置数据
- 关闭ajax获取数据功能
- 设置分页
- 自动新增
- 自动编辑
- 图表(Charts)
- Html
- Iframe
- 数据面板
- 卡片列表
- 按钮(Button)
- 按钮调用示例
- 自定义组件
- 混合页面
- 概念说明
- 扩展
- 图标扩展
- 杂项
- 帮助函数
- TODO