FastAdmin表格自定义操作按钮2

FastAdmin表格自定义操作按钮,这篇不同的是表格的每一行都加上操作按钮。

效果如下
按钮效果

编辑对应的js文件,修改表格columnsoperate那行。

形式1

在对话框中打开一个页面

{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate,
    buttons: [
        {
            name: 'detail',
            title: '实名认证',
            classname: 'btn btn-xs btn-primary btn-dialog',
            icon: 'fa fa-address-card',
            url: 'user/realname/',
            callback: function (data) {
                layer.alert(data);
            }
        }
    ],
    formatter: Table.api.formatter.operate
}

形式2

AJAX提交

{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate,
    buttons: [
        {
            name: 'prove',
            title: "通过",
            classname: 'btn btn-xs btn-success btn-ajax',
            icon: 'fa fa-check',
            url: 'user_deposit/prove/',
            confirm:'确定要通过吗?',
            success: function (data, ret) {
                layer.alert(ret.msg);
                //如果需要阻止成功提示,则必须使用return false;
                //return false;
            },
            error: function (data, ret) {
                console.log(data, ret);
                layer.alert(ret.msg);
                return false;
            }
        }
    ],
    formatter: Table.api.formatter.operate
}

形式3

{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate,
    buttons: [
        {
            name: 'reject',
            text: '驳回',
            title: '驳回',
            icon: 'fa fa-remove',
            classname: 'btn btn-xs btn-danger btn-click',
            click: function (e, value, row, index) {
                   var that = this;
                   var table = $(that).closest('table');
                    var options = table.bootstrapTable('getOptions');
                    var load = Layer.prompt({
                           title: '确定驳回吗?请输入驳回原因',
                           shadeClose: true
                        }, function (text, index) {
                            console.log(value);
                            var id = value.id;
                            var reject_reason = $.trim(text);
                            $.ajax({
                                type: "POST",
                                url: "withdraw/reject",
                                data: {
                                     ids: id,
                                      reject_reason: reject_reason
                                },
                                dataType:"json",
                                success: function (res) {
                                    if (res.code == 1) {
                                        Layer.msg(res.msg);
                                        Layer.closeAll();
                                        $('.btn-refresh').trigger('click');
                                    } else {
                                        Layer.msg(res.msg);
                                    }
                                }
                            })
                    }
                )
            }
        }
    ],
    formatter: Table.api.formatter.operate
}

注意这三种形式在classname的定义有所不同,对话框是btn-dialog,AJAX则是有btn-ajaxbtn-click两种,后者需要自己写AJAX请求,实现上更灵活,可以传递更多的参数,如POST方式传参。如果三个都不选,则是在当前页面上打开。

也可以在页面上只添加一个操作按钮,选中具体后再操作,具体可参见 FastAdmin表格操作按钮

1 thought on “FastAdmin表格自定义操作按钮2”

Leave a Comment

豫ICP备19001387号-1