企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
> 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)