fastadmin buttons参数

如果需要把一个字段改成buttons  需要在field 字段增加如下参数
formatter: Table.api.formatter.buttons
例子标红处
{
              field: "测试按钮",
              title: __("Group"),
              formatter: function (value, row, index) {
                return '<button class="btn btn-xs btn-info" onclick=alert("isclick")>点击 </button> ';
              },
            },

{ 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: '确认发送',
      refresh:true, 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 }

其中classname 参数控制按钮的执行方式 :btn-dialog  btn-ajax、btn-addtabs、btn-click 分别表示弹窗,执行ajax,打开到标签,自定义按钮

点击包含btn-ajax按钮后可以通过参数 refresh:true   来刷新页面,或者使用success:function(data,ret){

  table.bootstrapTable('refresh')

}

 

关闭单击选择行和关闭双击弹出编辑

在index.html 页面修改

data-click-to-select="false"    data-dbl-click-to-edit="false"
或者在js页面修改
  // 初始化表格
      table.bootstrapTable({
        url: $.fn.bootstrapTable.defaults.extend.index_url,
        pk: "id",
        sortName: "user.id",
        fixedColumns: true,
        fixedRightNumber: 1,
        clickToSelect: false,
        dblClickToEdit: false,
        columns: [
          [
            { checkbox: true },
 <table
            id="table"
            class="table table-striped table-bordered table-hover table-nowrap"
            data-operate-edit="{:$auth->check('user/user/edit')}"
            data-operate-del="{:$auth->check('user/user/del')}"
            data-click-to-select="false"
            data-dbl-click-to-edit="false"
            width="100%"
          ></table>

 

按钮配置支持的参数有:

name按钮唯一标识,其中add/edit/del/dragsort已经被占用,如果使用将覆盖相应的按钮配置。如果需要按钮按钮显示,我们可以在HTML视图文件的table添加data-buttons-标识来根据权限控制显示
text按钮的文本内容,如果不需要显示文本可忽略,支持functionstring类型
title鼠标移上去的标题或弹窗/选项显示的标题,支持functionstring类型
icon按钮的图标,请使用font-awesome图标库,比如fa fa-home
classname按钮的class, 其中classname中的btn-dialog、btn-ajax、btn-addtabs、btn-click,FastAdmin已经为这几个固定的Class注册了事件,所以可以直接使用,如果想要实现其它功能,需要自己手动编写代码绑定事件才可使用。
url按钮的链接/Ajax事件请求的URL/弹窗链接/选项卡链接,直接functionstring类型,此链接会自动在链接后添加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是否隐藏按钮,按钮默认显示,支持functionbool类型
visible是否显示按钮,按钮默认显示,支持functionbool类型
disable是否禁用按钮,按钮默认不禁用,支持functionbool类型
clickclassname包含btn-click时的点击回调事件
extend按钮扩展信息,可以任意定制按钮的参数,比如我们想在新窗口中打开链接,则配置extend:' target="_blank"'即可
dropdown下拉列表分组的名称,当多个按钮需要显示为一级时,该值为显示的文字

 

https://www.kancloud.cn/fbio/fast-admin_table/2222065

posted @ 2025-10-19 14:44  fsl  阅读(126)  评论(0)    收藏  举报