多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
![# FastAdmin中的表格列表的功能](https://img.kancloud.cn/6e/bc/6ebc1d48ac201ff2610459ea9130fe7b_1920x1057.png) >[info]**15.自定义按钮** 按钮组的功能是根据第8项中的`Table.api.formatter.buttons`进行生成的,代码如下 ~~~ { field: 'buttons', width: "120px", title: __('按钮组'), table: table, events: Table.api.events.operate, buttons: [ { name: 'detail', text: __('弹出窗口打开'), title: __('弹出窗口打开'), classname: 'btn btn-xs btn-primary btn-dialog', icon: 'fa fa-list', url: 'example/bootstraptable/detail', callback: function (data) { Layer.alert("接收到回传数据:" + JSON.stringify(data), {title: "回传数据"}); }, visible: function (row) { //返回true时按钮显示,返回false隐藏 return true; } }, { name: 'ajax', text: __('发送Ajax'), title: __('发送Ajax'), classname: 'btn btn-xs btn-success btn-magic btn-ajax', icon: 'fa fa-magic', url: 'example/bootstraptable/detail', confirm: '确认发送', success: function (data, ret) { Layer.alert(ret.msg + ",返回数据:" + JSON.stringify(data)); //如果需要阻止成功提示,则必须使用return false; //return false; }, error: function (data, ret) { console.log(data, ret); Layer.alert(ret.msg); return false; } }, { name: 'addtabs', text: __('新选项卡中打开'), title: __('新选项卡中打开'), classname: 'btn btn-xs btn-warning btn-addtabs', icon: 'fa fa-folder-o', url: 'example/bootstraptable/detail' } ], formatter: Table.api.formatter.buttons } ~~~ 按钮配置支持的参数有: > `name`按钮唯一标识,其中`add/edit/del/dragsort`已经被占用,如果使用将覆盖相应的按钮配置。如果需要按钮按钮显示,我们可以在HTML视图文件的`table`添加`data-buttons-标识`来根据权限控制显示 > `text`按钮的文本内容,如果不需要显示文本可忽略,支持`function`和`string`类型 > `title`鼠标移上去的标题或`弹窗/选项`显示的标题,支持`function`和`string`类型 > `icon`按钮的图标,请使用`font-awesome`图标库,比如`fa fa-home` > `classname`按钮的`class`, 其中`classname`中的`btn-dialog、btn-ajax、btn-addtabs、btn-click`,FastAdmin已经为这几个固定的Class注册了事件,所以可以直接使用,如果想要实现其它功能,需要自己手动编写代码绑定事件才可使用。 > `url`按钮的链接/Ajax事件请求的URL/弹窗链接/选项卡链接,直接`function`和`string`类型,此链接会自动在链接后添加`ids/{ids}`,`{ids}`为当行主键ID,如果需要传递其它字段值,请在URL中使用`{字段名}`占位即可 > `refresh`自动刷新,只针对`btn-ajax`事件 > `confirm`确认框提示文字,配置后会在确认操作再执行对应的事件,只针对`btn-ajax/btn-dialog/btn-addtabs`事件 > `success`事件成功的回调,只针对`btn-ajax`事件 > `error`事件失败的回调,只针对`btn-ajax`事件 > `callback`弹窗回传的回调,只针对`btn-dialog`事件,需要在对应打开的页面中使用`Fast.api.close(data);`进行回传数据 > `hidden`是否隐藏按钮,按钮默认显示,支持`function`和`bool`类型 > `visible`是否显示按钮,按钮默认显示,支持`function`和`bool`类型 > `disable`是否禁用按钮,按钮默认不禁用,支持`function`和`bool`类型 > `click`当`classname`包含`btn-click`时的点击回调事件 > `extend`按钮扩展信息,可以任意定制按钮的参数,比如我们想在新窗口中打开链接,则配置`extend:' target="_blank"'`即可 > `dropdown`下拉列表分组的名称,当多个按钮需要显示为一级时,该值为显示的文字