Fastadmin---table自定义按钮开发

在用 Fastadmin 开发插件的时候，系统自带的table功能按钮有时候满足不了我们的需求，这个时候就需要自定义按钮来实现一些特定功能。

参考：

https://www.bilibili.com/video/BV1tz4y147b4/?spm_id_from=333.337.search-card.all.click&vd_source=eb3f5bb5e0c84a83e0634caa652b7d23

例如：我们是datav模块，查看具体的前端代码：

/public/assets/js/backend/data/datav.js

这个代码控制了列表功能：

代码示例：

{field: 'operate', title: '发放积分', table: table, events: Table.api.events.operate, buttons:[
    {
        name: 'audit',
        text: '发放积分',
        title: '发放积分',
        classname: 'btn btn-xs btn-primary btn-dialog',
        icon: 'fa',
        url:'datav/refresh?',
        callback:function(data){
            Layer.alert('接收到回调信息：' + JSON.stringify(data),{title:'回调信息'});
        },
        success:function(data,ret){
            table.bootstrapTable('refresh');
        },
        visible:function(row){
            return true;
        }
    }
], formatter: Table.api.formatter.buttons}

视图示例：

修改了JS代码，但是刷新不生效，需要【清除浏览器缓存】因为是通过require.js加载的js所有路由没有变加载的还是缓存的js，所以需要清除浏览器的缓存。

表格开发：

https://doc.fastadmin.net/doc/189.html

JS实例化表格：

<table id="table" class="table table-striped table-bordered table-hover table-nowrap"
       data-operate-edit="{:$auth->check('test/edit')}" 
       data-operate-del="{:$auth->check('test/del')}" 
       width="100%">
</table>

初始化：

// 初始化表格参数配置
Table.api.init({
    extend: {
        index_url: 'test/index' + location.search,
        add_url: 'test/add',
        edit_url: 'test/edit',
        del_url: 'test/del',
        multi_url: 'test/multi',
        table: 'test',
    }
});

分页配置：

Table.api.init({
    pageSize: 20, //调整分页大小为20
    pageList: [10, 25, 50, 100, 'All'], //增加一个100的分页大小
});

初始化表格：

var table = $("#table");
// 初始化表格
table.bootstrapTable({
    url: $.fn.bootstrapTable.defaults.extend.index_url,
    pk: 'id',
    sortName: 'weigh',
    columns: [
        [
            {checkbox: true},
            {field: 'id', title: __('Id')},
            {field: 'category_id', title: __('Category_id')},
            {field: 'title', title: __('Title')},
            {field: 'image', title: __('Image'), events: Table.api.events.image, formatter: Table.api.formatter.image},
            {field: 'images', title: __('Images'), events: Table.api.events.image, formatter: Table.api.formatter.images},
            {field: 'refreshtime', title: __('Refreshtime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
            {field: 'weigh', title: __('Weigh')},
            {field: 'switch', title: __('Switch'), searchList: {"1":__('Yes'),"0":__('No')}, formatter: Table.api.formatter.toggle},
            {field: 'status', title: __('Status'), searchList: {"normal":__('Normal'),"hidden":__('Hidden')}, formatter: Table.api.formatter.status},
            {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
            //更多参数请参考**列参数**文档章节
        ]
    ],
    //更多参数请参考**表格参数**文档章节
});

// 为表格绑定事件
Table.api.bindevent(table);

表格参数：

url        服务器数据的加载地址
sortName   定义排序列
sortOrder  排序方式 asc desc
height     高度
columns    列配置项
method     请求方式 get post
cache      ajax数据缓存 true or false
dataType   默认 json
pageNumber 首页页码 默认 1
pageSize   数据条数
pageList   页面数据条数
search     是否启用搜索  默认false

columns 列表参数：

radio       是否显示为单选按钮 默认 false
checkbox    是否显示为筛选框   默认 false
field       字段名称
title       字段标题
align       对齐方式 支持 left right center
valign      垂直对齐方式 支持 top middle bottom
width       宽度 默认详细 支持百分比
sortable    是否允许排序 默认 false
order       排序方式 asc desc
visibel     是否显示

格式化：

table.bootstrapTable({
    url: $.fn.bootstrapTable.defaults.extend.index_url,
    columns: [
        [
            {checkbox: true},
            {field: 'id', title: __('Id')},
            {field: 'intro', title: __('Intro'), formatter: function(value, row, index) {
                //value：intro字段的值，在开启escape时，value值已经自动做转义处理
                //row：当前行所有原始字段的数据，注意row下的所有数据均未做转义处理，需自行做好转义处理
                //index：当前行索引
                //示例：
                return value + " - " + parseInt(row.id);
            }
        ]
    ]
});

按钮组：

buttons: [
    {
        name: 'add', //唯一标识、权限标识
        dropdown: '', //按钮下拉分组，默认为不分组
        text: '同意', //按钮显示的文字，支持function
        title: '我是标题', //按钮显示的文字，支持function
        classname: 'btn btn-info btn-xs btn-dialog', //按钮的class，支持btn-dialog/btn-ajax/btn-addtabs
        icon: 'fa fa-plus', //按钮的图标
        url: 'department/index/add/parent_id/{ids}', //按钮的链接，支持使用{字段名}来占位替换，支持function
        confirm: '是否同意该请求？', //点击按钮后的确认框，支持function
        refresh: true, //操作完成后是否刷新列表
        disable: function(row){}, //判断按钮是否禁用，支持function
        visible: function(row){}, //判断按钮是否可见，支持function
        hidden: function(row){}, //判断按钮是否隐藏，支持function
        extend: '', //扩展的扩展属性，FastAdmin1.4.0+支持function
    },
    {
        ...
    }
]

打完收工！