框架都有一个通病，就是基础基础功能用起来都很快，但是稍微复杂一点的你就要开始翻文档了，可能文档还没有，社区也没有人回答，既然用了，就记录下遇到的问题，不定期更新。
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', {});
}
},
{
name: '退还保证金',
text: '退还保证金',
title: '退还保证金',
icon: 'fa fa-pencil',
extend: 'data-area=["300px","400px"]',
classname: 'btn btn-xs btn-warning btn-click',
visible: function (row) {
//返回true时按钮显示,返回false隐藏
if(row.is_refund){ return false; }
return true;
},
click:function (e, row) {
var remarkReason = "";
layer.prompt({
formType: 0,
value: row.ensure,
title: '请输入要退还的金额,共' + row.ensure + '元',
btn: ['确定','取消'], //按钮，
btnAlign: 'c'
}, function(value,index){
remarkReason = value;
$.ajax({
url:'refund?ids=' + row.id,
type:'post',
dataType:'json',
data:{id:row.id,money: remarkReason},
success:function (res) {
if(res.code){
layer.msg(res.msg);
table.bootstrapTable('refresh', {});
}else{
layer.msg(res.msg);
}
}
})
},function (value,index) {
});
},
},
],
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，如果是点击事件用“btn-click"
要控制弹窗的大小则需要用到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 '<input name="showmoney" value="'+val+'" class="form-control showmoney" data-comid="'+row.company_id+'" data-id="'+row.id+'">';
}}
{field: 'balances', title: __('余额结算'), formatter: function(value, row, index){
return '<span data-id="' + row["id"] + '" class="label label-info jump updateBalance" data-toggle="tooltip" title="">点击结算余额</span>';
}
},
]
]
});
$(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"));
<div class="panel-body">
<div id="myTabContent" class="tab-content">
<div class="row">
</div>
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding">
<div id="toolbar" class="toolbar">
<a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
<div class="btn-insurance " >
<label>保单创建时间 : </label>
<input id="searchTime" class="form-control datetimerange" placeholder="请选择保单创建时间" >
</div>
</div>
<table id="table" class="table table-striped table-bordered table-hover table-nowrap" data-operate-edit="{:$auth->check('X/edit')}" data-operate-del="{:$auth->check('X/del')}" width="100%"></table>
</div>
</div>
</div>
</div>
2145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
