## addRightButton('类型' [, '按钮属性', '弹窗形式', '扩展参数'])
| 版本 | 功能 |
| --- | --- |
| 1.0.5 | 弹窗支持自定义js回调函数 |
| 1.0.5 | 自定义按钮的类型不再仅限于custom,可使用任意单词作为自定义按钮 |
| 1.0.7 | 支持自定义数据操作方式,默认为Db::name() |
| 1.1.0 | 支持单独设置右侧按钮样式 |
有了数据,肯定也需要对数据进行操作,那么就要给每一行添加一些按钮。
DolphinPHP内置了几种常用的右侧按钮,比如:编辑、启用、禁用、删除、自定义。
| 按钮类型 | 标识符 |
| --- | --- |
| 编辑 | edit |
| 启用 | enable |
| 禁用 | disable |
| 删除 | delete |
| 自定义 | 1.0.5版本以后,自定义按钮类型可按需求填写,不再限定于custom类型 |
>[danger] 注意:要使用这些按钮,需要将对应的操作添加到节点菜单,否则除管理员外,其他用户将无权限操作。
其中,编辑按钮的操作方法需要自己实现,默认是当前控制器的edit方法。
比如我们添加两个按钮,编辑和删除。
首先,我们要添加多一列,用来放置这些按钮,字段名必须为“`right_button`”,类型为“`btn`”。
~~~
// 读取用户数据
$data_list = Db::name('admin_user')->select();
// 使用ZBuilder构建数据表格
return ZBuilder::make('table')
->addColumn('id', 'ID')
->addColumn('username', '用户名')
->addColumn('nickname', '昵称')
->addColumn('email', '邮箱')
->addColumn('mobile', '手机号')
->addColumn('create_time', '创建时间')
->addColumn('right_button', '操作', 'btn')
->setRowList($data_list) // 设置表格数据
->fetch();
~~~
接着,使用`addRightButton()`方法添加两个右侧按钮。
~~~
->addRightButton('edit')
->addRightButton('delete')
~~~
![](https://box.kancloud.cn/3df5aeacd848edeae416ebb349dfbf0d_1587x200.png)
### 修改内置按钮属性
内置按钮默认有5个属性,分别是
| 属性 | 含义 |
| --- | --- |
| title | 标题 |
| icon | 字体图标 |
| class | css类 |
| href | 按钮链接 |
| target | 打开方式 |
我们可以通过第二个参数来修改内置按钮的属性,比如,我们希望给编辑按钮添加额外参数,那么就必须修改href属性,并且要用数组的方式修改。
~~~
->addRightButton('edit', ['href' => url('edit', ['group' => 'index'])])
~~~
>[danger] 需要注意的是,编辑操作不需要指定数据的主键值,一般是id,如果按上面的修改,是不正确的,需要把主键值也带进去。主键名用`__id__`代替。
~~~
->addRightButton('edit', ['href' => url('edit', ['id' => '__id__', 'group' => 'index'])])
~~~
那么生成的url链接为:`http://****.com/admin.php/cms/index/edit/id/1/group/index.html`
>[info] 从1.0.3版本开始,支持用“`__字段名__`”来获取字段名值。注意,主键值依然只能用“`__id__`”来获取。
~~~
->addRightButton('edit', ['href' => url('edit', ['id' => '__id__', 'group' => '__group__'])])
~~~
生成url时,`__group__`会被自动替换成`group`字段的值。
会生成url:`http://****.com/admin.php/cms/index/edit/id/1/group/index.html`
### 修改主键名
如果你的主键名不是id,比如是username,那么可以这样定义
~~~
->addRightButton('edit', ['href' => url('edit', ['username' => '__id__', 'group' => 'index'])])
~~~
生成的链接为:`http://****.com/admin.php/cms/index/edit/username/1/group/index.html`
### 设置主键名
>[danger] 注意,如果修改了主键名,那么必须告诉构建器你的主键名是什么。请示用`setPrimaryKey`方法,只需使用一次即可。
~~~
->addRightButton('edit', ['href' => url('edit', ['username' => '__id__', 'group' => 'index'])])
->setPrimaryKey('username')
~~~
### 添加额外属性
当然,除了修改按钮属性外,还可以给按钮添加额外的自定义属性,比如`data-**`这种。
~~~
->addRightButton('edit', ['data-test' => 'test'])
~~~
### 启用、禁用和删除
如果是启用、禁用和删除按钮,系统会默认去操作“`当前模块名_当前控制器名`”的数据表,如果表名不是“`当前模块名_当前控制器名`”,那么需要另外指定表名。
~~~
->addRightButton('enable', ['table' => 'admin_user']) // 启用
->addRightButton('disable', ['table' => 'admin_user']) // 禁用
->addRightButton('delete', ['table' => 'admin_user']) // 删除
~~~
>[info]从1.0.7版本开始,启用、禁用和删除功能除了可以自定义表名外,还支持使用模型
**默认使用Db::name('admin_user')操作数据**
~~~
->addRightButton('enable', ['table' => 'admin_user'])
等同于
->addRightButton('enable', ['table' => 'admin_user', 1])
~~~
**使用Db::table('admin_user')操作数据**
~~~
->addRightButton('enable', ['table' => 'admin_user', 0])
~~~
**使用指定模型`model('admin/user')`操作数据**
~~~
->addRightButton('enable', ['table' => 'admin/user', 2])
等同于
->addRightButton('enable', ['table' => 'admin/user', true])
~~~
### 自定义按钮
>[info] 右侧按钮的默认css类为:btn btn-xs btn-default
>[info] 提示:1.0.5版以后,自定义按钮不再限定于custom类型,只要不是默认的按钮类型,其他均属于自定义按钮。
~~~
$btn_access = [
'title' => '授权',
'icon' => 'fa fa-fw fa-key',
'href' => url('access', ['uid' => '__id__'])
];
->addRightButton('custom', $btn_access) // 添加授权按钮
或者
->addRightButton('access', $btn_access) // 添加授权按钮
~~~
### ajax跳转
如果你的右侧按钮希望是ajax提交的话,可以给按钮的css类添加“ajax-get”
~~~
$btn_access = [
'title' => '授权',
'icon' => 'fa fa-fw fa-key',
'class' => 'btn btn-xs btn-default ajax-get',
'href' => url('access', ['uid' => '__id__'])
];
->addRightButton('custom', $btn_access) // 添加授权按钮
~~~
### 执行确认
如果希望给按钮加上确认框,可以添加`confirm`类名
~~~
$btn_access = [
'title' => '授权',
'icon' => 'fa fa-fw fa-key',
'class' => 'btn btn-xs btn-default ajax-get confirm',
'href' => url('access', ['uid' => '__id__'])
];
->addRightButton('custom', $btn_access) // 添加授权按钮
~~~
![](https://box.kancloud.cn/848f464bfbabdb1312c7a9b0bb2b6118_576x353.png)
>[info]从1.0.3版本开始,确认框的标题支持自定义,只需添加“data-title”属性。
~~~
$btn_access = [
'title' => '授权',
'icon' => 'fa fa-fw fa-key',
'class' => 'btn btn-xs btn-default ajax-get confirm',
'href' => url('access', ['uid' => '__id__']),
'data-title' => '真的要删除吗?'
];
->addRightButton('custom', $btn_access) // 添加授权按钮
~~~
![](https://box.kancloud.cn/3f8140dcd021cec95ac909e8d6e82610_519x339.png)
也可以显示额外的提示文字,只需添加“data-tips”属性。
~~~
$btn_access = [
'title' => '授权',
'icon' => 'fa fa-fw fa-key',
'class' => 'btn btn-xs btn-default ajax-get confirm',
'href' => url('access', ['uid' => '__id__']),
'data-title' => '真的要删除吗?',
'data-tips' => '删除了就无法恢复了'
];
->addRightButton('custom', $btn_access) // 添加授权按钮
~~~
![](https://box.kancloud.cn/2c1e1b96437a2b396476754894f7f006_513x347.png)
也可以自定义按钮文字
~~~
$btn_access = [
'title' => '授权',
'icon' => 'fa fa-fw fa-key',
'class' => 'btn btn-xs btn-default ajax-get confirm',
'href' => url('access', ['uid' => '__id__']),
'data-title' => '真的要删除吗?',
'data-tips' => '删除了就无法恢复了',
'data-confirm' => '删除吧',
'data-cancel' => '再想想'
];
->addRightButton('custom', $btn_access) // 添加授权按钮
~~~
![](https://box.kancloud.cn/1d18976345d9cfc3d4c75f53b30ffcc2_496x341.png)
### 弹窗形式打开
如果需要以弹出层的方式打开页面的话,只需将第三个参数设置为`true`即可,比如:
~~~
->addRightButton('edit', [], true)
~~~
>[info] 小提示:默认情况下,在弹出框操作完成之后,弹出框不会关闭。如果需要关闭弹出框,可以回传“_close_pop”指令。
~~~
$this->success('保存成功', null, '_close_pop');
或者
$this->success('保存成功', null, ['_close_pop' => 1]);
~~~
>[info] 如果希望刷新父窗口,可以回传“_parent_reload”指令。
~~~
$this->success('保存成功', null, '_parent_reload');
或
$this->success('保存成功', null, ['_parent_reload' => 1]);
~~~
#### 自定义弹窗
>[info]从1.0.3开始,弹窗支持自定义,比如重新定义弹窗的大小,标题等,只需要以数组形式传入配置参数即可,更多参数,请参考:[layer手册](http://layer.layui.com/)
比如修改弹窗的宽和高,可以这样做。
~~~
->addRightButton('edit', [], ['area' => ['800px', '90%']])
或者
->addRightButton('edit', [], ['area' => '800px'])
~~~
或者重新指定弹窗标题
~~~
->addRightButton('edit', [], ['area' => ['800px', '90%'], 'title' => '这是新标题'])
~~~
也可以加个图标什么的
~~~
->addRightButton('edit', [], ['area' => ['800px', '90%'], 'title' => '<i class="fa fa-user"></i> 这是新标题'])
~~~
当然也可以不显示标题
~~~
->addRightButton('edit', [], ['area' => ['800px', '90%'], 'title' => false])
~~~
甚至可以定义标题样式
~~~
->addRightButton('edit', [], ['area' => ['800px', '90%'], 'title' => ['新标题', 'font-size:18px;']])
~~~
定义皮肤
~~~
->addRightButton('edit', [], ['skin' => 'layui-layer-lan'])
~~~
### 自定义弹窗的js回调函数
>[info] 从1.0.5版本开始,弹窗支持自定义js回调函数,比如关闭弹窗时执行的回调cancel
在设置js回调函数前,需要先定义好用于回调的js函数,可以用->js()方法([引入js文件](表格-引入js文件.md)),然后在这个js文件中声明一个函数,也可以使用[设置额外JS代码](表格-设置额外JS代码.md)的方法声明。
~~~
->js('test')
->addRightButton('add', [], ['cancel' => 'cl'])
~~~
**test.js**代码如下:
~~~
var cl = function (index, layero) {
if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时,该层才会关闭
layer.close(index)
}
return false;
};
~~~
更多参数设置,请自行到[layer官网](http://layer.layui.com/)查看手册。
#### 弹窗的全局参数配置
除了可以在ZBuilder中设置弹窗参数外,从1.0.3版本开始,可以在`application\extra\zbuilder.php`文件中设置全局参数。
>[danger]注意:全局参数配置的优先级比在ZBuilder中直接设置参数低
### 自定义右侧按钮样式
从1.0.3版本开始,右侧按钮的样式,可以在全局配置文件`application\extra\zbuilder.php`中自定义。
~~~
// 右侧按钮
'right_button' => [
// 是否显示按钮文字
'title' => false,
// 是否显示图标,只有显示文字时才起作用
'icon' => true,
// 按钮大小:xs/sm/lg,留空则为普通大小
'size' => 'xs',
// 按钮样式:default/primary/success/info/warning/danger
'style' => 'primary'
]
~~~
### 单独设置按钮样式(1.1.0+)
除了可以使用上面的方式统一设置按钮样式,也可以单独设置,此功能需要`1.1.0`版本以上才支持。
**单独显示标题**
~~~
->addRightButton('edit', [], false, ['title' => true])
~~~
**单独修改按钮大小**
~~~
->addRightButton('edit', [], false, ['size' => 'sm'])
~~~
**单独隐藏图标**
~~~
->addRightButton('edit', [], false, ['title' => true, 'icon' => false])
~~~
- 序言
- 环境搭建
- 下载及安装
- 目录结构
- 快速构建器(ZBuilder)
- 表单(form)
- 设置页面标题
- 设置页提示信息
- 设置表单提交地址
- 隐藏按钮
- 添加按钮
- 设置按钮标题
- 添加表单项
- 复选
- 单选
- 日期
- 时间
- 开关
- 标签
- 数组
- 分组
- 范围
- 按钮
- 数字框
- 密码框
- 取色器
- 下拉菜单
- 普通联动
- 快速联动
- 拖拽排序
- 静态文本
- 格式文本
- 日期时间
- 日期范围
- 图片裁剪
- 百度地图
- 单文件上传
- 多文件上传
- 单图片上传
- 多图片上传
- 隐藏表单项
- 图标选择器
- 单行文本框
- 多行文本框
- 百度编辑器
- CKEditor编辑器
- wang编辑器
- markdown编辑器
- summernote编辑器
- 图片展示(1.1.0+)
- 单文件展示(1.1.0+)
- 多文件展示(1.1.0+)
- 下拉菜单Ajax(1.3.3+)
- 复杂表格(1.4.3+)
- 数据表格(1.4.3+)
- 分组下拉菜单(1.4.3+)
- 表格选取(1.4.3+)
- 穿梭框(1.4.3+)
- 添加表单项通用方法
- 直接设置表单项
- 表单布局
- 设置Tab按钮列表
- 设置表单数据
- 引入js文件
- 引入css文件
- 设置额外JS代码
- 设置额外CSS样式
- 设置额外HTML代码
- 是否ajax方式提交
- 设置模版路径
- 设置触发器
- 设置表单提交确认框
- 自定义表单项(1.0.6+)
- 设置表单提交方式(1.0.6+)
- 模板变量赋值(1.0.7+)
- 设置页面空表单项提示(1.0.7+)
- 自定义扩展表单图标(1.2.0+)
- 设置表单令牌(1.3.1+)
- 新窗口打开返回的url(1.4.4+)
- 表格(table)
- 设置页面标题
- 设置页面提示信息
- 添加一列
- 字段类型
- switch
- status
- yesno
- text.edit
- textarea.edit
- password
- url
- tel
- number
- icon
- byte
- date
- time
- datetime
- date.edit
- time.edit
- datetime.edit
- picture
- pictures
- select
- callback
- link
- text
- img_url
- files(1.1.1+)
- popover(1.4.4+)
- 添加多列
- 添加数量索引
- 添加快捷编辑的验证器
- 设置表格数据
- 隐藏第一列多选框
- 添加表头排序
- 添加表头筛选
- 添加表头筛选条件
- 添加时间段筛选
- 添加一个右侧按钮
- 添加多个右侧按钮
- 添加一个顶部按钮
- 添加多个顶部按钮
- 自动添加按钮
- 自动编辑按钮
- 替换右侧按钮
- 设置搜索参数
- 设置数据库表名
- 设置插件名称
- 设置表格主键
- 设置Tab按钮列表
- 设置分页
- 去除分页
- 引入js文件
- 引入css文件
- 设置额外JS代码
- 设置额外CSS样式
- 设置额外HTML代码
- 设置额外HTML代码-模板文件(1.4.0+)
- 设置模版路径
- 添加行class名
- 添加顶部下拉筛选
- 设置页面空数据提示(1.0.7+)
- 模板变量赋值(1.0.7+)
- 设置使用原始数据字段(1.0.8+)
- 设置搜索区域(1.1.0+)
- 设置表格高度(1.3.0+)
- 固定左列(1.3.0+)
- 固定右列(1.3.0+)
- 设置列宽(1.3.0+)
- 设置隐藏列(1.3.0+)
- 侧栏(aside)
- 添加区块
- 设置Tab按钮列表
- 追加Tab按钮列表
- 设置当前tab
- 设置单个tab内容
- 设置多个tab内容
- 追加tab内容
- 覆盖侧栏
- 模块开发
- 创建模块信息文件
- 安装模块
- 模块配置
- 控制器
- 创建菜单节点
- 第一个控制器
- 模块参数配置页面
- 方法参考
- 数据授权(1.3.2+)
- 插件开发
- 插件入口文件
- 插件基本信息
- 管理界面的字段信息
- 新增或编辑的字段信息
- 插件钩子
- 触发器
- 原数据库表前缀
- 插件配置信息
- 安装和卸载Sql文件
- 控制器
- 模型
- 验证器
- 视图
- 方法参考
- 实践教程
- 变量参考
- 函数参考
- 安全相关
- 常见问题
- 其他杂项
- 更新日志
- 升级指导
- 贡献名单
- 关于文档