> addRightButton('类型' [, '按钮属性'])
通常列表右侧都会有操作列,如编辑、删除等操作,目前支持如下三种按钮类型
| 按钮类型 | 标识符 |
| --- | --- |
| 编辑 | edit |
| 删除 | delete |
| 自定义 | default |
## 添加编辑和删除按钮
首先,我们要多添加一列,用来放置这些按钮,字段名必须为`right_button`,类型必须为`btn`,添加后我们设置的按钮才有地方显示。
~~~
// 构建表格
return TableBuilder::getInstance()
->addColumn('username', '用户名')
->addColumn('right_button', '操作', 'btn')
->fetch();
~~~
接着,使用`addRightButton()`方法添加两个右侧按钮。
~~~
->addRightButton('edit')
->addRightButton('delete')
~~~
![](https://img.kancloud.cn/13/b9/13b9ddde1b3f3fbde133aeb1801b2f20_141x98.png)
## 修改按钮属性
| 属性 | 含义 | 示例 |
| --- | --- | --- |
| title | 标题 | 编辑 |
| icon | 字体图标 | fa fa-edit |
| class | css类 | btn btn-flat btn-info btn-xs |
| href | 链接地址 | url('edit', ['id' => '__id__']) |
按钮属性内置了以上几种属性,可通过数组的形式进行设置,默认内置了一些属性。
默认`edit`和`delete`类型已设置好颜色、文字、链接地址;
* `edit` 的默认地址为 `edit `方法,传递参数为当前行的`id`;
* `delete` 的默认地址为`del`方法,传递参数为当前行的`id`;
~~~
// 修改编辑按钮的标题
->addRightButton('edit',['title' => '修改'])
~~~
## 添加额外属性
除了修改按钮属性外,还可以给按钮添加额外的自定义属性,比如`data-test="test"`。
~~~
->addRightButton('edit', ['data-test' => 'test'])
~~~
## 添加自定义按钮
除了 编辑和删除以外,还可以添加自定义按钮,通常自定义按钮需配合自定义按钮属性来使用,如下是添加一个查看按钮,自定义按钮需要`href`属性,会自动进行跳转
~~~
$btn_info = [
'title' => '查看',
'icon' => 'fa fa-fw fa-info',
'href' => url('info', ['id' => '__id__'])
];
->addRightButton('info', $btn_info) // 添加额外按钮
~~~
![](https://img.kancloud.cn/92/e8/92e8e27e9c164b9dd81c63089d78ac39_80x45.png)
你可以传递**当前行的任意参数**,只要你想并且有
比如同时传递`email`,系统会正则匹配并替换`__id__` 和`__email__`
~~~
$btn_info = [
'title' => '查看',
'icon' => 'fa fa-fw fa-info',
'href' => url('info', ['id' => '__id__','email' => '__email__'])
];
~~~
## 执行确认
如果希望给按钮加上确认框,可以添加`confirm`类名,默认删除按键已增加确认提示
~~~
$btn_info = [
'title' => '查看',
'icon' => 'fa fa-fw fa-info',
'class' => 'btn btn-flat btn-default btn-xs confirm',
'href' => url('info', ['id' => '__id__']),
];
->addRightButton('info', $btn_info) // 添加额外按钮
~~~
![](https://img.kancloud.cn/8e/67/8e67333908f4c30c0cd91900afff8d03_631x416.png)
你可以修改弹出确认里的标题、提示信息及确定和取消字样
~~~
$btn_info = [
'title' => '查看',
'icon' => 'fa fa-fw fa-info',
'class' => 'btn btn-flat btn-default btn-xs confirm',
'href' => url('info', ['id' => '__id__']),
'data-title' => '真的要删除吗?',
'data-tips' => '删除了就无法恢复了',
'data-confirm' => '删除吧',
'data-cancel' => '再想想'
];
~~~
![](https://img.kancloud.cn/e1/b9/e1b96f26ec33d3622e4ada83fbc0e7ba_526x419.png)
- 介绍
- 安装与部属
- 5.1版本安裝部署
- 6.1版本安裝部署
- 隐藏index.php
- 目录结构
- 5.1版本目录
- 6.1版本目录
- 前端组件
- 弹层使用
- 消息提示
- 弹出提示
- 确认提示
- 打开弹窗
- 自定义弹窗
- 弹出层全屏
- 重新加载
- 快速开发
- 模块管理
- 字段管理
- 快速构建器
- 表单构建器
- 添加表单项
- 单行文本框
- 多行文本框
- 单选
- 多选
- 日期
- 时间
- 日期时间
- 日期范围
- 标签
- 数字框
- 密码框
- 普通下拉菜单
- Select2下拉菜单
- 多级联动菜单
- 单图片上传
- 多图片上传
- 单文件上传
- 多文件上传
- 编辑器
- 按钮
- 隐藏域
- 取色器
- 自定义Html
- 分组
- 添加表单项通用方法
- 设置表单数据
- 设置页面标题
- 设置页面提示信息
- 设置表单提交地址
- 设置表单提交方式
- 模板变量赋值
- 设置页面空表单项提示
- 隐藏按钮
- 设置按钮标题
- 添加按钮
- 设置额外HTML代码
- 设置额外JS代码
- 设置额外CSS样式
- 设置表单提交确认框
- 隐藏<显示全部>按钮
- 表格构建器
- 设置表格的主键
- 设置页面标题
- 设置页面提示信息
- 设置表格的地址
- 设置新增的地址
- 设置修改的地址
- 设置删除的地址
- 设置额外JS代码
- 设置额外CSS样式
- 设置额外HTML代码
- 添加一列
- text
- status
- yesno
- link
- image
- select
- 添加多列
- 添加一个右侧按钮
- 添加多个右侧按钮
- 添加一个顶部按钮
- 添加多个顶部按钮
- 设置搜索的字段
- 设置表格的行数
- 设置空数据提示信息
- 设置固定左列
- 设置固定右列
- 模板制作
- 模板目录及设置
- 标签手册
- V5版本
- 系统标签
- TDK标签
- 列表标签
- 详情标签
- 上下篇标签
- 导航标签
- 栏目标签
- 位置标签
- 友情链接标签
- 广告标签
- 碎片标签
- 通用列表标签
- 搜索列表标签
- 获取字段
- V6版本
- 模板目录及文件命名
- 系统标签
- TDK标签
- 列表标签
- 详情标签
- 上下篇标签
- 导航标签
- 栏目标签
- 位置标签
- 友情链接标签
- 广告标签
- 碎片标签
- 通用列表标签
- 搜索列表标签
- 字典标签
- 标签云
- 插件模块
- 插件说明
- 常见问题
- 模型字段新增报错
- 数据库无法备份
- 如何修改后台目录
- 绑定手机端域名
- 左侧菜单点击自动隐藏
- 前台为何只有4个控制器
- 为何广告管理的内容不显示
- 后台编辑器无法上传图片
- 表类型选择CMS和后台的区别
- 精简文件和数据库
- 后台密码初始化
- 常用函数
- textareaBr 文本域换行
- send_email 邮件发送
- 更新日志
- 二开示例
- 关联文章的实现
- 文章模块优化详情页URL
- api文档
- 保存内容中第一张图片到缩略图