Fastadmin前台表格操作系列二
前台使用bootstrap-table表格及其表格操作
文章目录
前言
在前面的Fastadmin前台表格操作系列一中，我们已经把bootstrap-table表格成功移植到前台，并且数据显示是正常的。但是！！！！如果是跟我一样拿前台的user.js改的，不是使用后台生成的js复制粘贴到frontend的话，就会出现我们后台的btn-dialog（弹窗按钮），btn-ajax（ajax提交按钮），btn-addtabs（打开新标签按钮）这三大主要按钮都会失效，会变成跳转的，这个时候我们还是手动写一下Js，防止新同学不会（我也是刚学的）、不知道在哪写Js，所以我这里做一下示范。
提示：以下是本篇文章正文内容，下面案例可供参考
一、fastadmin三大操作按钮？
btn-dialog（弹窗按钮），btn-ajax（ajax提交按钮），btn-addtabs（打开新标签按钮）
顾名思义就是在fastadmin后台生成按钮时添加对应的属性，就能生成对应的操作按钮
{
field: 'buttons',
width: "120px",
title: __('操作'),
table: table,
events: Table.api.events.operate,
buttons: [
{
name: 'send',
text: __('审核'),
title: __('审核'),
classname: 'btn btn-xs btn-primary btn-dialog btn-check',
icon: 'fa fa fa-send',
url: 'refund/refundreturn/check',
},
{
name: '退款',
text: __('退款'),
title: __('退款'),
classname: 'btn btn-xs btn-primary btn-ajax btn-check',
icon: 'fa fa fa-send',
url: 'refund/refundreturn/refundMoney',
},
{
name: '收货确认',
text: __('收货确认'),
title: __('收货确认'),
classname: 'btn btn-xs btn-primary btn-addtabs btn-check',
icon: 'fa fa fa-send',
url: 'refund/refundreturn/confirmRefund',
},
],
formatter: Table.api.formatter.buttons,operate:false
}对应的效果：
1.btn-dialog（弹窗按钮）：
2.btn-ajax（ajax提交按钮）：
3.btn-addtabs（打开新标签按钮）：
这一组按钮还是在日后的开发过程中可能会经常用到的，我把所有的代码贴出来，后面如果想用就可以直接复制粘贴：按钮组不做隐藏
{
field: 'buttons',
width: "120px",
title: __('操作'),
table: table,
events: Table.api.events.operate,
buttons: [
{
name: 'send',
text: __('审核'),
title: __('审核'),
classname: 'btn btn-xs btn-primary btn-dialog btn-check',
icon: 'fa fa fa-send',
url: 'refund/refundreturn/check',
},
{
name: '退款',
text: __('退款'),
title: __('退款'),
classname: 'btn btn-xs btn-primary btn-dialog btn-check',
icon: 'fa fa fa-send',
url: 'refund/refundreturn/refundMoney',
},
{
name: '收货确认',
text: __('收货确认'),
title: __('收货确认'),
classname: 'btn btn-xs btn-primary btn-dialog btn-check',
icon: 'fa fa fa-send',
url: 'refund/refundreturn/confirmRefund',
},
{
name: '发货',
text: __('发货'),
title: __('发货'),
classname: 'btn btn-xs btn-primary btn-dialog btn-check',
icon: 'fa fa fa-send',
url: 'refund/refundreturn/delive',
},
{
name: 'detail',
text: __('查看'),
title: __('查看详情'),
classname: 'btn btn-xs btn-info btn-dialog btn-check',
icon: 'fa fa-file-text-o',
url: 'refund/refundreturn/detail',
},
],
formatter: Table.api.formatter.buttons,operate:false
}做隐藏：按条件。
{
field: 'buttons',
width: "120px",
title: __('操作'),
table: table,
events: Table.api.events.operate,
buttons: [
{
name: 'send',
text: __('审核'),
title: __('审核'),
classname: 'btn btn-xs btn-primary btn-dialog btn-check',
icon: 'fa fa fa-send',
url: 'refund/refundreturn/check',
visible: function (row) {
//返回true时按钮显示,返回false隐藏
//console.log(row);
if(row.status==0 ){
return true;
}else {
return false;
}
},
},
{
name: '退款',
text: __('退款'),
title: __('退款'),
classname: 'btn btn-xs btn-primary btn-dialog btn-check',
icon: 'fa fa fa-send',
url: 'refund/refundreturn/refundMoney',
visible: function (row) {
//返回true时按钮显示,返回false隐藏
//在仅退款并已同意 或者在退货退款且已收到买家寄回的物品后
if ((row.type == 0 && row.status == 1) || (row.type == 1 && row.status == 3)) {
return true;
}else {
return false;
}
},
},
{
name: '收货确认',
text: __('收货确认'),
title: __('收货确认'),
classname: 'btn btn-xs btn-primary btn-dialog btn-check',
icon: 'fa fa fa-send',
url: 'refund/refundreturn/confirmRefund',
visible: function (row) {
//返回true时按钮显示,返回false隐藏
//console.log(row);
if((row.type !=0 && row.status == 2) ){
return true;
}else {
return false;
}
},
},
{
name: '发货',
text: __('发货'),
title: __('发货'),
classname: 'btn btn-xs btn-primary btn-dialog btn-check',
icon: 'fa fa fa-send',
url: 'refund/refundreturn/delive',
visible: function (row) {
//返回true时按钮显示,返回false隐藏
//console.log(row);
if((row.type ==2 && row.status == 3) ){
return true;
}else {
return false;
}
},
},
{
name: 'detail',
text: __('查看'),
title: __('查看详情'),
classname: 'btn btn-xs btn-info btn-dialog btn-check',
icon: 'fa fa-file-text-o',
url: 'refund/refundreturn/detail',
visible: function (row) {
//返回true时按钮显示,返回false隐藏
return true;
}
},
],
formatter: Table.api.formatter.buttons,operate:false
}但是这一套方法，在前台使用表格的时候，完全就是不能用的，需要进行改造。
一开始我也到处问前台为啥用不了，以为是我的问题，知道看到fastadmin的创始人的这个话，我才死心了，还是手动弹窗吧。
{
field: 'operate',
title: __('Operate'),
table: table,
buttons: [{
name: 'detail',
text: '详情',
title: '详情',
icon: 'fa fa-list',
classname: 'btn btn-xs btn-primary btn-dialog',
url: 'order/detail'
}, {
name: '去支付',
title: '去支付',
classname: 'btn btn-xs btn-info btn-ajax',
icon: 'fa fa-leaf',
url: 'order/pay',
//visible属性可以让按钮显示或者隐藏，这里通过判断paystatus = 1就显示，否则就隐藏
visible: function (row) {
if (row.paystatus == 1) {
return true
} else {
return false
}
},
text: '去支付',
}
],
events: Table.api.events.operate,
formatter: Table.api.formatter.operate
}二、前台使用步骤
1.btn-ajax
代码如下（示例）：
这里就手搓一下Ajax的，给初学者学习一下
这里我们设置一下btn-ajax这个按钮
{
field: 'operate',
title: __('Operate'),
table: table,
buttons: [{
name: 'detail',
text: '详情',
title: '详情',
icon: 'fa fa-list',
classname: 'btn btn-xs btn-primary btn-dialog',
url: 'order/detail'
}, {
name: '去支付',
title: '去支付',
classname: 'btn btn-xs btn-info btn-ajax',
icon: 'fa fa-leaf',
//visible属性可以让按钮显示或者隐藏，这里通过判断paystatus = 1就显示，否则就隐藏
visible: function (row) {
if (row.paystatus == 1) {
return true
} else {
return false
}
},
text: '去支付',
}
],
events: Table.api.events.operate,
formatter: Table.api.formatter.operate
}我们看到明显的btn-ajax这个按钮叫去支付，
//去支付按钮采用ajax提交
$('#myTabContent').on('click', '.btn-ajax', function () {
$.ajax({
url: 'order/pay',
success: function (data, ret) {
//这里可以重定向到支付页面,乱跳就是成功了
Layer.msg("成功，跳转到支付页面...");
setTimeout(function () {
window.open(data.url,'_blank');
}, 3000);
},
error: function (data, ret) {
Layer.msg(ret.msg);
}
})
});这里我们需要获取id，用fastadmin来做肯定是获取不到了
上面是后台还可以用一下，在前台没有使用Fast.api这些封装的，所以都不行，我们就得回到原始的bootstrap-table这个获取一行数据的这个方法，这个我也是在csdn找其他老哥写的，这里贴一下地址：bootstrap table 获取表格数据方式_js获取bootstrap table 取值-CSDN博客
所以我们这个Js的完整代码是：
//去支付按钮采用ajax提交
$('#myTabContent').on('click', '.btn-ajax', function () {
var id = $("#table").bootstrapTable('getSelections');//这里就能获取到id
$.ajax({
url: 'order/pay',
data: {
id: id
},
success: function (data, ret) {
//提示三秒后在新页面打开
Layer.msg("成功，跳转到支付页面...");
setTimeout(function () {
window.open(data.url,'_blank');
}, 3000);
},
error: function (data, ret) {
Layer.msg(ret.msg);
}
})
});2.btn-dialog
这个是fastadmin的弹窗按钮，在后台是直接能用的，在前台引入库也是能用，但是咱就是不引入，还是自己学一下咋做呢。
这个是偶然间得到的，接下来看看在哪得到的灵感。
灵感来源：
然后我们看这个方法就可以了啊！！！！这就是我们所需要的弹窗。下面就是我们需要的代码啦：
$(document).on("click", ".btn-change", function () {
var that = this;
var id = $(this).data("type") + "tpl";
var content = Template(id, {});
Layer.open({
type: 1,
title: "修改",
area: [$(window).width() < 450 ? ($(window).width() - 10) + "px" : "450px", "355px"],
content: content,
success: function (layero) {
var form = $("form", layero);
Form.api.bindevent(form, function (data) {
location.reload();
Layer.closeAll();
});
}
});
});接下去应该都会操作了吧。实在不会的同学找我手把手教学一下。
总结
这就是前台使用三大按钮的具体实现，我们可以通过不断练习，慢慢尝试得到想要的结果，还有获取选中行一开始我也在fast官方找了好久想用他们提供的方法，后面发现走不通（可能我功力不够）。总的来说功能也差不多都能实现了。
这里是编程界的彭于晏，一个不务正业的程序员，广交天下朋友，有什么开发问题一起交流。