ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
## 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]) ~~~