FASTADMIN框架避坑指南
框架都有一个通病，就是基础基础功能用起来都很快，但是稍微复杂一点的你就要开始翻文档了，可能文档还没有，社区也没有人回答，既然用了，就记录下遇到的问题，不定期更新。
1.列表自定义按钮
先上一段代码：
// 操作按钮
{
field: 'operate',
title: __('Operate'),
table: table,
buttons:
[
{
name: '查询保单',
text: __('查询保单'),
title: __('查询保单'),
classname: 'btn btn-xs btn-info btn-primary btn-magic btn-ajax',
icon: 'fa',
url: 'insurance/electronicpolicy?id={id}&test-id={row.id}',
confirm: '确认查看',
success: function (data, ret) {
if(ret.code){
window.open(ret.data.pdfUrl);
}else{
Layer.alert(ret.msg);
}
},
error: function (data, ret) {
layer.msg(ret.msg, {icon: 2, time: 1000});
return false;
},
visible: function (row) {
return row.type ==5?false:true;
}
},
{
name: '查看保单',
text: __('查看保单'),
title: __('查看保单'),
classname: 'btn btn-xs btn-info btn-primary btn-magic btn-dialog',
extend: 'data-area=["50%","50%"]',
icon: 'fa',
url: 'insurance/view?id={id}',
confirm: '确认查看',
callback: function (data, ret) {
table.bootstrapTable('refresh', {});
}
}
],
events: Table.api.events.operate,
formatter: function (value, row, index) {
var that = $.extend({}, this);
var table = $(that.table).clone(true);
$(table).data("operate-edit", null);
$(table).data("operate-del", null);
that.table = table;
return Table.api.formatter.operate.call(that, value, row, index);
}
}①：
上面是一个自定义按钮的代码，基础的参数就不说了，其中classname中如果是需要像代码中异步调用的要用“btn-ajax"，会调用success和error，如果是要弹窗的需要用"btn-dialog"，回调用callback，
要控制弹窗的大小则需要用到extend中增加data-area来控制弹窗的大小 ，也可以在初始化表格（Table.api.init）的后面针对个别按钮调整弹窗大小，代码如下：
Table.button.edit.extend += ' data-area=["400px","300px"]';不管是异步还是弹窗都可以调用confirm。
如果要设置是否显示可以用visible,后面可以跟函数判断，列表参数同样适用
②：$(table).data("operate-edit", null);是将框架默认的编辑按钮去除
③：如果url要带对应行的参数只需要在后面加上{row.id}
2.富文本编辑器
在fastadmin中使用编辑器需要先去插件市场安装，里面有几个免费的插件，记得之前是直接可以安装的，不知道有没有记错，目前是需要登录以后安装，安装以后都是默认增加.editor自动渲染富文本编辑器
① 其中summernote编辑器赋值代码如下：
$(this).summernote('code',content);3.列表其他操作
index: function () {
// 初始化表格参数配置
//...
var table = $("#table");
// 初始化表格
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
pk: 'id',
sortName: 'id',
// 加载成功触发，其他事件可至官网查看: 表格-事件
onLoadSuccess:function(data){
let json = data.json
$("#json_memmbers").html(json['memmbers'])
//...
},
columns: [
[
//...
{field: 'showmoney', title: __('费用'),formatter:function(val,row){
return '';
}}
{field: 'balances', title: __('余额结算'), formatter: function(value, row, index){
return '点击结算余额';
}
},
]
]
});
$(document).on('change','.showmoney',function(){
var showmonwy = $(this).val();
var id = $(this).attr('data-id');
var company_id = $(this).attr('data-comid');
Fast.api.ajax({
url: ajaxUrl,
data: {
id:id,
company_id:company_id,
showmonwy:showmonwy,
}
}, function(data, ret) {
table.bootstrapTable('refresh')
})
});
$(document).on('click','.updateBalance',function(){
let id = $(this).data('id')
var prompt = layer.prompt({title: '请输入要结算的余额', formType: 3}, function(text, index){
Fast.api.ajax({
url: 'area/index/settle',
data: {
id:id,
money:text,
}
}, function(data, ret) {
Layer.alert(ret.msg);
Layer.close(prompt);
table.bootstrapTable('refresh')
})
});
});
// 为表格绑定事件
Table.api.bindevent(table);
},①：在列表中加入输入框修改
②：在列表中加入按钮，prompt弹窗修改
4.需要在表格页面增加组件
define(['jquery', 'bootstrap', 'backend', 'table', 'form','bootstrap-datetimepicker'], function ($, undefined, Backend, Table, Form) {
var Controller = {
index: function () {
// 初始化表格参数配置
Table.api.init({
extend: {}
});
var table = $("#table");
// 初始化表格
table.bootstrapTable({});
// 为表格绑定事件
Table.api.bindevent(table);
// 失去焦点执行
$(document).on("blur","#searchTime",function (e){
var select = $(this).val();
table.bootstrapTable("refresh",{
query:{
select:select,
},
})
});
Form.events.daterangepicker($("#myTabContent"));
}
};
return Controller;
});比如要加入日期选择组件，在define处引入'bootstrap-datetimepicker'，然后在对应方法内绑定：Form.events.daterangepicker($("#myTabContent"));