FastAdmin表格自定义操作按钮,这篇不同的是表格的每一行都加上操作按钮。
效果如下
编辑对应的js文件,修改表格columns
的operate
那行。
形式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-ajax
和btn-click
两种,后者需要自己写AJAX请求,实现上更灵活,可以传递更多的参数,如POST方式传参。如果三个都不选,则是在当前页面上打开。
也可以在页面上只添加一个操作按钮,选中具体后再操作,具体可参见 FastAdmin表格操作按钮
1 thought on “FastAdmin表格自定义操作按钮2”