fastadmin按钮buttons全部事件整理

写代码的猫叔

发布于：Aug 8, 2021

次浏览

对应的视频地址：
https://www.ixigua.com/7029550092092703262

https://www.ixigua.com/7029551561626157605

相关链接

• 一张图解析FastAdmin中的表格列表的功能(第15条) https://ask.fastadmin.net/article/323.html
• 一张图解析FastAdmin中的弹出窗口的功能 https://ask.fastadmin.net/article/2527.html

classname来控制按钮执行方式

弹出窗口 btn-dialog，ajax请求 btn-ajax，新选项卡btn-addtabs，自定义点击事件 btn-click

按钮组 样例

COPY
{
    field: 'buttons',
    width: "120px",
    title: '按钮组',
    table: table,
    events: Table.api.events.operate,
    buttons: [
       
    ],
    formatter: Table.api.formatter.buttons
}

弹出窗口 btn-dialog

修改弹出窗大小 extend: ' data-area = \'["800px","600px"]\' ',

COPY
  {
      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;
      }
  }

ajax请求 btn-ajax

完成后刷新表格
注意这里是或者的关系，不能同时用

COPY
refresh: true,
//或者
success: function (data, ret) {
    table.bootstrapTable('refresh');
},

COPY
  {
      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;
      }
  }

新选项卡 btn-addtabs

COPY
  {
      name: 'addtabs',
      text: __('新选项卡中打开'),
      title: __('新选项卡中打开'),
      classname: 'btn btn-xs btn-warning btn-addtabs',
      icon: 'fa fa-folder-o',
      url: 'example/bootstraptable/detail'
  }

自定义点击按钮事件 btn-click

此处例子为点击弹出窗口，输入文字，执行ajax请求

COPY
{
    name: 'shield',
    text: '完成',
    icon: 'fa fa-check-circle fa-fw',
    classname: 'btn btn-xs btn-success btn-click',
    click:function(e,s) {       
      layer.prompt({title:"填写奖金数值"},function(val, index){
        if(!val || val ==0 ){
          layer.msg("请先填写正确的奖金数值！");
          return;
        }
        if (isNaN(val)) {
          layer.msg("请输入数字！");
          return;
        }
        $.ajax({
          type: "post",
          url: "survey/over",
          data: {
            ids:s.id,
            bonus:val
          },
          dataType: "json",
          success: function (response) {
            if(response.code == 2){
              layer.msg(response.msg)
            }
            else{
 
              layer.close(index);
              table.bootstrapTable('refresh');
            }
          }
        });
 
      });
      return false
    },                                
    refresh: true,
    visible: function (row) {
      //返回true时按钮显示,返回false隐藏
      // console.log(row)
      return !row.status;
    }  
  },

普通列（非操作列）里怎么加按钮

利用formatter 来处理再输出

COPY
{field: 'ceshis', title: __('Ceshis'),formatter:function(a,b,c) {
    console.log('a,b,c: ', a,b,c);
    return a+'--'+'<button class="btn btn-xs btn-info" onclick="console.log('+c+');return false;">点击</button>'    
}},

怎么去掉edit del dragsort 这样的按钮

修改 operate

其他参数

dropdown: ‘更多’,//如果包含dropdown，将会以下拉列表的形式展示

COPY
{
    name: 'addtabs',
    text: __('新选项卡中打开'),
    title: __('新选项卡中打开'),
    dropdown: '更多',//如果包含dropdown，将会以下拉列表的形式展示
    classname: 'btn btn-xs btn-warning btn-addtabs',
    icon: 'fa fa-folder-o',
    url: './ceshi1/demo1'
}

扩展知识：

点击就自动选中了checkbox，双击就弹出编辑，怎么关闭？

方法1：改html:

table 加上属性即可 ：

关闭点击选中： data-click-to-select="false"

关闭双击编辑：data-dbl-click-to-edit="false"

方法2：改js

COPY
clickToSelect: false, //是否启用点击选中
 
dblClickToEdit: false, //是否启用双击编辑

方法3：改js

可控制某一列禁用点击选中

COPY
table.on('post-body.bs.table', function (e, settings, json, xhr) {      
  $('tr td:eq(2)',this).off('click')
});

可定义自己的双击事件

COPY
table.on('dbl-click-row.bs.table', function (e, row, element, field) {
  console.log('双击一行');  
  return false
  // $(Table.config.editonebtn, element).trigger("click");
});

更新于：Nov 13, 2021

fastadmin